Pemeriksa Kontras Warna WCAG

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) mensyaratkan rasio kontras setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar di Level AA. Level AAA (1.4.6 Contrast Enhanced) menaikkan lantai itu ke 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Rasio dihitung dari luminansi relatif setiap warna dan berkisar dari 1:1 (warna identik) hingga 21:1 (hitam murni di putih murni).

AA adalah target kepatuhan paling umum untuk situs publik, layanan pemerintah, dan produk komersial — menyeimbangkan keterbacaan dengan fleksibilitas desain. AAA adalah level enhanced yang lebih ketat dipakai saat Anda butuh keterbacaan maksimal (misalnya, pengalaman membaca long-form atau audiens dengan low vision signifikan). Memenuhi AAA untuk setiap elemen UI sering tidak praktis, jadi banyak tim menargetkan AA secara global dan AAA untuk body text kritis.

Teks besar didefinisikan sebagai setidaknya 18 point (biasanya ~24px) berat regular, atau setidaknya 14 point (biasanya ~18.66px) bold. Heading dan hero copy sering memenuhi syarat; paragraf body biasanya tidak. Teks besar mendapat ambang kontras lebih rendah karena glif lebih besar tetap terbaca pada kontras lebih lemah — tetapi Anda tetap harus memverifikasi ukuran render aktual di CSS Anda, bukan hanya file desain.

Kontras rendah adalah salah satu kegagalan aksesibilitas paling umum. Pengguna dengan low vision, orang dewasa yang lebih tua, orang di layar redup atau terkena matahari, dan banyak dengan color vision deficiency semuanya mengandalkan perbedaan luminansi yang cukup — bukan hanya hue — untuk membaca teks. Memeriksa kontras lebih awal mencegah mengirimkan antarmuka yang tampak polished di kondisi ideal tetapi menjadi tidak bisa dipakai untuk bagian besar pengunjung nyata.