Pengecek kontras warna

Masukkan warna teks dan warna latar untuk mendapatkan rasio kontras WCAG serta hasil lulus atau gagal untuk AA dan AAA, untuk teks normal dan teks besar, lengkap dengan pratinjau langsung.

Berjalan di browser Anda; apa pun yang Anda ketik tidak keluar dari perangkat Anda

Warna teks

Pemilih

Warna latar belakang

Pemilih

Rasio kontras –

Penggunaan	Minimal	Hasil
Teks normal, AA	4,5:1
Teks normal, AAA	7:1
Teks besar, AA	3:1
Teks besar, AAA	4,5:1

Memakai rasio kontras WCAG 2.x, yang hanya mengukur kontras luminans. Alat ini tidak bisa menilai pasangan warna untuk buta warna seperti merah di atas hijau, font tipis atau kecil, maupun teks di atas gambar dan gradasi. Membaca HEX (3, 4, 6 atau 8 digit), rgb(), hsl() dan nama warna CSS; sintaks warna CSS lain dibaca oleh browser Anda jika bisa.

Cara memeriksa kontras warna

Ketik atau tempel warna teks dan warna latar sebagai HEX, rgb(), hsl() atau nama warna CSS seperti navy, atau pilih masing-masing dengan pemilih warna.
Baca rasio kontrasnya, dari 1:1 untuk tanpa kontras sampai 21:1 untuk hitam di atas putih.
Periksa tabelnya: teks normal membutuhkan 4,5:1 untuk AA dan 7:1 untuk AAA, dan teks besar membutuhkan 3:1 untuk AA dan 4,5:1 untuk AAA. Pratinjau menunjukkan tampilan teksnya.

Arti rasio kontras

Rasio kontras WCAG membandingkan kecerahan dua warna. Setiap warna diubah menjadi luminans relatif antara 0 (hitam) dan 1 (putih), memakai nilai sRGB dengan kurva gamma dihilangkan dan ketiga kanal diberi bobot sesuai seberapa terang menurut mata: hijau paling besar, lalu merah, lalu biru. Rasionya adalah luminans yang lebih terang ditambah 0,05 dibagi luminans yang lebih gelap ditambah 0,05, sehingga berkisar dari 1:1 untuk warna yang identik sampai 21:1 untuk hitam di atas putih.

WCAG 2 menetapkan batas minimum menurut ukuran teks. Teks normal membutuhkan 4,5:1 untuk level AA dan 7:1 untuk level AAA yang lebih ketat. Teks besar, yang lebih mudah dibaca, membutuhkan 3:1 untuk AA dan 4,5:1 untuk AAA. Besar berarti minimal 24 px, atau sekitar 18,7 px jika tebal.

Rasio hanya melihat kecerahan. Dua warna bisa lulus dan tetap sulit dibedakan oleh orang dengan buta warna, dan font tipis atau teks di atas foto mungkin butuh kontras lebih tinggi dari batas minimum. Pakai angkanya sebagai batas bawah dan lihat juga pratinjaunya.

Untuk developer / agen AI

Perlu memeriksa kontras dalam kode, dalam langkah build atau dari agen AI? Ada API untuk itu: lihat panduan API pengecek kontras warna.

Tips

Perlu mengonversi warna antara HEX, RGB, HSL dan CMYK lebih dulu? Gunakan Konverter warna.
Membuat satu set warna yang serasi? Generator palet warna menampilkan kontras terhadap putih dan hitam untuk setiap swatch.
Butuh warna satu piksel di screenshot? Gunakan Ambil warna dari gambar.

Pertanyaan umum

Bagaimana rasio kontras dihitung?

Dengan rumus WCAG 2.x: luminans relatif setiap warna dihitung dari nilai sRGB-nya, dan rasionya adalah (yang lebih terang + 0,05) dibagi (yang lebih gelap + 0,05). Rentangnya dari 1:1 (tanpa kontras) hingga 21:1 (hitam di atas putih). Rasio ditampilkan dengan dua desimal, dan nilai yang belum dibulatkan ditampilkan di sebelahnya.

Rasio berapa yang dibutuhkan AA dan AAA?

Teks normal membutuhkan 4,5:1 untuk AA dan 7:1 untuk AAA. Teks besar, yaitu minimal 24 px biasa atau sekitar 18,7 px tebal, membutuhkan 3:1 untuk AA dan 4,5:1 untuk AAA. Rasio tidak dibulatkan ke atas melewati batas: 4,499:1 ditampilkan sebagai 4,49 dan gagal AA untuk teks normal.

Mengapa #777777 di atas putih gagal AA?

Kontrasnya 4,48:1, sedikit di bawah 4,5:1 yang diminta AA untuk teks normal, jadi gagal untuk teks isi tetapi lulus untuk teks besar, yang hanya membutuhkan 3:1. Abu-abu yang sedikit lebih gelap seperti #767676 mencapai 4,54:1 dan lulus.

Bagaimana dengan warna transparan?

Warna teks yang sebagian transparan lebih dulu dicampur dengan latar, seperti yang ditampilkan layar, lalu warna hasil campuran itu diukur. Latar yang sebagian transparan dianggap berada di atas putih. Kanal dibulatkan ke bilangan bulat setelah pencampuran.

Apakah rasio yang lulus berarti teksnya aksesibel?

Tidak dengan sendirinya. Rasio hanya mengukur kontras kecerahan. Rasio tidak mengatakan apa-apa tentang pasangan warna untuk buta warna, font yang sangat tipis, teks di atas foto atau gradasi, atau apakah warna menjadi satu-satunya cara menyampaikan makna. Anggap sebagai batas minimum, bukan jaminan.

Apakah ada yang dikirim ke server?

Tidak. Warna dibaca dan diukur di browser Anda, dan apa pun yang Anda ketik tidak keluar dari perangkat Anda.