Pemeriksaan kontras WCAG berjalan melalui beberapa langkah sederhana. Tidak ada yang meninggalkan browser Anda.
- Anda memasukkan warna latar depan dan latar belakang. Alat ini mengurai hex, rgb(), hsl(), atau warna CSS bernama menjadi nilai saluran merah, hijau, dan biru mereka.
- Setiap saluran RGB dilinearisasi menggunakan fungsi transfer sRGB. Ini mengubah nilai tampilan yang dikodekan gamma menjadi intensitas cahaya linier.
- Nilai linier ditimbang berdasarkan sensitivitas mata manusia terhadap setiap saluran — 0.2126 untuk merah, 0.7152 untuk hijau, 0.0722 untuk biru. Jumlahnya adalah luminansi relatif warna.
- Rasio kontras adalah (L1 + 0.05) ÷ (L2 + 0.05), di mana L1 adalah luminansi warna yang lebih terang dan L2 adalah yang lebih gelap. Tambahan 0.05 menjaga rumus tetap valid untuk hitam murni.
- Rasio dibandingkan dengan ambang WCAG: teks normal AA membutuhkan setidaknya 4.5:1, teks besar AA membutuhkan 3:1, teks normal AAA membutuhkan 7:1, dan teks besar AAA membutuhkan 4.5:1. Teks besar berarti setidaknya 18pt atau 14pt tebal.
FAQ
Pertanyaan umum tentang pemeriksaan kontras WCAG.
Apa perbedaan antara AA dan AAA?
AA adalah tingkat kesesuaian minimum untuk sebagian besar konten web. Ini membutuhkan rasio kontras setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar. AAA adalah standar yang lebih tinggi yang membutuhkan 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Anda mungkin menargetkan AAA untuk konten utama seperti teks isi di situs berita, sementara menggunakan AA untuk desain yang lebih luas. Memenuhi AAA di mana-mana bisa sulit dengan warna merek, jadi banyak tim menargetkan AA secara menyeluruh dan meningkatkan teks kunci ke AAA jika memungkinkan.
Apa yang dimaksud dengan "teks besar" menurut WCAG?
WCAG 2.x mendefinisikan teks besar sebagai setidaknya 18 point (24px) untuk berat reguler, atau 14 point (sekitar 19px) untuk berat tebal. Simbol dan ikon yang merupakan bagian dari wajah font mengikuti ambang yang sama. Jika Anda tidak yakin ambang mana yang berlaku untuk UI Anda, periksa keduanya — AA Besar memiliki batas yang lebih rendah (3:1), jadi sebagian besar pasangan warna yang gagal AA Normal sebenarnya lolos AA Besar ketika teksnya cukup besar.
Mengapa pasangan saya lolos AA Besar tetapi gagal AA Normal?
Karena AA Besar hanya membutuhkan rasio 3:1 sementara AA Normal membutuhkan 4.5:1. WCAG menetapkan ambang yang lebih rendah untuk teks besar karena karakter yang lebih besar lebih mudah dibaca bahkan dengan kontras yang lebih sedikit. Pasangan warna yang mendapat skor, katakanlah, 4.0:1 lolos AA Besar (ambang 3:1) tetapi gagal AA Normal (ambang 4.5:1). Ini sangat umum dengan warna merek yang lebih terang digunakan sebagai latar depan pada latar belakang putih.
Bisakah saya mengandalkan alat ini saja untuk audit aksesibilitas?
Alat ini memeriksa satu hal — rasio kontras WCAG 2.x antara dua warna solid. Aksesibilitas nyata melibatkan lebih banyak: indikator fokus, ukuran dan berat font, warna sebagai satu-satunya cara untuk menyampaikan informasi, dan kompatibilitas dengan pembaca layar dan alat zoom. Gunakan pemeriksaan kontras ini bersama metode audit lain untuk gambaran lengkap tentang aksesibilitas aplikasi Anda.
Format warna apa yang diterima oleh input?
Anda dapat menempelkan kode hex 3, 4, 6, atau 8 digit (dengan atau tanpa #), nilai rgb() dan rgba() dalam sintaks koma lama atau sintaks pemisah spasi modern, hsl() dan hsla() dengan satuan rona standar apa pun (deg, rad, grad, turn), hsv(), hwb(), dan salah satu dari 150 warna CSS bernama dari spesifikasi CSS Color Module Level 4. Warna diurai sepenuhnya di perangkat Anda.