Kisah di balik pemeriksa kontras warna
Kontras rendah adalah salah satu masalah aksesibilitas paling umum di web. Aturannya tampak seperti angka ajaib, tetapi masing-masing punya alasan, terkait cara mata kehilangan kepekaan seiring usia dan cara layar menghasilkan cahaya.
Asal angka 4,5 dan 7
WCAG 2.0 menjadi rekomendasi W3C pada Desember 2008. Para penyusun berangkat dari batas minimum 3:1 pada standar ISO 9241-3 lalu menaikkannya untuk mengimbangi hilangnya kepekaan kontras pada ketajaman penglihatan sekitar 20/40, yang umum di usia sekitar 80 tahun. Dari situ lahir 4,5:1 untuk level AA. Level AAA, 7:1, melakukan hal yang sama untuk penglihatan sekitar 20/80.
Luminans relatif
Rumusnya mengubah setiap kanal sRGB kembali menjadi cahaya linear, lalu memberi bobot merah, hijau, dan biru sebesar 0,2126, 0,7152, dan 0,0722, sama seperti standar televisi ITU-R BT.709, karena mata paling peka terhadap hijau. Rasio adalah luminans yang lebih terang ditambah 0,05 dibagi luminans yang lebih gelap ditambah 0,05. Angka 0,05 mewakili cahaya yang dipantulkan layar dan membatasi skala dari 1:1 hingga 21:1, hitam di atas putih.
Lebih dari teks
Teks besar, minimal 24 px atau 18,66 px tebal, tetap terbaca dengan kontras lebih rendah dan hanya perlu 3:1 untuk AA. WCAG 2.1 yang terbit pada Juni 2018 menambahkan kriteria keberhasilan 1.4.11 Kontras Nonteks: batas kolom input, indikator fokus, ikon, dan bagian grafik yang diperlukan untuk memahaminya harus mencapai 3:1 terhadap sekitarnya.
Buta warna dan masa depan
Sekitar 1 dari 12 pria dan 1 dari 200 wanita mengalami gangguan penglihatan warna, kebanyakan pada merah dan hijau. Kontras diukur dari luminans, jadi pasangan yang lolos tetap terbaca, tetapi warna yang hanya berbeda rona bisa tampak sama. Simulasi di sini memakai model Machado, Oliveira, dan Fernandes dari tahun 2009. Draf WCAG 3 mengkaji APCA, metode lebih baru yang juga memperhitungkan ukuran teks dan apakah teks gelap di atas terang atau terang di atas gelap.
Pertanyaan yang sering diajukan
Apakah kontras yang baik cukup untuk aksesibilitas?
Tidak. Itu hanya satu dari banyak persyaratan. WCAG juga meminta agar warna bukan satu-satunya cara menyampaikan makna, misalnya dengan menambahkan ikon atau garis bawah pada tautan atau pesan galat.
Apakah simulasi menunjukkan persis apa yang dilihat seseorang?
Ini perkiraan yang baik untuk dikromasi penuh. Banyak orang memiliki bentuk yang lebih ringan dan setiap orang melihat sedikit berbeda, jadi gunakan sebagai panduan.
Haruskah saya memakai APCA alih-alih rasio WCAG 2?
Untuk kepatuhan saat ini, gunakan rasio WCAG 2. WCAG 2.2 yang terbit pada Oktober 2023 mempertahankan rumus yang sama, dan undang-undang serta standar seperti EN 301 549 merujuk padanya. APCA masih dikembangkan.
Related alat
Pemeriksa kontras warna
Pemeriksa kontras warna WCAG gratis: masukkan warna teks dan latar sebagai HEX, RGB, atau HSL, lihat rasio kontras dengan hasil AA dan AAA, dapatkan warna lolos terdekat, dan simulasikan buta warna.
Generator palet warna
Build, lock, dan shuffle warna palettes di browser Anda. Salin HEX, CSS variables, atau JSON, ekspor PNG atau SVG, dan extract warna dari foto.
Roda warna
pilih warna pada interactive wheel, generate complementary, analogous, triadic, dan lain palettes, dan salin HEX, RGB, HSL, HSV, atau CMYK.
Editor gradien
Build linear dan radial CSS gradients di browser Anda. seret warna stops, atur sudut, dan salin CSS, HEX, RGB, HSL, HSV, atau CMYK.
Lainnya information tentang warna
cara warna works pada screens dan di cetak: RGB, CMYK, HSL, HEX, warna wheel, gradients, contrast, dan PictorX alat.
Siap ke coba itu?
Buka PictorX di browser Anda — tidak instalasi, tidak credit kartu diperlukan ke mulai.
Buka pemeriksa kontras warna