Anda mungkin berasumsi bahwa semua orang memiliki warna atau keterbacaan teks yang sama seperti Anda. Cara kita memandang warna dapat bergantung pada lingkungan kita (cahaya rendah atau terang) dan kemampuan penglihatan kita. Anda dan pengguna Anda mungkin termasuk di antara jutaan orang dengan buta warna atau gangguan penglihatan.
Untuk mendukung pengguna dengan berbagai disabilitas visual, grup WAI membuat formula kontras warna untuk memastikan kontras yang ada antara teks dan latar belakangnya cukup. Jika rasio kontras warna ini diikuti, pengguna dengan gangguan penglihatan yang cukup dapat membaca teks di latar belakang tanpa teknologi pendukung peningkatan kontras.
Perhatikan perbedaan rasio kontras yang ditunjukkan pada Gambar 1.
Rasio kontras 4,5:1 adalah nilai minimum yang diwajibkan yang ditetapkan dalam Web Content Accessibility Guidelines (WCAG) 2.0. Rasio ini dipilih karena mengompensasi hilangnya sensitivitas kontras yang sering dialami pengguna yang kehilangan penglihatan, yang setara dengan penglihatan sekitar 20/40.
Sekali lagi, 4,5:1 hanyalah minimum. Untuk mendukung pengguna penyandang gangguan penglihatan atau buta warna lainnya, kenali level AAA dan buat konten dengan kontras 7:1.
Anda dapat memeriksa kontras warna dengan Audit Aksesibilitas Lighthouse di DevTools.
Algoritma Kontras Perseptual Lanjutan
Advanced Perceptual Contrast Algorithm (APCA) adalah cara untuk menghitung kontras berdasarkan riset modern tentang persepsi warna.
APCA lebih bergantung pada konteks daripada tingkat AA dan AAA WCAG.
Dalam model ini, kontras dihitung berdasarkan fitur berikut:
- Properti spasial (ketebalan font dan ukuran teks)
- Warna teks (perbedaan kecerahan yang dirasakan antara teks dan latar belakang)
- Konteks (cahaya sekitar, lingkungan, dan tujuan teks yang dimaksudkan)
Chrome menyertakan fitur eksperimental untuk menggantikan panduan rasio kontras AA/AAA dengan APCA.
Menyampaikan informasi penting dengan lebih dari sekadar warna
Setiap kali Anda menyampaikan informasi penting kepada pengguna, andalkan teks atau teks alternatif selain isyarat visual saat membagikan informasi penting. Isyarat visual mencakup warna, pola, gambar, gaya font, dan bahasa terarah.
Misalnya, Anda mungkin memiliki formulir kontak yang menunjukkan input yang tidak valid dengan menggarisbawahinya dengan warna merah. Indikasi warna ini tidak memberi tahu pembaca layar atau pengguna dengan gangguan penglihatan warna bahwa ada sesuatu yang tidak berfungsi. Pengguna mungkin akan bertanya-tanya mengapa pengiriman formulir tidak berhasil dan menyerah.
Pastikan untuk memberi tahu pengguna melalui beberapa cara tentang error tertentu. Misalnya, Anda dapat menambahkan pesan error untuk mengumumkan bahwa input tertentu tidak valid beserta alasannya. Anda juga dapat menambahkan teks bantuan tentang tampilan {i>input<i} yang tepat.
Anda masih dapat menggarisbawahi input yang tidak valid dengan warna merah, selama ada isyarat non-visual tambahan.
Jika Anda sangat mengandalkan penggunaan warna di antarmuka, Anda dapat menemukan masalah kontras di Chrome DevTools.
Meningkatkan kontras dan menginversi warna
Bagi pengguna yang memiliki gangguan penglihatan, mode kontras tinggi dapat memudahkan navigasi konten di halaman. Ada beberapa cara untuk menyiapkan kontras tinggi.
macOS dan Windows menawarkan cara untuk meningkatkan tingkat kontras di seluruh sistem operasi.
Pengguna juga dapat memilih untuk melakukan inversi warna latar depan dan latar belakang (misalnya di macOS), yang sangat berguna untuk situs dan aplikasi yang tidak mendukung mode gelap.
Sebagai developer, Anda dapat melakukan pengujian untuk memastikan antarmuka masih terlihat dan dapat digunakan dengan mengaktifkan setelan ini dan memverifikasi kegunaan secara manual.
Misalnya, menu navigasi mungkin menggunakan warna latar belakang yang halus untuk menunjukkan halaman yang dipilih. Jika Anda melihatnya dalam mode kontras tinggi, elemen tersebut akan sepenuhnya hilang dan pembaca dapat memahami halaman mana yang aktif.
Jika memenuhi tingkat AA atau kontras yang lebih tinggi, konten Anda akan tetap berfungsi seperti yang diharapkan saat warna diinversi atau dalam kontras tinggi. Namun, ada baiknya diuji untuk memastikan pengalaman seperti yang diharapkan.