Cara memeriksa kontras warna untuk aksesibilitas
Sekitar 1 dari 12 pria dan 1 dari 200 wanita memiliki bentuk gangguan penglihatan warna. Jutaan lainnya memiliki penglihatan rendah, penglihatan yang menua, atau melihat layar mereka di bawah sinar matahari. Jika teks Anda tidak memiliki kontras yang cukup dengan latar belakangnya, orang-orang ini tidak dapat membacanya.
Kontras warna bukan «nilai tambah» — itu adalah persyaratan inti aksesibilitas.
Apa yang diwajibkan WCAG
Web Content Accessibility Guidelines (WCAG) mendefinisikan rasio kontras minimum antara teks dan latar belakang:
| Level | Teks normal | Teks besar | Elemen non-teks |
|---|---|---|---|
| AA (minimum) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (ditingkatkan) | 7 : 1 | 4,5 : 1 | — |
«Teks besar» berarti 18 px tebal atau 24 px reguler ke atas.
Rasio kontras berkisar dari 1 : 1 (tanpa kontras — putih pada putih) hingga 21 : 1 (kontras maksimum — hitam pada putih).
Cara memeriksa kontras
- Pilih warna Anda — masukkan warna teks (latar depan) dan warna latar belakang melalui kode HEX, nilai RGB, atau pemilih.
- Lihat hasilnya — alat secara instan menampilkan rasio kontras dan apakah kombinasi Anda lulus WCAG AA dan AAA dalam teks normal dan besar.
- Sesuaikan jika perlu — jika kontras gagal, gelapkan teks atau cerahkan latar belakang (atau sebaliknya) hingga mencapai level yang diperlukan.
Kesalahan kontras umum
Teks abu-abu terang pada putih — #999999 pada #ffffff memiliki rasio hanya 2,8 : 1. Ini gagal WCAG AA. Mungkin tampak «bersih» bagi desainer dengan penglihatan sempurna, tetapi tidak terbaca bagi banyak orang.
Teks berwarna pada latar berwarna — tombol biru dengan teks putih sering lulus, tetapi tombol hijau dengan teks putih tidak. Selalu periksa — Anda tidak dapat menilai rasio kontras dengan mata.
Teks petunjuk — teks petunjuk bidang terkenal lemah dalam kontras. Meskipun WCAG tidak mewajibkannya secara ketat, pengguna tetap harus membacanya.
Mode gelap — desainer sering menggunakan abu-abu sedang pada abu-abu gelap untuk tampilan «halus». Ini sering gagal pemeriksaan kontras.
Tips
- Periksa setiap kombinasi teks/latar — jangan berasumsi apa pun. Bahkan desainer berpengalaman pun terkejut dengan kombinasi yang gagal.
- Uji kedua tema — jika situs Anda memiliki mode terang dan mode gelap, periksa kontras di keduanya. Warna yang berfungsi pada putih bisa gagal pada abu-abu gelap.
- Gunakan warna merek Anda dengan bijak — jika biru merek Anda gagal sebagai warna teks, gunakan untuk elemen yang lebih besar (tombol, header) di mana ambang «teks besar» (3 : 1) berlaku, dan gunakan nuansa lebih gelap untuk teks isi.
- Jangan hanya bergantung pada warna — selain kontras yang cukup, jangan pernah menyampaikan informasi dengan warna saja. Gunakan ikon, label, atau pola sebagai pelengkap.
Pertanyaan yang sering diajukan
Rasio kontras apa yang harus saya targetkan?
Untuk teks normal, targetkan setidaknya 4,5 : 1 (WCAG AA). Untuk teks besar (18 px tebal atau 24 px reguler), 3 : 1 sudah cukup. Untuk level aksesibilitas tertinggi (AAA), targetkan 7 : 1 untuk teks normal.
Apakah ini hanya berlaku untuk teks?
Tidak. WCAG 2.1 juga mewajibkan kontras yang cukup untuk komponen antarmuka dan objek grafis (ikon, batas bidang, indikator fokus). Minimum untuk elemen non-teks adalah 3 : 1.
Bagaimana dengan mode gelap?
Mode gelap memerlukan pemeriksaan kontras yang sama. Teks putih pada latar gelap sering lulus dengan mudah, tetapi teks abu-abu pada latar abu-abu gelap sering gagal. Uji kedua mode.
Apakah kontras warna merupakan persyaratan hukum?
Di banyak yurisdiksi, ya. ADA (AS), EN 301 549 (UE), dan undang-undang serupa mewajibkan aksesibilitas digital. Kepatuhan WCAG adalah standar yang diakui untuk memenuhinya.