Pemeriksa Kontras
Periksa kontras warna untuk WCAG
Cara menggunakan Pemeriksa Kontras
Periksa kontras warna untuk WCAG Alat online gratis, tanpa pendaftaran, tanpa iklan mengganggu. Gunakan sekarang.
Mengapa kontras warna penting?
Sekitar 8% pria dan 0,5% wanita Indonesia memiliki beberapa bentuk buta warna. Lebih banyak lagi yang membaca teks dalam kondisi sulit — sinar matahari terik, layar berkualitas rendah, kelelahan mata, atau penurunan penglihatan akibat usia. Kontras warna yang cukup memastikan semua pengguna dapat membaca konten terlepas dari kondisi visual mereka.
- Kepatuhan aksesibilitas web: WCAG 2.1 (Web Content Accessibility Guidelines) mendefinisikan rasio kontras minimum. Di Indonesia, aksesibilitas web semakin diperhatikan seiring dengan meningkatnya kesadaran inklusivitas digital, terutama untuk layanan publik dan e-government.
- Verifikasi di tahap desain: Periksa kombinasi warna teks/latar belakang sebelum pengembangan. Jauh lebih hemat memperbaiki di Figma atau Sketch daripada setelah website diluncurkan ke publik.
- Pustaka komponen: Pastikan semua kombinasi warna dalam design system memenuhi persyaratan aksesibilitas di setiap konteks penggunaan yang mungkin.
- Dark mode: Saat mengimplementasikan dark mode, warna yang berfungsi di latar terang sering gagal di latar gelap. Periksa kontras secara independen untuk setiap mode.
- Visualisasi data: Pastikan warna dalam grafik dapat dibedakan oleh pengguna buta warna dan tetap terbaca di berbagai warna latar — penting untuk dashboard bisnis dan laporan keuangan.
Level WCAG: Level A (minimum absolut). Level AA (rasio ≥4,5:1 untuk teks normal, ≥3:1 untuk teks besar) adalah standar hukum di banyak negara dan target yang direkomendasikan untuk website Indonesia. Level AAA (rasio ≥7:1) untuk aksesibilitas maksimal.
Frequently Asked Questions
Berapa rasio kontras yang diperlukan WCAG AA?
WCAG AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal (di bawah 18pt atau di bawah 14pt bold) dan 3:1 untuk teks besar (18pt atau lebih, atau 14pt atau lebih bold). Komponen UI dan elemen grafis (ikon, border formulir) memerlukan 3:1.
Bagaimana cara menghitung rasio kontras?
Rasio kontras = (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminansi relatif warna lebih terang dan L2 adalah warna lebih gelap. Luminansi dihitung dari nilai RGB linear dengan formula tertentu. Rasio maksimum adalah 21:1 (putih di atas hitam). Rasio 1:1 berarti tidak ada kontras (warna identik).
Apakah rasio kontras berlaku untuk teks berwarna di latar berwarna?
Ya. Formula WCAG membandingkan luminansi relatif, bukan hanya kecerahan yang dirasakan. Teks merah di latar hijau bisa memiliki rasio kontras yang rendah meski keduanya terlihat 'terang'. Selalu uji kombinasi warna aktual yang akan digunakan.
Apa perbedaan kontras warna dan buta warna?
Rasio kontras mengukur perbedaan luminansi yang memengaruhi semua pengguna (termasuk dalam cahaya terang atau layar buruk). Buta warna memengaruhi cara seseorang membedakan warna tanpa selalu memengaruhi luminansi. Desain hanya berdasarkan warna merah-hijau dengan kontras tinggi bisa lolos uji luminansi tetapi tidak dapat dibedakan oleh pengguna buta warna merah-hijau.
Apakah ketebalan font memengaruhi persyaratan kontras?
Ya. Teks tebal dan teks besar secara inheren lebih mudah dibaca sehingga persyaratannya lebih rendah. WCAG AA mensyaratkan 3:1 untuk teks 18pt (24px) atau lebih besar, atau teks bold 14pt (sekitar 18,67px) atau lebih besar. Teks lebih kecil atau non-bold memerlukan 4,5:1.
Contrast checker vs simulator buta warna vs audit aksesibilitas
Contrast checker memverifikasi rasio luminansi antara dua warna tertentu. Simulator buta warna (Chrome DevTools, Coblis) menampilkan tampilan desain dalam berbagai kondisi penglihatan. Audit aksesibilitas lengkap (axe, Lighthouse, WAVE) memindai seluruh halaman untuk semua pelanggaran WCAG. Untuk aksesibilitas penuh: periksa kontras di tahap desain, simulasikan buta warna sebelum publikasi, jalankan audit otomatis pada situs produksi.