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. Penting sebelum mengirimkan tombol, tautan, dan label formulir — banyak palet merek gagal hingga Anda menggelapkan teks atau mencerahkan permukaan.
Warna teks
Warna latar
Aa Bb Cc — 123
Hasil
16.12 : 1
AA — Lulus
AA (teks besar) — Lulus
AAA — Lulus
AAA (teks besar) — Lulus
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.
Kapan memilih sesuatu else
• Saat Anda memerlukan audit halaman penuh — gunakan pemindai otomatis pada DOM yang dirender.
• Saat menguji latar belakang non-solid (gambar, gradien) — contoh piksel terburuk.
• Saat menyimulasikan buta warna — gunakan simulator penglihatan khusus.
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.
Memperbaiki kegagalan tanpa melakukan rebranding
Jika merek ungu gagal pada warna putih, jangan menukar rona — menggelapkan latar depan 5–10% tingkat kecerahan atau gunakan ungu hanya untuk judul besar. Teks placeholder harus memenuhi kontras (4,5:1), bukan hanya nilai masukan. Negara bagian yang dinonaktifkan mungkin dikecualikan dari kontras teks yang ketat tetapi tidak boleh menyampaikan informasi penting hanya berdasarkan warna. Pasangkan pemeriksa ini dengan konverter warna untuk iterasi HSL cepat.
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.
Apakah data dikirim ke server?
Tidak.
Apakah alat ini gratis?
Ya.