Pemeriksaan kontras WCAG melalui beberapa langkah mudah. Tiada apa-apa yang meninggalkan penyemak imbas anda.
- Anda memasukkan warna latar depan dan latar belakang. Alat ini menghuraikan hex, rgb(), hsl(), atau warna CSS bernama kepada nilai saluran merah, hijau, dan biru mereka.
- Setiap saluran RGB dilinearkan menggunakan fungsi pemindahan sRGB. Ini menukar nilai paparan yang dikodkan gamma kepada keamatan cahaya linear.
- Nilai linear ditimbang mengikut kepekaan mata manusia terhadap setiap saluran — 0.2126 untuk merah, 0.7152 untuk hijau, 0.0722 untuk biru. Hasil tambahnya adalah kecerahan relatif warna.
- Nisbah kontras ialah (L1 + 0.05) ÷ (L2 + 0.05), di mana L1 ialah kecerahan warna yang lebih cerah dan L2 ialah yang lebih gelap. Tambahan 0.05 memastikan formula sah untuk hitam tulen.
- Nisbah dibandingkan dengan ambang WCAG: teks biasa AA memerlukan sekurang-kurangnya 4.5:1, teks besar AA memerlukan 3:1, teks biasa AAA memerlukan 7:1, dan teks besar AAA memerlukan 4.5:1. Teks besar bermaksud sekurang-kurangnya 18pt atau 14pt tebal.
FAQ
Soalan lazim tentang pemeriksaan kontras WCAG.
Apakah perbezaan antara AA dan AAA?
AA ialah tahap pematuhan minimum untuk kebanyakan kandungan web. Ia memerlukan nisbah kontras sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. AAA ialah standard yang lebih tinggi yang memerlukan 7:1 untuk teks biasa dan 4.5:1 untuk teks besar. Anda mungkin menyasarkan AAA untuk kandungan utama seperti salinan badan di laman berita, sambil menggunakan AA untuk reka bentuk yang lebih luas. Memenuhi AAA di mana-mana boleh menjadi sukar dengan warna jenama, jadi banyak pasukan menyasarkan AA secara menyeluruh dan menaikkan teks utama ke AAA di mana yang boleh.
Apakah yang dikira sebagai "teks besar" di bawah WCAG?
WCAG 2.x mentakrifkan teks besar sebagai sekurang-kurangnya 18 point (24px) untuk berat biasa, atau 14 point (kira-kira 19px) untuk berat tebal. Simbol dan ikon yang merupakan sebahagian daripada muka fon mengikuti ambang yang sama. Jika anda tidak pasti ambang mana yang terpakai pada UI anda, periksa kedua-duanya — AA Besar mempunyai palang yang lebih rendah (3:1), jadi kebanyakan pasangan warna yang gagal AA Biasa sebenarnya lulus AA Besar apabila teks cukup besar.
Mengapa pasangan saya lulus AA Besar tetapi gagal AA Biasa?
Kerana AA Besar hanya memerlukan nisbah 3:1 manakala AA Biasa memerlukan 4.5:1. WCAG menetapkan ambang yang lebih rendah untuk teks besar kerana aksara yang lebih besar lebih mudah dibaca walaupun dengan kontras yang kurang. Pasangan warna yang mendapat skor, katakan, 4.0:1 lulus AA Besar (ambang 3:1) tetapi gagal AA Biasa (ambang 4.5:1). Ini sangat biasa dengan warna jenama yang lebih cerah digunakan sebagai latar depan pada latar belakang putih.
Bolehkah saya bergantung pada alat ini sahaja untuk pengauditan kebolehcapaian?
Alat ini memeriksa satu perkara — nisbah kontras WCAG 2.x antara dua warna pejal. Kebolehcapaian sebenar melibatkan lebih banyak: penunjuk fokus, saiz dan berat fon, warna sebagai satu-satunya cara untuk menyampaikan maklumat, dan keserasian dengan pembaca skrin dan alat zum. Gunakan pemeriksaan kontras ini bersama kaedah audit lain untuk gambaran lengkap kebolehcapaian aplikasi anda.
Apakah format warna yang diterima oleh input?
Anda boleh menampal kod hex 3, 4, 6, atau 8 digit (dengan atau tanpa #), nilai rgb() dan rgba() dalam sintaks koma lama atau sintaks dipisah ruang moden, hsl() dan hsla() dengan mana-mana unit hue standard (deg, rad, grad, turn), hsv(), hwb(), dan mana-mana 150 warna CSS bernama dari spesifikasi CSS Color Module Level 4. Warna dihuraikan sepenuhnya pada peranti anda.