Cara menggunakan
- Masukkan atau pilih warna teks dan latar.
- Baca rasio kontras dan status AA atau AAA untuk ukuran teks yang tersedia.
- Ubah warna lalu periksa kembali sampai tingkat yang diperlukan tercapai.
Penjelasan opsi
- Rasio kontras
- Rasio dihitung dari luminans relatif warna terang dan gelap sesuai rumus WCAG, dengan nilai maksimum 21:1.
- Teks normal dan besar
- Ambang WCAG berbeda menurut ukuran dan ketebalan teks. Teks besar memiliki ambang yang lebih longgar.
- Elemen nonteks
- Batas untuk ikon, garis, dan komponen antarmuka dapat berbeda dari teks. Periksa konteks visual secara keseluruhan.
Cara rasio dihitung
Setiap warna dikonversi dari sRGB ke cahaya linear, lalu ke luminansi relatif:
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)Hijau paling berpengaruh karena mata paling peka terhadapnya. Beberapa hasil pada latar putih:
| Warna teks | Rasio | Hasil |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5,57 : 1 | AA teks normal, bukan AAA teks normal |
| #767676 | 4,54 : 1 | AA teks normal |
| #777777 | 4,48 : 1 | Gagal AA untuk teks normal, lulus untuk teks besar |
Definisi WCAG ada di Understanding Success Criterion 1.4.3.
Pertanyaan yang sering diajukan
Berapa rasio kontras yang baik?
WCAG AA membutuhkan setidaknya 4,5:1 untuk teks normal dan 3:1 untuk teks besar. AAA menggunakan ambang yang lebih tinggi.
Mengapa warna saya lolos tetapi tetap sulit dibaca?
Ukuran font, ketebalan, jenis huruf, cahaya sekitar, dan kombinasi warna dapat memengaruhi keterbacaan di luar angka rasio.
Apakah pemeriksa ini menjamin aksesibilitas?
Tidak. Kontras adalah satu bagian dari aksesibilitas; fokus keyboard, struktur semantik, ukuran target, dan pembaca layar juga penting.
Privasi
Alat ini berjalan sepenuhnya di browser Anda. File dan teks Anda diproses di perangkat Anda dan tidak pernah diunggah ke server kami.