Pemeriksa Kontras Warna
Pemeriksa kontras warna gratis: uji apakah warna teks dan latar memenuhi WCAG 2.2 AA dan AAA, lihat rasio kontras, dan dapatkan warna terdekat yang lolos.
Ini adalah teks normal, seukuran paragraf.
Teks besar
Tombol| AA | AAA | |
|---|---|---|
| Teks normal | ||
| Teks besar (24 px, atau 18,7 px tebal) | ||
| Ikon dan batas antarmuka | — |
Apa fungsinya
Pemeriksa ini mengukur kontras antara warna teks dan latar belakangnya dengan rumus dari pedoman aksesibilitas WCAG 2.2, yang digunakan dalam banyak undang-undang aksesibilitas. Alat ini menampilkan rasio kontras, dari 1:1 (tanpa kontras) hingga 21:1 (hitam di atas putih), dan apakah pasangan warna lolos level AA dan AAA untuk teks normal, teks besar, dan komponen antarmuka seperti ikon dan garis batas. Jika suatu pasangan gagal, alat ini menyarankan warna terdekat dengan rona yang sama yang lolos.
Cara memakainya
- Masukkan atau pilih warna teks dan warna latar belakang.
- Baca rasio kontras serta hasil AA dan AAA, lalu periksa pratinjau langsung.
- Jika gagal, tekan Gunakan pada warna yang disarankan, lalu salin tautan untuk membagikan hasilnya.
Pertanyaan yang sering diajukan
Berapa rasio kontras yang saya butuhkan?
Level AA, target hukum yang umum, memerlukan 4,5:1 untuk teks normal dan 3:1 untuk teks besar serta untuk ikon dan batas antarmuka. Level AAA memerlukan 7:1 untuk teks normal dan 4,5:1 untuk teks besar.
Apa yang dianggap teks besar?
Teks berukuran minimal 24 piksel CSS (18 poin), atau minimal sekitar 18,7 piksel CSS (14 poin) jika tebal. Judul sering kali besar; teks isi biasanya tidak.
Mengapa #777777 di atas putih gagal?
Rasionya 4,47:1, sedikit di bawah 4,5:1 yang disyaratkan untuk teks normal. Rasio tidak dibulatkan ke atas, sehingga abu-abu yang sedikit lebih gelap seperti #767676 (4,54:1) adalah abu-abu paling terang yang lolos di atas putih.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast