Pemeriksa Kontras
Pemeriksa kontras warna WCAG. Pilih warna teks dan background, lihat pratinjau langsung, rasio kontras, dan lulus/gagal AA/AAA untuk teks normal dan besar. Berfungsi offline.
Tentang tools ini
Pemeriksa kontras WCAG 2.1 untuk desainer dan developer. Pilih foreground (teks) dan background — lewat picker swatch atau dengan mengetik nilai hex — dan tool menghitung rasio kontras antara keduanya secara real time. Panel pratinjau langsung menampilkan heading, body, teks besar, teks kecil, link, dan gaya button yang dirender dengan warna pilihan kamu, sehingga kamu bisa menilai hasilnya secara visual, bukan hanya numerik. Grid rating menampilkan lulus/gagal untuk Teks Normal AA (4.5:1), Teks Besar AA (3:1), Teks Normal AAA (7:1), Teks Besar AAA (4.5:1), Komponen UI (3:1), dan Objek Grafis (3:1). Bar saran menawarkan warna abu-abu dengan kontras terbaik pada background kamu, satu tap untuk menerapkan. Tombol swap hex langsung membalik foreground dan background. Berfungsi sepenuhnya offline.
Detail
- Kategori
- design
- Versi
- 1.0.0
- Ukuran
- 26 KB
- Diperbarui
- Jun 2026
Pertanyaan Umum
Apa itu kontras WCAG?
WCAG (Web Content Accessibility Guidelines) mendefinisikan rasio kontras minimum antara teks dan background-nya. Rasio dihitung dari luminance relatif, bukan hanya lightness. AA butuh 4.5:1 untuk teks normal dan 3:1 untuk teks besar; AAA memperketat itu menjadi 7:1 dan 4.5:1.
Bagaimana rasio dihitung?
Tiap warna dikonversi ke luminance relatifnya menggunakan fungsi transfer sRGB, lalu rasionya adalah (L1 + 0.05) / (L2 + 0.05) di mana L1 adalah yang lebih terang. Hasilnya adalah angka dari 1 (tanpa kontras) sampai 21 (hitam murni di putih murni).
Apa yang dianggap "teks besar"?
Per WCAG 2.1, teks besar adalah minimal 18pt regular (24px) atau 14pt bold (≈18.7px). Teks besar mendapat ambang kontras lebih rendah (3:1) karena mata membacanya lebih mudah dari body copy kecil.
Bagaimana dengan kontras non-teks?
Di luar teks, WCAG 2.1 SC 1.4.11 membutuhkan kontras 3:1 untuk komponen UI dan objek grafis (ikon, border field form, chart). Grid rating menampilkan entri 3:1 khusus untuk ini.
Bagaimana saran dipilih?
Bar saran menampilkan 6 shade abu-abu (#000 sampai #FFF), masing-masing diskor pada background kamu. Yang kontrasnya paling tinggi muncul duluan. Tap salah satu untuk menjadikannya foreground.
