Pemeriksa Kontras WCAG untuk Kepatuhan Teks AA dan AAA
Pemeriksa kontras WCAG ini menghitung rasio kontras antara warna latar depan dan warna latar belakang, lalu memeriksanya terhadap persyaratan AA atau AAA untuk teks normal atau besar. Pratinjau langsung menampilkan teks di atas latar belakangnya untuk membantu Anda menilai keterbacaan. Ambang batasnya adalah 4.5:1 dan 3:1 untuk AA, serta 7:1 dan 4.5:1 untuk AAA.
Pemeriksa kontras WCAG ini menghitung rasio kontras antara warna latar depan dan warna latar belakang. Alat ini menilai hasilnya terhadap ambang WCAG AA dan AAA untuk teks normal dan besar, serta menyediakan pratinjau langsung sehingga Anda dapat melihat teks di atas latar belakangnya. Gunakan untuk memeriksa kontras warna dan mendapatkan hasil yang jelas saat menilai keterbacaan.
Pilih apakah akan menilai warna terhadap kriteria AA atau AAA, dan apakah teksnya normal atau besar. Untuk AA, rasio kontras yang diperlukan adalah 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Untuk AAA, ambang batasnya adalah 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Pemeriksa melaporkan bagaimana rasio tersebut dibandingkan dengan persyaratan yang dipilih.
Warna latar depan dan latar belakang memiliki peran yang berbeda dalam pratinjau: latar depan adalah warna teks, dan latar belakang adalah warna di belakangnya. Memeriksa pasangan tersebut membantu Anda menilai kontrasnya bersama-sama, bukan menilai masing-masing warna secara terpisah. Pratinjau langsung menawarkan pemeriksaan visual cepat di samping rasio dan nilainya.
Pemeriksa berjalan sepenuhnya di browser Anda, dan input Anda diproses di perangkat Anda sendiri; tidak ada data yang dikirim ke server. Alat ini berfungsi offline setelah halaman dimuat, dan gratis digunakan. Developer, desainer, dan engineer DevOps dapat menggunakannya untuk memeriksa kombinasi warna terhadap kriteria WCAG dan menemukan masalah kontras sebelum membagikan atau merilis antarmuka.
Langkah 1: Masukkan warna latar depan dan latar belakang yang ingin diperiksa. Ini adalah dua warna yang dibandingkan oleh pemeriksa.
Langkah 2: Pilih kriteria yang akan dinilai. Pemeriksa menilai kontras terhadap ambang AA atau AAA untuk teks normal atau besar.
Langkah 3: Tinjau rasio kontras dan nilainya. Hasil menunjukkan apakah warna yang dipilih memenuhi kriteria yang dipilih.
Langkah 4: Periksa pratinjau langsung. Melihat teks di atas latar belakangnya membantu Anda menilai keterbacaan secara sekilas.
Kasus penggunaan: Periksa apakah kombinasi warna latar depan dan latar belakang memenuhi ambang kontras WCAG yang diperlukan sebelum menggunakannya dalam antarmuka.
Kasus penggunaan: Tangkap kombinasi warna yang gagal sebelum sampai ke peninjau atau pengguna, sehingga Anda dapat menilainya lebih awal.
Kasus penggunaan: Dapatkan hasil lulus atau gagal beserta alasannya, bukan hanya mengandalkan rasio kontras.
Kasus penggunaan: Gunakan pratinjau langsung untuk menilai tampilan teks di atas latar belakangnya saat memeriksa kontrasnya.
Kasus penggunaan: Periksa teks normal dan besar terhadap kriteria AA atau AAA saat Anda perlu menilai persyaratan teks yang berbeda.
Kasus penggunaan: Verifikasi kombinasi warna yang diusulkan terhadap ambang batas yang perlu dipatuhi proyek Anda.