Pemeriksa Kontras Warna (WCAG)
Periksa rasio kontras warna teks dan warna latar terhadap WCAG 2.2 AA dan AAA untuk teks normal, teks besar, dan elemen UI, lalu dapatkan warna terdekat yang lolos
Memuat alat…
Pilih warna teks dan warna latar untuk mendapatkan rasio kontras WCAG 2.2 beserta hasil AA dan AAA sekaligus. Jika suatu tingkat tidak lolos, halaman ini menyarankan warna lolos terdekat dengan hanya mengubah kecerahan. Berguna untuk memastikan teks di situs web, aplikasi, atau presentasi mudah dibaca.
Cara pakai
- Di "Periksa dua warna", atur "Warna teks" dan "Warna latar" dengan pemilih warna atau dengan mengetik HEX, rgb(), atau hsl().
- Ketik kalimat Anda sendiri di "Kalimat pratinjau" untuk melihatnya sebagai teks normal, besar, dan tebal, serta sebagai garis tepi dan ikon.
- Di bawah "Warna terdekat yang lolos", tekan "Terapkan" di samping "Ubah warna teks" atau "Ubah latar". Tekan sebuah nilai HEX untuk menyalinnya.
- Di "Periksa palet", masukkan 2 sampai 12 warna untuk mendapatkan tabel semua kombinasi dan daftar "Pasangan yang mencapai tingkat".
Cara kerja
- Rasio kontras = (L1 + 0.05) ÷ (L2 + 0.05), dengan L1 dan L2 adalah luminans relatif kedua warna. Nilainya dari 1:1 sampai 21:1 dan dibulatkan ke bawah hingga dua desimal.
- Tingkat mengikuti kriteria WCAG 2.2 1.4.3 (AA: 4.5:1 teks normal, 3:1 teks besar), 1.4.6 (AAA: 7:1 dan 4.5:1), dan 1.4.11 (3:1 untuk elemen UI). Teks besar berukuran 24px, atau tebal 18.66px, atau lebih.
- Saran mempertahankan hue dan kroma dalam OKLCH dan hanya menggeser kecerahan sampai tingkat tercapai. Jika tidak ada kecerahan yang bisa mencapainya, halaman akan menyatakannya.
- Warna terakhir, kalimat, dan daftar palet tersimpan di peramban ini.
Pertanyaan umum
- Apa arti rasio kontras 4.5:1?
- Luminans relatif warna yang lebih terang ditambah 0.05 adalah 4.5 kali luminans relatif warna yang lebih gelap ditambah 0.05. Ini adalah nilai minimum untuk teks ukuran normal pada tingkat AA.
- Apakah teks abu-abu #777777 lolos di atas putih?
- Rasionya 4.47:1, sedikit di bawah 4.5:1, sehingga hanya tingkat teks besar yang lolos. Satu langkah lebih gelap, #767676, memberi 4.54:1 dan lolos AA.
- Apa perbedaan AA dan AAA?
- AA memerlukan 4.5:1 untuk teks normal, AAA memerlukan 7:1. Kebanyakan situs menargetkan AA; AAA cocok untuk teks bacaan yang panjang.
- Apakah garis tepi tombol dan ikon juga perlu kontras?
- Ya. Menurut WCAG 1.4.11, elemen UI dan grafik yang membawa makna perlu minimal 3:1 terhadap sekitarnya; baris "Elemen UI dan grafik" memeriksa hal itu.