Pemeriksa kontras WCAG
Uji pasangan warna latar depan dan latar belakang untuk rasio kontras WCAG 2.1 (1 hingga 21). Lihat lulus/gagal untuk Level AA dan AAA, untuk teks normal, teks besar (18pt+ atau 14pt tebal), dan komponen UI.
Cara memeriksa kontras warna
1. Masukkan atau pilih warna latar depan (teks) dan latar belakang.
2. Baca rasio kontras (misalnya 4,52:1).
3. Periksa baris AA dan AAA untuk teks normal dan besar ukuran.
4. Sesuaikan kecerahan HSL hingga level yang diperlukan tercapai, lalu salin nilai hex.
Contoh pemeriksaan kontras
Teks isi #374151 pada #FFFFFF
Rasio ≈ 8,9:1 — melewati AAA untuk teks normal (membutuhkan 7:1). Pembacaan format panjang yang nyaman.
Abu-abu terang #9CA3AF pada warna putih
Rasio ≈ 2,6:1 — gagal dalam AA untuk teks normal (membutuhkan 4,5:1). Kesalahan placeholder yang umum.
Tombol utama berwarna putih di #2563EB
Rasio ≈ 4,6:1 — meneruskan teks normal AA; berubah menjadi biru tua untuk penggunaan AAA atau skala besar saja.
Kapan menggunakan alat ini
• Saat Anda mengaudit token sistem desain sebelum rilis.
• Saat Anda memperbaiki temuan aksesibilitas dari Lighthouse atau kapak.
• Saat Anda memilih warna tautan yang harus berbeda dari teks isi, tidak hanya berdasarkan coraknya.
Penjelasan level WCAG 2.1
Level A adalah minimum; AA adalah target hukum di banyak yurisdiksi (ADA, sektor publik EAA). AAA sangat aspiratif untuk body copy — judul besar mungkin lebih mudah lolos AAA daripada teks 14 piksel. Indikator fokus yang terlihat (2.4.7) melengkapi kontras — pengguna keyboard memerlukan cincin fokus yang terlihat, seringkali 3:1 terhadap warna yang berdekatan. Dokumentasikan lulus/gagal dalam sistem desain Anda di samping setiap pasangan token.
Pertanyaan yang sering diajukan
Berapa rasio kontras untuk teks normal WCAG AA?
Setidaknya 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt+ atau 14pt tebal).
Apa itu AAA?
teks normal 7:1, teks besar 4,5:1 — lebih ketat, sering digunakan untuk situs pemerintah.
Apakah komponen UI memerlukan kontras?
WCAG 2.1 memerlukan 3:1 untuk objek grafis dan batasan komponen UI (1.4.11).
Bagaimana cara menghitung rasio?
Berdasarkan pencahayaan relatif warna sRGB: (L1 + 0,05) / (L2 + 0,05) di mana L1 lebih terang.
Apakah garis bawah memperbaiki tautan kontras rendah?
Tidak — kontras masih diperlukan. Garis bawah membantu isyarat non-warna tetapi tidak menggantikan aturan rasio.