DevToolPal
ID

Pemeriksa Kontras Warna (WCAG)

Periksa rasio kontras WCAG 2.x antara warna teks dan latar, dengan hasil AA dan AAA untuk teks normal, teks besar, dan UI, pratinjau langsung, serta warna lolos terdekat.

Berjalan lokal, tidak pernah diunggah

Warna

Warna teks
Warna latar

Warna transparan dicampur lebih dulu: teks di atas latar, latar di atas putih.

Pratinjau

Teks besar

Teks isi harus mudah dibaca semua orang, termasuk orang dengan penglihatan rendah atau layar yang redup.

Tombol

Rasio kontras

—

Warna lolos terdekat

Fungsi alat ini

Pemeriksa kontras warna memberi tahu apakah warna teks mudah dibaca di atas warna latar menurut Pedoman Aksesibilitas Konten Web (WCAG 2.x). Masukkan warna CSS apa pun untuk teks dan latar — HEX, rgb(), hsl(), nama warna, atau warna transparan — dan Anda akan melihat rasio kontras, hasil lolos atau gagal tiap kriteria AA dan AAA, serta pratinjau langsung. Jika pasangan gagal, alat ini menyarankan warna teks dan latar terdekat yang lolos dengan rona yang sama. Semuanya berjalan di browser Anda.

Cara pakai

  1. Ketik atau pilih Warna teks dan Warna latar. Tukar menukar keduanya.
  2. Baca Rasio kontras dan daftar hasil untuk teks normal, teks besar, dan komponen UI.
  3. Jika suatu level gagal, lihat Warna lolos terdekat: setiap saran menampilkan warna baru, rasionya, tombol salin, dan Pakai untuk menerapkannya.
  4. Aktifkan APCA untuk melihat juga kontras kecerahan (Lc) dari draf WCAG 3.

Warna semi-transparan dicampur sebelum diperiksa: teks di atas latar, dan latar di atas putih.

Contoh

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Cara rasio dihitung

Luminans relatif tiap warna dihitung dari kanal sRGB-nya (dilinearkan, lalu diberi bobot 21% merah, 72% hijau, 7% biru). Rasionya adalah (yang lebih terang + 0,05) / (yang lebih gelap + 0,05), dari 1:1 untuk warna yang sama hingga 21:1 untuk hitam di atas putih. Yang penting hanya kecerahan, bukan rona: merah murni di atas hijau murni tampak mencolok tetapi hanya sekitar 1,3:1.

Saran hanya mengubah kecerahan warna (dalam HSL) dan memilih arah — lebih gelap atau lebih terang — yang membutuhkan perubahan lebih kecil. Kadang tidak ada rona yang berhasil: di latar abu-abu sedang, tidak ada warna teks yang mencapai 7:1.

FAQ

› Berapa rasio kontras yang dibutuhkan?

Level AA WCAG 2.x meminta minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar serta komponen UI seperti border kolom input, ikon, dan cincin fokus. Level AAA meminta 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Sebagian besar undang-undang dan kebijakan mengacu pada level AA.

› Apa yang dianggap teks besar?

Teks berukuran minimal 24px (18pt) dengan ketebalan biasa, atau minimal 18,66px (14pt) tebal. Yang lebih kecil adalah teks normal dan membutuhkan rasio lebih tinggi.

› Mengapa 4,49:1 gagal?

Ambang WCAG bersifat persis: rasio 4,499 tidak mencapai 4,5. Karena itu pemeriksa ini memotong rasio yang ditampilkan alih-alih membulatkannya ke atas, dan memutuskan lolos atau gagal dari nilai persisnya.

› Apa itu APCA?

APCA (Accessible Perceptual Contrast Algorithm) adalah metode kontras yang diusulkan untuk draf WCAG 3. Metode ini memberi nilai kontras kecerahan Lc yang bergantung pada warna mana yang menjadi teks dan lebih cocok untuk mode gelap. Ini belum menjadi standar hukum, jadi di sini hanya ditampilkan sebagai panduan tambahan.