Kontras warna

Abu-abu muda #999999 di atas putih punya rasio kontras 2.85:1, jauh di bawah 4.5:1 yang diminta WCAG 2.2 untuk teks isi.

Mengapa kontras penting

Teks yang pucat terhadap latarnya sulit dibaca oleh orang dengan penglihatan lemah, oleh banyak pembaca lanjut usia, dan oleh siapa pun yang memakai ponsel di bawah sinar matahari. WCAG 2.2 tidak menyerahkan "pucat" pada selera. WCAG mengukur luminans relatif kedua warna, bilangan dari 0 untuk hitam sampai 1 untuk putih, lalu membandingkannya dengan rasio kontras (L1 + 0.05) / (L2 + 0.05), dengan L1 adalah warna yang lebih terang. Hasilnya berkisar dari 1:1, sebuah warna di atas dirinya sendiri, sampai 21:1, hitam di atas putih. Kursus teori warna membahas rumus itu langkah demi langkah; di sini kita memakainya.

Angka yang harus dipenuhi

Kriteria keberhasilan 1.4.3 Kontras (Minimum), pada level AA, meminta sedikitnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar, yang didefinisikan WCAG sebagai sedikitnya 18 poin, atau 14 poin tebal. Kriteria 1.4.6 pada level AAA menaikkannya menjadi 7:1 dan 4.5:1. Kriteria 1.4.11 Kontras Nonteks meminta 3:1 untuk bagian kontrol dan grafik yang perlu dilihat orang, seperti bingkai kolom teks atau garis-garis grafik. Logo dan teks yang murni hiasan atau bagian dari kontrol yang tidak aktif dikecualikan.

Beberapa nilai patut diingat. Abu-abu #767676 memberi 4.54:1 di atas putih, dan sering disebut sebagai abu-abu polos paling terang yang lolos AA; #777777 memberi 4.48:1 dan gagal. #595959 yang lebih gelap mencapai 7.00:1 dan lolos AAA. Warna yang jenuh bisa menyesatkan: merah murni #ff0000 di atas putih hanya 4.00:1, sedangkan merah yang lebih tua #c01c28 mencapai 6.11:1. Teks placeholder di dalam kolom formulir sering gagal, karena desainer kerap sengaja membuatnya sangat terang.

Memeriksa warna dalam praktik

Kamu jarang perlu menghitung rumusnya dengan tangan. Saat kamu memeriksa elemen teks, pemilih warna di alat pengembang browser-browser utama menunjukkan rasio kontrasnya terhadap latar, sering dengan garis yang menandai ambang AA dan AAA. Ada dua kasus yang perlu perhatian lebih. Teks di atas foto atau gradien tidak punya satu latar, jadi periksa terhadap bagian paling terang yang ditimpanya, atau taruh panel padat di belakangnya. Situs dengan tema gelap juga perlu diperiksa dua kali, karena warna yang lolos di atas putih bisa gagal di atas hampir hitam: biru #1a5fb4 memberi 6.29:1 di atas putih tetapi hanya 3.34:1 di atas hitam murni.

Jangan hanya mengandalkan warna

Kontras antara teks dan latar baru separuh cerita. Kriteria 1.4.1 Penggunaan Warna, pada level A, menyatakan bahwa warna tidak boleh menjadi satu-satunya cara menyampaikan informasi. Merah #c01c28 dan biru #1a5fb4 sama-sama terbaca baik di atas putih, tetapi satu terhadap yang lain rasionya hanya 1.03:1. Dalam skala abu-abu, atau bagi orang yang tidak bisa membedakan merah dari biru, keduanya menjadi abu-abu yang sama. Jadi kolom wajib yang hanya ditandai label merah, atau tautan yang berbeda dari teks di sekitarnya hanya karena warnanya, butuh petunjuk kedua: kata, ikon, atau garis bawah.