Kontras warna untuk aksesibilitas, dengan pemeriksanya

Mengapa Anda perlu melakukannya

Teks abu-abu di atas halaman putih bisa tampak elegan di monitor Anda sendiri, tetapi tidak terbaca di ponsel di bawah terik matahari, atau bagi pembaca dengan penglihatan rendah atau defisiensi penglihatan warna. Kontras adalah bagian dari masalah itu yang dapat diukur. Web Content Accessibility Guidelines (WCAG) mengubahnya menjadi angka, yaitu rasio kontras, dengan batas lulus yang dapat Anda periksa sebelum desain dirilis.

Panduan ini menunjukkan cara membaca angka tersebut dengan pemeriksa Alat warna, ambang mana yang berlaku, dan mengapa rasio yang lulus bukan keseluruhan ceritanya, terutama ketika warna sendiri membawa makna.

Caranya, dengan alat yang dimaksud

Alat warna memiliki tiga tab, Palet, Gradien, dan Konversi dan kontras. Pemeriksaan kontras ada di tab ketiga, dan berjalan di perangkat Anda.

1. Buka Konversi dan kontras. Pilih tab di bawah judul.
2. Masukkan dua warna Anda. Atur Warna teks dan Warna latar belakang. Anda dapat mengetik di kolom HEX, RGB, atau HSL, dan dua kolom lainnya mengikuti, sehingga nilai yang disalin dari file desain dalam format apa pun dapat dipakai.
3. Tentukan apakah teksnya besar. Centang Teks besar (18pt ke atas, atau 14pt tebal) jika berlaku.
4. Baca hasilnya. Alat menampilkan Rasio kontras dan dua baris, AA — kontras minimum dan AAA — kontras ditingkatkan, masing-masing ditandai Lulus atau Gagal.
5. Sesuaikan dan bagikan. Ubah salah satu warna dan lihat hasilnya diperbarui. Salin tautan ke hasil ini menyimpan pengaturan dalam URL yang dapat Anda kirim ke rekan kerja.

Jika Anda masih memilih warna, buat palet dasar di tab Palet, dengan harmoni seperti Komplementer atau Analogus, lalu bawa pasangan warna yang akan Anda pakai ke tab kontras. Skema harmoni memilih rona yang tampak seimbang, bukan pasangan yang terbaca jika dipadukan, jadi selalu periksa pasangan warna teks.

Yang perlu diperhatikan

Ambangnya. Untuk teks isi biasa, WCAG tingkat AA meminta rasio minimal 4,5:1. Tingkat AAA meminta 7:1. Teks dianggap besar pada 18pt ke atas, atau 14pt ke atas jika tebal. Teks besar hanya perlu 3:1 untuk AA dan 4,5:1 untuk AAA. Rasio berkisar dari 1:1, warna yang identik, hingga 21:1, hitam di atas putih. Batas 3:1 yang sama juga ditetapkan WCAG untuk bagian antarmuka yang bermakna, seperti garis tepi kolom isian, meskipun pemeriksa hanya membandingkan dua warna yang Anda ketik.

Selisih tipis tetap gagal. Rasio 4,4 gagal pada batas 4,5. Jangan dibulatkan ke atas. Jika warna merek gagal tipis, gelapkan teks atau terangkan latar belakang sedikit, lalu periksa kembali.

Cara angka dihitung. Rasio membandingkan luminans relatif dari dua warna, ukuran seberapa terang masing-masing, dengan setiap warna lebih dulu dikonversi dari nilai sRGB tersimpan ke cahaya linear. Konversi itu memiliki titik batas kecil. Pemeriksa memakai 0,03928, nilai yang tercetak dalam teks WCAG 2.x. Standar sRGB yang lebih baru memberikan 0,04045. Keduanya berbeda begitu tipis sehingga rasio baru berpisah di angka desimal yang jauh, tetapi memakai nilai WCAG menjaga hasil alat ini selaras dengan angka WCAG yang dipublikasikan.

Konversi antarformat dapat menggeser satu kanal sebesar 1. HEX, RGB, dan HSL memakai nilai 8-bit, sehingga konversi bolak-balik dapat menggeser satu kanal sebesar 1. Ini pembulatan, bukan bug, dan tidak akan mengubah hasil kecuali Anda tepat berada di garis batas.

Kontras bukan keseluruhan cerita untuk warna kategorikal. Grafik, peta, dan lencana status sering memakai beberapa rona untuk membedakan kategori, seperti satu warna per batang atau garis. Rasio antara dua rona dengan kecerahan serupa mendekati 1:1, meskipun keduanya tampak sangat berbeda di monitor berwarna. Itu karena rumusnya hanya mengukur kecerahan, bukan rona. Jadi rasio kontras adalah ujian yang keliru untuk menilai apakah kategori dapat dibedakan. Orang dengan defisiensi penglihatan warna mungkin melihat dua rona seperti itu sebagai warna yang sama, dan dalam skala abu-abu atau pada hasil cetak keduanya dapat menyatu sepenuhnya. Tambahkan petunjuk kedua: label langsung, pola garis atau bentuk penanda yang berbeda, dan perbedaan kecerahan yang jelas antarkategori bersebelahan. Pemeriksa dapat membantu bagian kecerahan, dengan menunjukkan rasio rendah antara dua warna kategori yang bersebelahan, tetapi tidak dapat memberi tahu Anda bahwa legendanya aksesibel.

Pemeriksaan hanya mencakup dua warna yang Anda masukkan. Alat ini tidak mengetahui foto di belakang teks, lapisan penutup, atau bagian lain dari desain.

FAQ

Berapa rasio kontras yang saya perlukan untuk teks isi?

Minimal 4,5:1 untuk memenuhi WCAG AA, dan 7:1 untuk AAA. Jika teksnya besar, 18pt ke atas atau 14pt ke atas jika tebal, 3:1 memenuhi AA dan 4,5:1 memenuhi AAA. Centang Teks besar di alat agar pasangan ambang yang tepat diterapkan.

Mengapa pemeriksa menyatakan warna saya gagal padahal tampak baik bagi saya?

Layar, penglihatan, dan pencahayaan ruangan Anda tidak sama dengan milik pembaca. Rasio adalah standar yang dapat diulang dan tidak bergantung pada satu layar pun. Jika sebuah pasangan gagal, anggap angkanya sebagai fakta dan sesuaikan warnanya, alih-alih mengandalkan tampilannya di monitor Anda.

Apakah teks placeholder atau tombol nonaktif tercakup?

Kontrol nonaktif dikecualikan dalam WCAG, tetapi teks placeholder adalah teks sungguhan dan tetap memerlukan kontras yang cukup agar terbaca. Jika ragu, periksa pasangannya, dan pilih label yang terlihat daripada petunjuk yang hanya berupa placeholder.