♿

cek kontras WCAG

Cek rasio kontras warna untuk kepatuhan aksesibilitas WCAG AA dan AAA.

Alat Desain Berjalan lokal Tidak ada data dikirim
WCAG AA / AAA aksesibilitas warna
Warna Latar Depan
Warna Latar Belakang
Pratinjau
Teks normal — Rubah cokelat cepat melompati anjing yang malas.
Teks besar (24px reguler)
Teks besar (18.67px tebal)
Komponen UI
—
Rasio Kontras
Level Teks Normal Teks Besar Komponen UI
AA — — —
AAA — — N/A
WCAG 2.1 — AA memerlukan ≥ 4.5:1 untuk teks normal, ≥ 3:1 untuk teks besar dan komponen UI. AAA memerlukan ≥ 7:1 untuk teks normal, ≥ 4.5:1 untuk teks besar. Teks besar = 18pt (24px) reguler atau 14pt tebal (18.67px).

Apa itu Pemeriksa Kontras?

Periksa rasio kontras warna untuk kepatuhan aksesibilitas WCAG AA dan AAA. Verifikasi secara instan kombinasi warna latar depan dan latar belakang untuk teks normal, teks besar, dan komponen UI.

Cara Menggunakan Pemeriksa Kontras

  1. Masukkan atau pilih warna teks latar depan.
  2. Masukkan atau pilih warna latar belakang di belakangnya.
  3. Tinjau rasio kontras dan hasil lulus atau gagal WCAG secara instan.
  4. Sesuaikan salah satu warna hingga kombinasi memenuhi target aksesibilitas Anda.

Alat Terkait

🎨
color picker
Konversi warna antara HEX, RGB, HSL, dan CMYK
 🌈
gradient CSS
Buat gradien linear dan radial CSS dengan pratinjau langsung
 🎨
buat palet warna
Buat palet warna komplementer, analog, dan triadik
Memahami Kontras Warna ▾
Contoh
Input Memeriksa teks abu-abu medium di latar belakang putih:
Output Hasil: lolos AA untuk teks besar (≥ 3:1), tetapi gagal AA untuk teks normal (memerlukan 4.5:1). Gelapkan abu-abu sedikit agar lolos semua level AA.
Kasus Penggunaan Umum
  • Periksa kontras tombol dan tautan sebelum merilis pembaruan UI
  • Validasi warna teks dalam sistem merek dan panduan gaya
  • Tinjau grafik pemasaran untuk keterbacaan
  • Uji kombinasi gelap-di-atas-terang dan terang-di-atas-gelap dengan cepat
Pertanyaan yang Sering Diajukan
Apa perbedaan antara level kontras AA dan AAA?

WCAG AA memerlukan rasio 4.5:1 untuk teks normal dan 3:1 untuk teks besar — persyaratan hukum standar. AAA memerlukan 7:1 untuk teks normal dan 4.5:1 untuk teks besar, memberikan aksesibilitas yang lebih baik bagi pengguna dengan gangguan penglihatan rendah yang parah.

Apakah ini memeriksa kontras non-teks (ikon, batas)?

Ya — WCAG 1.4.11 (Kontras Non-teks) memerlukan 3:1 untuk komponen UI dan elemen grafis. Hasil Komponen UI AA dalam tabel mencakup persyaratan ini.

Warna saya lolos AA tetapi gagal AAA — apakah saya perlu memperbaikinya?

Kepatuhan AAA tidak diwajibkan untuk semua konten. WCAG AA adalah persyaratan hukum standar di sebagian besar yurisdiksi. Targetkan AAA jika memungkinkan, tetapi AA cukup untuk kepatuhan hukum.

Apa yang termasuk teks besar?

WCAG mendefinisikan teks besar sebagai 18pt (24px) atau lebih untuk bobot reguler, atau 14pt (sekitar 18.67px) atau lebih untuk teks tebal. Teks besar memiliki persyaratan kontras yang lebih rendah (3:1 untuk AA) karena secara alami lebih mudah dibaca.