Cek Kontras Warna WCAG

Cara menggunakan cek kontras warna

1. Masukkan Warna teks dan Warna latar belakang. Gunakan kotak warna atau ketik nilai CSS apa pun di kolomnya: kode HEX seperti #595959, rgb(89 89 89), hsl(0 0% 35%), atau nama seperti navy.
2. Rasio kontras diperbarui saat Anda mengetik, dari 1:1 (tanpa kontras) sampai 21:1 (hitam di atas putih).
3. Tabel Hasil WCAG 2.2 menampilkan Lolos atau Gagal untuk Teks normal, Teks besar, dan Komponen UI dan grafis, pada level AA dan AAA.
4. Periksa Pratinjau: bagian ini menampilkan teks normal, teks besar, teks besar tebal, garis tepi tombol, dan ikon dengan dua warna Anda.
5. Jika suatu level gagal, pilih Target di bawah Saran. Alat ini mengusulkan Warna teks terdekat yang lolos dan Warna latar belakang terdekat yang lolos. Klik Gunakan untuk menerapkannya. Tukar warna menukar warna teks dan latar belakang.

Semua perhitungan dilakukan di browser Anda; tidak ada yang dikirim ke mana pun.

Cara menghitung rasio kontras

WCAG 2.x mendefinisikan rasio sebagai (L1 + 0,05) / (L2 + 0,05), dengan L1 adalah luminans relatif warna yang lebih terang dan L2 luminans warna yang lebih gelap. Luminans relatif dihitung dari kanal sRGB yang dilinearkan: setiap kanal didekode dengan kurva transfer sRGB, lalu L = 0,2126 R + 0,7152 G + 0,0722 B. Hijau memiliki bobot terbesar karena mata kita paling peka terhadapnya; itulah sebabnya hijau murni tampak jauh lebih terang daripada biru murni dengan “kekuatan” yang sama.

Rasio tidak pernah dibulatkan ke atas. #777777 di atas putih menghasilkan sekitar 4,48:1 dan gagal AA untuk teks normal, meskipun terlihat seperti “4,5”. Alat ini memotong nilai yang ditampilkan menjadi dua desimal, sehingga yang Anda lihat sama dengan yang diperiksa WCAG.

Jika warna teks semi-transparan (misalnya rgb(0 0 0 / 60%)), warna itu lebih dulu dicampur dengan latar belakang, seperti yang akan digambar browser. Transparansi pada warna latar belakang diabaikan, karena apa yang berada di balik halaman tidak diketahui.

Ringkasan level WCAG

“Teks besar” berarti minimal 18 pt (24 piksel CSS), atau 14 pt tebal (sekitar 18,66 px). Logo dan teks yang murni dekoratif tidak memiliki persyaratan. Aturan 3:1 untuk komponen antarmuka (kriteria keberhasilan 1.4.11) berlaku untuk garis tepi kolom input dan tombol, indikator fokus, ikon, dan garis grafik yang perlu dilihat pengguna.

Cara kerja saran warna

Warna yang disarankan mempertahankan rona dan kroma warna Anda di ruang warna OKLCH dan hanya mengubah kecerahannya, lebih gelap atau lebih terang, sampai rasio target tercapai. Alat ini lalu memilih arah yang secara visual paling dekat dengan warna asli Anda, diukur di OKLab. Hasilnya diperiksa kembali setelah dibulatkan menjadi kode HEX, sehingga benar-benar lolos. Jika tidak ada tingkat kecerahan yang bisa mencapai target (misalnya 7:1 terhadap abu-abu sedang), alat ini akan memberi tahu Anda.

Tentang APCA

APCA (Accessible Perceptual Contrast Algorithm) adalah model kontras yang lebih baru dan sedang dipertimbangkan untuk WCAG 3 di masa depan. Model ini memperhitungkan ketebalan huruf, ukuran, dan polaritas (gelap di atas terang dibandingkan terang di atas gelap). APCA masih berupa draf dan belum menjadi persyaratan hukum atau normatif, jadi alat ini melaporkan hasil WCAG 2.x, yang tetap menjadi acuan standar aksesibilitas Eropa EN 301 549, Section 508, dan sebagian besar peraturan.