Pemeriksa Kontras Warna

Periksa rasio kontras warna terhadap panduan aksesibilitas WCAG 2.1. Hasil AA/AAA instan.

Warna latar depan

Warna latar belakang

Pratinjau teks besar (18pt tebal)

Pratinjau teks normal — The quick brown fox jumps over the lazy dog.

14.05:1rasio kontras

AA — Teks normal (≥ 4,5:1)Lulus

AA — Teks besar (≥ 3:1)Lulus

AAA — Teks normal (≥ 7:1)Lulus

AAA — Teks besar (≥ 4,5:1)Lulus

Tentang alat ini

Pemeriksa kontras warna menghitung rasio kontras antara warna latar depan (teks) dan latar belakang menggunakan rumus luminansi relatif WCAG 2.1.

WCAG 2.1 mendefinisikan dua level: AA memerlukan 4,5:1 untuk teks normal dan 3:1 untuk teks besar. AAA memerlukan 7:1 dan 4,5:1.

Pilih warna latar depan dan latar belakang dengan pemilih warna atau masukkan kode hex.
Pratinjau menampilkan tampilan teks dalam ukuran normal dan besar.
Rasio kontras dan hasil WCAG diperbarui secara instan.
Gunakan pasangan sampel untuk menjelajahi pola aksesibilitas umum.

Desainer UI memverifikasi label tombol dan teks memenuhi standar WCAG. Pengembang frontend memeriksa kombinasi teks-latar dalam sistem desain.

Apa yang dihitung sebagai "teks besar"? — WCAG mendefinisikan teks besar sebagai minimal 18pt (24px) normal, atau 14pt (~18.67px) tebal.
Apakah mendukung transparansi atau rgba? — Tidak, alat ini hanya bekerja dengan warna hex padat.
Level WCAG mana yang harus ditargetkan? — AA adalah minimum yang direkomendasikan untuk sebagian besar situs web publik. AAA memberikan keterbacaan lebih baik.
Apakah 4,5:1 selalu cukup? — 4,5:1 memenuhi WCAG AA, tetapi pengguna dengan gangguan penglihatan lebih parah mungkin mendapat manfaat dari rasio yang lebih tinggi.