Login / Daftar

Cek Kontras Warna (WCAG)

Kontras adalah perbandingan terang, bukan perbedaan warna. Itu sebabnya dua warna yang terlihat sangat berbeda bisa gagal dibaca, dan tidak ada orang yang bisa menebak angkanya dengan melihat.

Bagikan
Contoh

Teks besar 24 piksel

Teks tebal 18,7 piksel

Teks berukuran biasa, 16 piksel. Ini ukuran paragraf yang paling sering dipakai, dan ambang yang berlaku untuknya adalah 4,5.

Keterangan kecil 13 piksel, ambangnya tetap 4,5.

Tombol
Lolos AA

8,13 : 1

Lolos seluruh ambang, termasuk AAA untuk teks biasa. Pasangan ini aman dipakai untuk apa pun, termasuk teks kecil.

Ambang WCAG

  • Komponen dan grafik 3,0 Kriteria 1.4.11, level AA
  • Teks besar 3,0 Kriteria 1.4.3, level AA
  • Teks biasa 4,5 Kriteria 1.4.3, level AA
  • Teks besar, ditingkatkan 4,5 Kriteria 1.4.6, level AAA
  • Teks biasa, ditingkatkan 7,0 Kriteria 1.4.6, level AAA

Teks besar menurut WCAG adalah minimal 18pt, atau 14pt kalau tebal. Dalam CSS kira-kira 24px dan 18,66px tebal.

Kalau dilihat mata yang buta warna

RagamRasioSelisih
Protanopia 7,02 -1,11
Deuteranopia 8,26 +0,13
Tritanopia pendekatan 6,91 -1,22

Angka ini di luar WCAG. Ia perkiraan, bukan klaim kepatuhan. Simulator buta warna memperlihatkan gambar utuhnya.

Pertanyaan yang sering muncul

Kenapa dua warna yang jelas berbeda bisa gugur?

Karena yang diukur bukan perbedaan warna, melainkan perbandingan luminansi, yaitu seberapa banyak cahaya yang dipantulkan masing-masing.

Contoh paling jelas ada di tombol contoh di atas: biru #1D4ED8 di atas merah #DC2626 terlihat sangat kontras, padahal rasionya di bawah 1,4. Keduanya sama-sama gelap. Sebaliknya kuning dan putih terlihat dekat, dan memang gugur, karena sama-sama terang.

Aturan praktisnya: kalau Anda mengubah kedua warna jadi hitam putih dan hasilnya nyaris sama abunya, kontrasnya rendah, seberapa pun berbedanya warna aslinya.

Kenapa ada kolom untuk buta warna, padahal WCAG tidak memintanya?

Kriteria 1.4.3 memang sudah dirancang supaya lulusnya tidak bergantung pada penglihatan warna, sebab ia mengukur luminansi. Tapi tidak bergantung bukan berarti tidak berubah. Sel kerucut merah ikut menyumbang luminansi, jadi pada protanopia warna merah kehilangan sebagian terangnya dan rasionya bergeser turun.

Kami memindai seluruh kisi warna untuk mengetahui apakah ini benar-benar terjadi atau cuma kekhawatiran teoretis. Dari 8.062 pasangan yang lolos 4,5 di mata biasa, 2.078 di antaranya, atau 25,8 persen, jatuh di bawah 4,5 pada setidaknya satu ragam buta warna.

Contoh paling tajam: hitam di atas merah murni #FF0000 lolos di 5,25, tapi untuk protanopia turun ke 3,29. Merah adalah warna yang paling sering dipakai untuk peringatan, dan justru warna itu yang paling rapuh.

Karena WCAG tidak mengatur hitungan ini, angkanya kami sebut perkiraan dan tidak boleh dipakai sebagai klaim kepatuhan. Gunanya satu: memberi tahu Anda kalau ada yang perlu diperiksa lebih jauh.

Kalau lolos 4,5, apakah situs saya sudah patuh?

Belum. Alat ini menjawab satu pertanyaan dari puluhan yang membentuk kepatuhan.

  • Kriteria 1.4.3 sendiri punya pengecualian: teks insidental, logotype, dan kontrol yang sedang nonaktif tidak wajib memenuhi ambang.
  • Kontras hanyalah satu kriteria. Masih ada teks alternatif gambar, urutan fokus keyboard, label formulir, dan banyak lagi.
  • Teks di atas gambar atau gradasi tidak punya satu warna latar, jadi tidak bisa dinilai dengan alat ini. Ambil warna paling kritis di balik teksnya, atau pasang lapisan warna padat.

Yang bisa dikatakan dengan jujur: pasangan warna ini memenuhi ambang tersebut. Itu saja, dan itu memang berguna.

Kenapa saran warnanya hanya mengubah gelap terangnya?

Karena warna yang Anda bawa biasanya tidak bebas diubah. Itu warna brand, dan saran yang mengubah biru jadi ungu akan langsung dibuang meski rasionya bagus.

Jadi rona dan kejenuhan dikunci, dan hanya terangnya yang digeser sampai ambangnya terpenuhi, lalu dicari titik dengan pergeseran paling kecil. Dua arah dicoba, digelapkan dan diterangkan, dan yang menang adalah yang paling sedikit mengubah warna Anda.

Kalau suatu arah tertulis tidak ada, artinya arah itu memang buntu. Menerangkan warna sampai putih pun kadang tidak cukup untuk mencapai 7 di atas latar yang terang.

Dasar & peninjauan

Rumus
WCAG 2.2, definisi relative luminance dan contrast ratio. Sumber primer, teks normatif W3C
Ambang
1.4.3 Kontras Minimum level AA, 1.4.6 Kontras Ditingkatkan level AAA, 1.4.11 Kontras Non-Teks level AA
Catatan rumus
WCAG memakai ambang gamma 0,03928, sedangkan spesifikasi sRGB memakai 0,04045. Kami mengikuti angka WCAG agar setia pada teks normatif. Untuk warna 8 bit selisihnya nol, sebab tidak ada bilangan bulat di antara 10,016 dan 10,315
Kolom buta warna
Di luar WCAG. Matriks Machado, Oliveira & Fernandes (2009) diterapkan lebih dulu, lalu luminansi WCAG dihitung di atasnya. Perkiraan, bukan klaim kepatuhan
Terakhir ditinjau
3 September 2026

Butuh yang lebih dari sekadar hitungan?

Kalau persoalan Anda menyangkut kasus nyata di perusahaan, kami menyediakan konsultasi dan pelatihan yang disusun khusus, dibawakan langsung oleh expert yang menanganinya sehari-hari.

Konsultasi & layanan korporat

Memenuhi ambang kontras bukan berarti patuh WCAG. Alat ini menilai sepasang warna padat terhadap tiga kriteria kontras, dan tidak menilai kriteria aksesibilitas lainnya. Teks di atas gambar atau gradasi perlu ditangani terpisah.