Pemeriksa Kontras
Contrast Checker ini menghitung rasio kontras WCAG 2.1 antara warna teks dan warna latar belakang, lalu menunjukkan apakah pasangan tersebut lulus AA dan AAA untuk teks normal dan teks besar.
Tentang alat ini
Contrast Checker ini menghitung rasio kontras WCAG 2.1 antara warna teks dan warna latar belakang, lalu menunjukkan apakah pasangan tersebut lulus AA dan AAA untuk teks normal dan teks besar.
Cara menggunakan
- Masukkan atau pilih warna teks.
- Masukkan atau pilih warna latar belakang (nilai hex bisa dipakai, termasuk singkatan 3 digit).
- Baca rasio kontras serta hasil AA/AAA untuk teks normal dan teks besar.
- Sesuaikan salah satu warna hingga level yang Anda butuhkan terpenuhi.
Perlu diketahui
- WCAG 2.1 AA mensyaratkan rasio kontras minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar.
- WCAG 2.1 AAA mensyaratkan minimal 7:1 untuk teks normal dan 4.5:1 untuk teks besar.
- Teks besar berarti minimal 18 pt (24 px) reguler atau 14 pt (sekitar 18.66 px) tebal.
- Rasio kontras berkisar dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih).
- Rasio dihitung dari luminans relatif setiap warna, sesuai rumus WCAG.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Berapa rasio kontras yang dibutuhkan untuk aksesibilitas?
Untuk WCAG 2.1 level AA, teks normal membutuhkan minimal 4.5:1 dan teks besar minimal 3:1. Level AAA menaikkannya menjadi 7:1 dan 4.5:1.
Apakah teks putih di atas hijau aksesibel?
Tergantung warnanya. Banyak hijau terang gagal AA dengan teks putih; hijau yang lebih gelap biasanya lulus. Masukkan nilai hex persis Anda untuk memeriksanya.
Apa yang termasuk teks besar dalam WCAG?
Teks berukuran minimal 18 point (24 px) dengan ketebalan reguler, atau minimal 14 point (sekitar 18.66 px) tebal.
Apakah kontras WCAG berlaku untuk tombol dan ikon?
Kriteria keberhasilan WCAG 2.1 1.4.11 meminta kontras minimal 3:1 untuk komponen antarmuka pengguna dan grafik bermakna terhadap sekitarnya.