Pemeriksa Kontras Warna
Hitung rasio kontras antara dua warna dan periksa apakah lulus tingkat WCAG 2.1 AA dan AAA untuk teks normal dan besar.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Cara Kerja
Web Content Accessibility Guidelines (WCAG) 2.1 mendefinisikan rasio kontras minimum antara teks dan latar belakang sehingga konten tetap dapat dibaca oleh orang dengan gangguan penglihatan. Alat ini menghitung rasio dalam tiga langkah: pertama, setiap warna dikonversi menjadi luminansi relatifnya dengan menerapkan koreksi gamma pada saluran sRGB (nilai di bawah 0,03928 dibagi dengan 12,92, nilai di atas dinaikkan oleh ((c+0,055)/1,055)^2,4) dan menggabungkan hasilnya dengan L = 0,2126*R + 0,7152*G + 0,0722*B. Kemudian luminansi warna paling terang dan paling gelap diambil sebagai L1 dan L2, dan rasio kontras adalah (L1 + 0,05) / (L2 + 0,05) — offset 0,05 memodelkan permukaan reflektif hitam pekat. Akhirnya rasio dibandingkan dengan ambang batas WCAG: AA memerlukan ≥ 4,5:1 untuk teks normal, ≥ 3:1 untuk teks besar (18pt+, atau 14pt+ tebal), AAA memerlukan ≥ 7:1 untuk teks normal, dan ≥ 4,5:1 untuk teks besar. Alat ini menampilkan pratinjau langsung dan lencana lulus/gagal untuk setiap tingkat WCAG sehingga Anda dapat menyesuaikan palet Anda dan melihat hasilnya segera.
Kasus Penggunaan
- Pilih warna merek yang sesuai dengan aksesibilitas saat membangun sistem desain
- Validasi bahwa komponen UI yang ada lulus WCAG AA atau AAA
- Buktikan kepada klien bahwa kombinasi warna tertentu tidak cocok untuk teks
- Ajari desainer dan pengembang tentang aksesibilitas
- Siapkan dokumentasi untuk persyaratan aksesibilitas hukum