Cek Kontras Warna WCAG

Persyaratan kontras WCAG

Web Content Accessibility Guidelines menetapkan rasio kontras minimum agar teks tetap terbaca bagi orang dengan penglihatan lemah, buta warna, atau yang memakai ponsel di bawah terik matahari. Rasio berkisar dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih).

AA, teks normal

Minimal 4.5:1 (kriteria keberhasilan 1.4.3). Level yang diwajibkan sebagian besar undang-undang dan kebijakan aksesibilitas, termasuk European Accessibility Act dan panduan ADA di AS.

AA, teks besar

Minimal 3:1. Besar berarti 24 px (18 pt) ke atas, atau 18.66 px (14 pt) ke atas jika tebal.

AAA, teks normal

Minimal 7:1 (kriteria keberhasilan 1.4.6). Level yang ditingkatkan, layak dikejar untuk bacaan panjang.

AAA, teks besar

Minimal 4.5:1.

Kontras non-teks

Minimal 3:1 (kriteria keberhasilan 1.4.11) untuk ikon, border input, focus ring, garis grafik, dan bagian kontrol yang perlu terlihat agar bisa dipakai.

Cara rasio kontras dihitung

Setiap warna dikonversi ke luminans relatif-nya: kanal sRGB dilinearkan (membatalkan kurva gamma) dan diberi bobot 0.2126 untuk merah, 0.7152 untuk hijau, dan 0.0722 untuk biru, karena mata jauh lebih peka terhadap hijau. Rasionya lalu (L1 + 0.05) / (L2 + 0.05), dengan L1 warna yang lebih terang. Misalnya, #777777 di atas putih menghasilkan 4.48:1, sedikit di bawah AA, sedangkan #767676 mencapai 4.54:1 dan lulus.

Rasio tidak pernah dibulatkan ke atas ke ambang batas: WCAG tegas menyatakan bahwa 4.49:1 tidak memenuhi 4.5:1. Warna tembus pandang lebih dulu dicampur seperti cara browser menggambarnya, foreground di atas latar dan latar tembus pandang di atas putih.

Memperbaiki warna yang gagal

Saran mempertahankan hue dan saturasi warna teks Anda dan hanya mengubah kecerahannya di OKLCH, ruang warna perseptual yang kini didukung CSS, bergerak lebih gelap dan lebih terang hingga rasionya lulus lalu memilih yang lebih dekat ke warna asli. Hasilnya biasanya warna merek yang sama, sedikit lebih pekat atau lebih terang, bukan langsung berubah jadi hitam. Jika tidak ada nuansa hue itu yang bisa mencapai target di latar Anda, alat ini memberitahukannya, dan latarlah yang perlu diubah.

Untuk menjelajahi varian lain sendiri, buka warna di konversi warna dan telusuri tint dan shade-nya, atau ambil warna kandidat dari foto dengan color palette generator.

Kesalahan kontras yang umum

• Teks placeholder dan teks yang tampak nonaktif. Placeholder abu-abu muda tetaplah teks, dan harus memenuhi 4.5:1 jika pengguna membutuhkannya. Kontrol yang benar-benar nonaktif dikecualikan, tetapi yang hanya tampak nonaktif tidak.
• Teks di atas gambar dan gradien. Periksa bagian gambar paling terang di belakang teks, bukan rata-ratanya. Overlay gelap atau panel solid di belakang teks adalah solusi yang andal.
• Warna merek dipakai untuk teks. Oranye atau toska yang mencolok bisa tampak tegas namun gagal di atas putih. Gunakan saran untuk menemukan varian lebih pekat dari hue yang sama untuk teks, dan simpan yang cerah untuk judul besar atau dekorasi.
• Focus ring dan border input. Border abu-abu muda 1 px di sekitar kolom teks sering gagal memenuhi aturan non-teks 3:1, sehingga kolom sulit ditemukan oleh orang dengan penglihatan lemah.
• Mode gelap. Pasangan yang lulus di tema terang tidak menjamin apa pun di tema gelap. Periksa kedua tema, dan pakai tombol tukar untuk melihat cepat pasangan yang dibalik.

APCA dan WCAG 3

Di bawah hasil WCAG 2 Anda juga akan melihat nilai kontras kecerahan APCA, ditulis Lc. APCA adalah metode kontras yang diusulkan untuk WCAG 3 mendatang. Metode ini memperhitungkan ketebalan huruf dan fakta bahwa teks terang di latar gelap membutuhkan kontras yang berbeda dari teks gelap di latar terang, yang diabaikan rumus WCAG 2; itu juga sebabnya tandanya berubah saat Anda menukar warna. Sebagai panduan kasar, Lc 75 cocok untuk teks isi, Lc 60 untuk teks lain yang perlu dibaca, dan Lc 45 untuk judul besar. WCAG 3 masih berupa draf, jadi anggap APCA sebagai informasi tambahan: WCAG 2.x tetap standar yang dirujuk audit dan undang-undang.