Digital Transformation
Color Contrast Ratio (Rasio Kontras Warna)
TL;DR: Color contrast ratio adalah perbandingan tingkat kecerahan antara warna teks dan warna latar belakangnya, dinyatakan dari 1:1 (tidak ada kontras) sampai 21:1 (hitam di atas putih). Standar WCAG menetapkan minimal 4,5:1 untuk teks ukuran normal dan 3:1 untuk teks besar agar tetap terbaca oleh sebagian besar pengunjung.
Apa itu Color Contrast Ratio?
Color contrast ratio mengukur seberapa jelas teks menonjol dari latar belakangnya. Angkanya dihitung dari nilai luminansi relatif kedua warna, bukan sekadar selisih warna yang terlihat mata. Teks abu-abu muda di atas putih mungkin terlihat "lembut dan elegan", tetapi rasionya bisa jatuh di bawah ambang baca sehingga sebagian pengunjung kesulitan menangkap isinya.
Rasio ini menjadi salah satu kriteria inti aksesibilitas web yang diatur WCAG. Konsepnya berkaitan erat dengan keterbacaan secara umum dan dengan kualitas desain antarmuka yang baik, karena teks yang sulit dibaca akan menaikkan bounce rate tanpa pemilik website menyadari penyebabnya.
Ambang Minimal Menurut WCAG
| Jenis Teks | Level AA | Level AAA |
|---|---|---|
| Teks normal (di bawah 18pt) | 4,5:1 | 7:1 |
| Teks besar (18pt+ atau 14pt tebal) | 3:1 | 4,5:1 |
| Komponen UI & ikon penting | 3:1 | tidak diatur |
Level AA adalah target praktis untuk hampir semua website bisnis. Level AAA umumnya dipakai untuk konten yang wajib sangat inklusif, seperti layanan publik.
Kenapa Penting?
Sekitar satu dari dua belas pria mengalami buta warna dalam berbagai tingkat, dan jutaan pengguna mengakses website di bawah sinar matahari langsung dengan layar redup. Kontras yang cukup membuat konten tetap terbaca pada kondisi ini, sehingga lebih banyak pengunjung benar-benar membaca pesan dan ajakan bertindak Anda. Dalam beberapa proyek redesign yang saya tangani, memperbaiki kontras tombol ajakan bertindak sering menjadi perubahan kecil dengan dampak keterbacaan yang langsung terasa. Anda bisa mengecek rasio gratis lewat WebAIM Contrast Checker.
Pertanyaan Umum
Apakah warna terang selalu kontras rendah?
Tidak selalu. Yang menentukan adalah selisih luminansi antara teks dan latar, bukan terang atau gelapnya satu warna saja. Kuning gelap di atas hitam bisa lolos, sementara abu di atas putih bisa gagal.
Bagaimana cara cepat mengecek kontras?
Gunakan tool seperti WebAIM Contrast Checker atau panel Accessibility di Chrome DevTools. Masukkan kode warna teks dan latar, lalu bandingkan hasilnya dengan ambang 4,5:1.
Istilah Terkait