Cara menggunakan
- Masukkan warna teks dan warna latar, sebagai kode HEX atau lewat color picker.
- Baca rasio dan tabel lolos / tidak lolos. Pratinjau menampilkan kedua ukuran teks.
- Pakai Tukar warna untuk mengecek kombinasi sebaliknya, misalnya teks terang di atas latar gelap.
Rumusnya
WCAG 2 mendefinisikan luminans relatif sebagai L = 0,2126 R + 0,7152 G + 0,0722 B, dengan setiap kanal diubah dulu dari sRGB ke cahaya linear. Rasio kontras adalah (L1 + 0,05) / (L2 + 0,05), dengan L1 sebagai warna yang lebih terang. Hitam di atas putih menghasilkan 21:1, dan dua warna yang sama menghasilkan 1:1.
| Level | Teks normal | Teks besar |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Elemen antarmuka dan grafik yang bermakna butuh 3:1 untuk AA.
Contoh
Abu-abu #777777 di atas putih: luminans abu-abunya sekitar 0,184, jadi rasionya 1,05 / 0,234 = 4,48. Lolos untuk teks besar, tetapi tidak lolos AA untuk teks normal. Dengan #767676 rasionya naik menjadi 4,54:1 dan sudah lolos AA.
Tips
- Kontras bukan satu-satunya syarat aksesibilitas: jangan menyampaikan informasi hanya lewat warna.
- Teks di atas foto atau gradien harus dicek di titik yang paling tidak menguntungkan.
- Kontras WCAG 2 adalah ukuran sederhana yang punya kelemahan pada mode gelap dan font tipis; anggap sebagai batas minimum.