Rasio kontras dan keterbacaan teks

Abu-abu #767676 di atas putih memiliki rasio kontras 4.54:1 dan memenuhi batas minimum WCAG untuk teks isi. Satu tingkat lebih terang, #777777, menghasilkan 4.48:1 dan tidak lolos.

Luminans relatif

Untuk menentukan keterbacaan teks, Web Content Accessibility Guidelines tidak menggunakan rona atau kecerahan HSL. Yang digunakan adalah luminans relatif, angka dari 0 untuk hitam sampai 1 untuk putih yang menggambarkan banyaknya cahaya dari suatu warna yang mencapai mata. WCAG 2.2 mendefinisikannya dalam dua langkah. Pertama, ubah setiap kanal menjadi angka dari 0 sampai 1 dengan membaginya dengan 255, lalu balikkan kurva sRGB: jika nilainya paling besar 0.04045, bagi dengan 12.92; jika lebih besar, hitung ((nilai + 0.055) / 1.055) pangkat 2.4. Kedua, beri bobot pada ketiga hasil dan jumlahkan: L = 0.2126 R + 0.7152 G + 0.0722 B.

Bobot itu menjelaskan banyak hal. Hijau menyumbang lebih dari 70% total, sedangkan biru hanya sekitar 7%. Itulah sebabnya biru murni #0000ff memiliki luminans hanya 0.0722, sedangkan kuning murni, gabungan merah dan hijau, memiliki 0.9278. Dalam spesifikasi juga tercatat sedikit riwayatnya: sebelum Mei 2021, ambangnya ditulis 0.03928, disalin dari dokumen yang lebih lama. Nilai itu diperbaiki menjadi 0.04045, dan WCAG menyatakan bahwa perubahan ini tidak berdampak praktis pada hasil.

Rasio kontras

Rasio kontras membandingkan dua luminans: (L1 + 0.05) / (L2 + 0.05), dengan L1 sebagai warna yang lebih terang dan L2 yang lebih gelap. Angka 0.05 mewakili sedikit cahaya lain yang selalu mencapai mata, sekaligus menjaga agar rasio untuk hitam tetap terhingga. Rasionya berkisar dari 1:1, warna dibandingkan dengan dirinya sendiri, sampai 21:1, hitam dibandingkan dengan putih: (1 + 0.05) / (0 + 0.05) = 21. Untuk #767676 di atas putih, luminansnya 0.1812, sehingga rasionya 1.05 / 0.2312 = 4.54.

Berikut perhitungan lengkap untuk biru #2273c3 yang digunakan pada unit 2, yaitu rgb(34 115 195). Setelah dibagi 255, nilai kanalnya menjadi 0.1333, 0.4510, dan 0.7647. Ketiganya di atas 0.04045, sehingga masing-masing dihitung dengan rumus pangkat, menghasilkan 0.0160, 0.1714, dan 0.5457. Setelah diberi bobot, hasilnya 0.0034 dari merah, 0.1226 dari hijau, dan 0.0394 dari biru. Jumlahnya adalah luminans 0.1654. Terhadap putih, rasionya 1.05 / 0.2154 = 4.87, sehingga biru ini lolos AA untuk teks isi di halaman putih. Terhadap hitam, rasionya 0.2154 / 0.05 = 4.31, sedikit di bawah batas.

Nilai ambang

Dalam WCAG 2.2, rasio digunakan untuk menentukan lolos atau gagal. Kriteria keberhasilan 1.4.3 pada tingkat AA mensyaratkan minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Teks besar berarti setidaknya 18 point, atau 14 point tebal; menurut WCAG, ukurannya kira-kira 1.5 em dan 1.2 em tebal untuk fon teks isi yang umum. Kriteria 1.4.6 pada tingkat AAA menaikkan batas menjadi 7:1 dan 4.5:1. Kriteria 1.4.11 mensyaratkan 3:1 untuk bagian tombol, kolom formulir, dan ikon yang perlu terlihat oleh pengguna. Merah murni #ff0000 di atas putih menghasilkan 4.00:1, cukup untuk judul besar tetapi tidak lolos untuk teks isi. Biru #0000ff di atas putih menghasilkan 8.59:1 dan memenuhi semuanya.

Ada satu fakta berguna lain yang dapat diperoleh dari rumus. Warna dengan luminans sekitar 0.179 memiliki kontras yang sama terhadap putih dan hitam, sekitar 4.58:1. Jika lebih gelap, teks putih lebih mudah dibaca di atasnya; jika lebih terang, teks hitam lebih mudah dibaca. Pada panel di bawah model, kamu bisa melihat kedua rasio dan pilihan yang lebih baik.