PENGANALISIS KONTRAS WARNA: MENGAPA PENTING DAN CARA MENGGUNAKANNYA

Pelajari mengapa sangat penting untuk menggunakan penganalisa kontras warna dalam desain web dan bagaimana memastikan kombinasi warna Anda dapat diakses.

Menggunakan penganalisa kontras warna sangat penting jika Anda ingin situs web Anda dapat diakses oleh sebagian besar pengunjung.

 Membuat situs web dapat diakses adalah bagian mendasar dari pekerjaan seorang desainer. Dan salah satu aspek aksesibilitas adalah memastikan teks dan warna latar belakang memiliki rasio kontras yang memadai sehingga kata-kata terlihat dan terbaca.

Mengapa Anda harus menggunakan penganalisa kontras warna

Hanya karena Anda bisa membaca teks, bukan berarti mayoritas orang bisa. Rasio kontras warna Anda harus membuat teks dapat dibaca oleh pengunjung dengan gangguan penglihatan, gangguan penglihatan, dan berbagai jenis buta warna. 

 Pedoman Aksesibilitas Konten Web (WCAG) menentukan cara untuk menghitung kontras antara warna teks dan warna latar belakang. Pedoman menetapkan kriteria keberhasilan untuk berbagai level WCAG: AA (minimum), level AAA (ditingkatkan), dan peringkat gagal. 

Sayangnya, Anda tidak dapat memeriksa rasio hanya dengan melihat warna — Anda memerlukan alat penganalisis kontras warna yang menyediakan tingkat kontras untuk teks normal, teks besar, dan objek grafis serta komponen antarmuka pengguna. Alat seperti WebAIM memungkinkan Anda memasukkan kode hex untuk warna latar depan dan warna latar belakang untuk memastikan desain Anda memenuhi persyaratan kontras warna WCAG. 

Tentu saja, mencari kode warna hex atau rgb setiap kali Anda memilih warna bisa melelahkan. Itu sebabnya kami membuat fungsi pemeriksaan kontras warna langsung ke Webflow. 

 BAGAIMANA DAN MENGAPA KAMI MEMBUAT PENGANALISA KONTRAS WARNA WEBFLOW

Banyak alat telah dibangun untuk membawa informasi kontras warna ini ke garis depan pada saat desain, tetapi tidak satu pun tersedia untuk desainer Webflow. Mereka ada sebagai halaman web yang berdiri sendiri, plugin, dan pemeriksa halaman browser.

Mantan desainer produk Webflow, Darin Dimitroff, terinspirasi oleh pemeriksa kontras warna Chrome DevTool. Dia memutuskan untuk menggunakan sepuluh persen waktunya — empat jam per minggu yang diberikan kepada karyawan Webflow untuk mengerjakan proyek impian — untuk merancang alat kontras warna langsung di Webflow. 

Setelah Darin memiliki desain dasar, dia mengajukan proposal ke senior frontend engineer, Nick Gard. Desain Darin digabungkan dengan pengetahuan Nick tentang area kode yang perlu diubah memungkinkan tim untuk mengambil ide ini ke tahap pembangunan. 

Mengambil inspirasi Darin dari fitur Chrome DevTools, Nick menggali kode yang mendukung implementasi tersebut dan belajar dari sana apa yang akan memakan waktu berminggu-minggu percobaan dan kesalahan dan pemfaktoran ulang kode untuk dilakukan.

Tak satu pun dari mereka ingin penganalisa kontras warna tetap hanya sebagai produk yang layak minimum (MVP). Jadi, menggunakan waktu sepuluh persen mereka selama minggu-minggu berikutnya, mereka menulis tes, meninjau kembali desain ikonografi, mendesak rekan kerja untuk menguji dan meninjaunya, dan akhirnya membawanya ke titik di mana itu bisa dirilis.

CARA MENGGUNAKAN PENGANALISA KONTRAS WARNA DI WEBFLOW

Anda dapat menghitung rasio kontras warna teks langsung dari pemilih warna di Webflow. 

Untuk memeriksa rasio kontras teks Anda:

• Pilih elemen teks yang ingin Anda periksa
• Buka panel Gaya > Tipografi
• Klik carikan warna elemen teks untuk membuka pemilih warna

Di dalam pemilih warna, Anda akan melihat rasio kontras level AA, level AAA, atau gagal. Anda juga dapat menyeret kursor melalui kotak warna untuk melihat area mana yang memenuhi kriteria sukses dan mana yang gagal. 

Mulai gunakan penganalisa kontras warna untuk membangun situs web yang lebih mudah diakses

Untuk panduan lebih lanjut tentang rasio kontras warna, lihat pelajaran kontras warna Universitas Webflow . 

Jika Anda ingin tahu lebih banyak tentang cara membuat situs web Anda lebih mudah diakses, Anda harus memeriksa daftar periksa aksesibilitas