Pemeriksa Kontras Warna

Luminans adalah kanal yang selalu bertahan

Warna punya dua komponen yang dapat diandalkan perancang: rona dan terang. Hanya satu di antaranya yang tepercaya bagi seluruh khalayak.

Pembedaan rona sangat beragam. Kira-kira satu dari dua belas pria memiliki defisiensi merah-hijau, dan baginya selisih rona yang tampak jelas bagi Anda mungkin tidak membawa informasi sama sekali. Pembedaan terang jauh lebih seragam. Orang dengan defisiensi penglihatan warna, orang dengan ketajaman menurun, orang dengan layar ponsel yang pudar di bawah matahari terik, dan orang dengan penglihatan yang sepenuhnya lazim sama-sama mempersepsi selisih terang yang besar sebagai selisih yang besar.

Itulah sebabnya rasio kontras menjadi metrik aksesibilitas yang menanggung beban. Ia mengukur hubungan terang antara dua warna sambil mengabaikan rona sepenuhnya — dan itulah yang Anda inginkan, karena ia memberi tahu apa yang tersisa ketika kanal rona tidak dapat diandalkan.

Rasionya membentang dari 1:1, ketika dua warna memiliki luminans relatif identik dan batas di antaranya tak terlihat oleh siapa pun, sampai 21:1 untuk hitam murni di atas putih murni. Perhitungannya ditetapkan secara presisi dalam WCAG: ubah tiap kanal sRGB menjadi cahaya linear, bobotkan tiap kanal menurut sumbangannya pada luminans yang dipersepsi, lalu bandingkan hasil yang lebih terang dengan yang lebih gelap.

Ambang-ambangnya, dan apa yang mendasarinya

4,5:1 — teks normal (WCAG AA). Dasar untuk teks isi. Angka ini diturunkan dari kehilangan sensitivitas kontras yang berkaitan dengan ketajaman kira-kira 20/40, yang umum pada orang dewasa lanjut usia dan dapat dikoreksi tetapi kerap tidak dikoreksi.

3:1 — teks besar (WCAG AA). Berlaku mulai 18pt reguler atau 14pt tebal. Huruf yang lebih besar bergaris lebih tebal sehingga tetap terbaca pada kontras lebih rendah.

3:1 — kontras bukan teks (WCAG AA). Mencakup komponen antarmuka dan grafik bermakna: bingkai isian, status sakelar, penanda fokus, ikon yang menyampaikan informasi, dan bagian penting sebuah grafik. Kriteria inilah yang paling sering terlewat, dan biasanya di sinilah antarmuka yang anggun tetapi berkontras rendah gagal dalam audit.

7:1 dan 4,5:1 — teks normal dan besar (WCAG AAA). Tingkat yang lebih ketat, ditujukan pada ketajaman kira-kira 20/80. Layak diambil untuk bacaan panjang bahkan bila tidak diwajibkan.

Kontras itu perlu, bukan cukup

Kekeliruan paling umum dalam kerja palet yang mudah diakses adalah menganggap rasio kontras yang lolos sebagai akhir pekerjaan. Ada dua pertanyaan mandiri yang perlu dijawab:

1. Apakah setiap warna terbaca di atas latarnya? Itu kontras, dan pemeriksa ini menjawabnya.
2. Apakah warna yang bermakna berbeda dapat dibedakan satu sama lain? Itu pemisahan rona, dan rasio kontras tidak berkata apa pun tentangnya.

Grafik dengan deret merah dan deret hijau bisa lolos kontras dengan nyaman — keduanya gelap di atas latar putih — sekaligus sama sekali tak terbaca bagi seorang deuteranop, karena kedua deret itu tak terbedakan satu sama lain. Lewatkan palet semacam itu juga melalui simulator penglihatan warna.

Dan kapan pun warna membawa makna, tambahkan petunjuk kedua. Kriteria penggunaan warna WCAG menuntutnya, dan teknik G111 menguraikan pendekatan bakunya: memasangkan warna dengan pola, bentuk, posisi, atau label eksplisit. Dalam praktik ini berarti memberi label langsung pada deret grafik alih-alih legenda warna, menaruh ikon di samping pesan galat merah, menggarisbawahi tautan dalam teks, dan membedakan status berhasil dan gagal lewat bentuk.

Bekerja dengan pemeriksa

Masukkan warna latar depan dan latar belakang, dan alat ini melaporkan rasio serta ambang yang terpenuhi. Beberapa kebiasaan membuatnya lebih berguna:

• Uji pasangan yang sebenarnya. Lapisan semitransparan, gradien, dan gambar latar membuat latar efektifnya bukan warna yang ada di lembar gaya Anda. Ambil sampel dari yang benar-benar tampil.
• Uji kedua tema. Luminans tidak terbalik secara rapi; palet gelap butuh pemeriksaan sendiri.
• Pada gradien, uji kasus terburuk, bukan reratanya.
• Sertakan status nonaktif dan placeholder. Keduanya tetap dibaca.
• Periksa penanda fokus terhadap setiap permukaan tempat ia muncul. Cincin fokus yang memenuhi 3:1 di atas putih bisa lenyap di atas kartu.

Untuk gambaran lebih luas, merancang untuk buta warna membahas penyusunan palet, dan membuat grafik yang mudah diakses menggarap visualisasi data secara khusus.