Apa itu Pemeriksa Kontras WCAG?

Pemeriksa kontras warna WCAG yang menghitung rasio kontras antara warna latar depan dan latar belakang serta melaporkan apakah kombinasi tersebut memenuhi standar aksesibilitas WCAG 2.1 Level AA dan AAA untuk teks normal dan teks besar.

Pemeriksa menghitung rasio luminansi relatif menurut WCAG 2.1 antara dua warna — diketik sebagai hex, rgb(), hsl(), atau nama CSS — lalu menilainya terhadap AA (4,5:1 untuk teks biasa, 3:1 untuk teks besar) dan AAA (7:1 dan 4,5:1). Ia juga menguji batas 3:1 untuk komponen UI seperti border form dan ikon. Saat sebuah kombinasi gagal, panel saran menggeser foreground sedikit demi sedikit ke nilai yang lolos, sambil menawarkan target AA dan AAA.

Cara menggunakan

1. Masukkan atau pilih warna latar depan (teks) dan warna latar belakang — tempel hex, rgb(), hsl(), atau nama warna CSS, atau gunakan color picker.
2. Lihat rasio kontras dan hasil lulus/gagal untuk kepatuhan WCAG AA dan AAA pada teks normal, teks besar, dan komponen UI.
3. Jika kontras gagal, gunakan saran penyesuaian warna untuk menemukan kombinasi warna aksesibel yang paling mendekati.

Kapan menggunakan

• Mengaudit warna brand di atas latar putih atau gelap sebelum landing page diluncurkan.
• Menentukan warna tombol untuk status default, hover, dan disabled yang aksesibel.
• Memeriksa teks placeholder dan input nonaktif yang sering jatuh di bawah 4,5:1.

Hasil

Seorang desainer UI memeriksa biru merek mereka #3B82F6 pada latar putih #FFFFFF — rasio 4.5:1 lulus AA untuk teks besar tetapi gagal AAA untuk teks normal. Mereka menggelapkan ke #2563EB (5.3:1) agar lulus keduanya.

FAQ

Berapa rasio yang dibutuhkan teks biasa untuk lulus WCAG AA?

4,5:1 terhadap latar. Teks besar (mulai 18pt regular atau 14pt bold) turun ke 3:1. AAA menaikkan keduanya ke 7:1 dan 4,5:1. Komponen UI seperti border input cukup 3:1.

Kenapa abu-abu gelap di atas putih gagal padahal terlihat jelas bagi saya?

Selera mata dan hasil pengukuran cepat berpisah. Rasio 4:1 tajam di layar yang dikalibrasi dengan cahaya cukup, tapi runtuh untuk pengguna low vision, pantulan cahaya, atau monitor lama. WCAG menetapkan batas untuk kasus terburuk, bukan terbaik.

Apakah ikon dan border form harus memenuhi kontras yang sama dengan teks?

Tidak. WCAG 2.1 menambahkan aturan 3:1 untuk komponen non-teks: border, ikon, indikator fokus, elemen grafik. Grafik dekoratif murni dikecualikan, tapi apa pun yang menyampaikan informasi wajib mencapai 3:1 terhadap warna di sekitarnya.

Bagaimana memperbaiki kombinasi gagal tanpa menyentuh warna brand?

Bila warna brand tak boleh diubah, ubah latarnya. Buat latar lebih gelap atau lebih terang sampai rasio lolos. Panel saran di sini menggeser foreground sedikit demi sedikit; logika sama bisa Anda terapkan ke latar.

Apakah WCAG mengatur teks transparan atau teks di atas foto?

WCAG meminta evaluasi piksel terburuk tepat di bawah teks. Untuk teks di atas foto biasanya perlu menambah lapisan berwarna atau bidang penuh di belakangnya. Ukurlah warna yang benar-benar dirender, bukan hanya hex awal.

Alat terkait