Pemeriksa Pasangan Warna Aksesibel

Pilih warna latar depan dan latar belakang, lalu alat ini memeriksa apakah pasangan warna tersebut memenuhi persyaratan kontras Web Content Accessibility Guidelines (WCAG) — standar yang digunakan oleh audit aksesibilitas, Lighthouse, dan sebagian besar persyaratan aksesibilitas digital yang bersifat hukum (ADA, EN 301 549, Section 508).

Apa itu kontras warna WCAG?

WCAG 2.x mendefinisikan dua rumus. Pertama, luminansi relatif — seberapa terang suatu warna tampak, dengan pembobotan sesuai cara mata manusia mempersepsikan merah, hijau, dan biru (L = 0.2126×R + 0.7152×G + 0.0722×B, menggunakan kanal sRGB yang dilinearisasi). Kedua, rasio kontras antara dua warna — (L1 + 0.05) / (L2 + 0.05), luminansi yang lebih terang dibagi dengan yang lebih gelap — yang berkisar dari 1:1 (warna identik) hingga 21:1 (hitam murni di atas putih murni).

WCAG menetapkan rasio minimum agar teks dapat dibaca oleh orang dengan gangguan penglihatan rendah atau kekurangan penglihatan warna:

• AA, teks normal: 4.5:1
• AA, teks besar (≥18pt, atau ≥14pt tebal): 3:1
• AAA, teks normal: 7:1
• AAA, teks besar: 4.5:1

AA adalah standar yang paling banyak ditargetkan situs — itulah yang dituntut oleh audit aksesibilitas dan sebagian besar standar hukum. AAA lebih ketat dan terutama relevan untuk produk pemerintahan atau produk dengan aksesibilitas tinggi.

Cara menggunakannya

1. Pilih warna latar depan (teks) Anda — ketik nilai hex atau gunakan pemilih warna.
2. Pilih warna latar belakang Anda.
3. Tabel hasil langsung diperbarui dengan rasio kontras yang tepat dan lencana lulus/gagal untuk keempat ambang batas (AA/AAA × normal/besar).
4. Jika pasangan warna Anda gagal AA untuk teks normal, alat ini juga menghitung warna latar depan aksesibel yang disarankan — penyesuaian kecerahan terdekat dari warna asli Anda (lebih gelap atau lebih terang, mana yang perubahan visualnya lebih kecil) yang memenuhi standar 4.5:1 sambil mempertahankan rona dan saturasi yang sama.

Pertanyaan yang Sering Diajukan

Mengapa pasangan yang sama kadang lulus untuk teks besar tetapi gagal untuk teks normal? Teks yang lebih besar dan tebal lebih mudah dibaca pada kontras yang lebih rendah, jadi WCAG melonggarkan rasionya menjadi 3:1 (AA) atau 4.5:1 (AAA) untuk teks minimal 18pt, atau 14pt tebal.

Apakah buta warna memengaruhi ini? Rasio kontras adalah perhitungan luminansi, bukan perhitungan perbedaan warna, jadi ia tetap berlaku cukup baik pada berbagai bentuk umum kekurangan penglihatan warna — tetapi itu tidak menggantikan pemeriksaan bahwa informasi tidak disampaikan hanya melalui rona (misalnya, "merah = kesalahan" juga perlu ikon atau label).

Mengapa warna latar depan yang disarankan bukan rona yang sama dengan yang saya ketik? Itu rona dan saturasi yang sama — hanya kecerahannya yang berubah, ke arah mana pun (menuju hitam atau menuju putih) yang mencapai 4.5:1 dengan pergeseran paling kecil dari warna asli Anda.

Bagaimana jika saya menginginkan kepatuhan AAA? Periksa baris AAA pada tabel hasil. Fitur warna yang disarankan saat ini menargetkan AA untuk teks normal (4.5:1), ambang batas yang paling banyak digunakan audit; warna yang memenuhi AA tidak selalu memenuhi AAA.

Apakah data warna saya dikirim ke mana pun? Tidak — semua perhitungan berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah atau disimpan.