Apa yang diukur oleh pengecek kontras?
Pengecek kontras membandingkan luminans relatif warna foreground dan warna background. Hasil ditampilkan sebagai rasio dari 1:1, di mana warna secara visual identik, hingga 21:1, di mana hitam dan putih memiliki kontras maksimum.
Alat ini melaporkan indikator lulus dan gagal bergaya WCAG untuk teks normal dan teks besar. Ini berguna untuk keputusan desain awal, status komponen, token tema, dan pemeriksaan cepat sebelum tinjauan aksesibilitas yang lebih lengkap.
Cara membaca hasil
| Check | Rasio minimum | Meaning |
|---|---|---|
| AA teks normal | 4.5:1 | Target umum untuk teks badan reguler. |
| AA teks besar | 3:1 | Berlaku untuk teks yang lebih besar atau lebih tebal di mana bentuk huruf lebih mudah dibaca. |
| AAA teks normal | 7:1 | Target yang lebih ketat untuk teks reguler dalam konteks aksesibilitas tinggi. |
| AAA teks besar | 4.5:1 | Target yang lebih ketat untuk teks besar. |
Apa yang alat ini tidak buktikan
Rasio adalah sinyal kuat, tetapi bukan audit aksesibilitas lengkap. Keterbacaan nyata juga bergantung pada tipografi, ketebalan font, status hover/fokus, status dinonaktifkan, warna sekitar, kualitas layar, dan apakah teks muncul di atas gambar atau gradien.
- Transparansi dan gradien memerlukan tinjauan terpisah.
- Ikon kecil dan goresan tipis mungkin membutuhkan kontras yang lebih kuat dibandingkan teks di sekitarnya.
- Warna merek dapat lulus pada pasangan tertentu dan gagal pada pasangan lain.
- Kontras pemindaian QR dan kontras keterbacaan teks saling terkait tetapi bukan pemeriksaan yang sama.
Cara meningkatkan kontras lemah
Gelapkan foreground
Untuk latar belakang terang, geser warna teks mendekati netral yang lebih gelap atau nuansa merek yang lebih kuat.
Terangkeun latar belakang
Perubahan kecil pada latar belakang dapat membuat warna merek lulus tanpa mengubah token foreground.
Tingkatkan ukuran atau ketebalan teks
Teks yang lebih besar або lebih tebal memiliki ambang AA yang lebih rendah, tetapi tetap membutuhkan pemisahan visual yang cukup.
Periksa setiap status
Hover, fokus, dinonaktifkan, terpilih, dan status kesalahan sering menggunakan pasangan warna yang berbeda.
Pertanyaan yang Sering Diajukan
Apakah ini audit kepatuhan WCAG penuh?
Tidak. Ini menghitung ambang kontras bergaya WCAG untuk pasangan warna. Tinjauan penuh juga memeriksa tata letak, perilaku keyboard, semantik, status fokus, alternatif teks, dan tipografi yang dirender secara nyata.
Apa yang dihitung sebagai teks besar?
Panduan WCAG menganggap teks besar kira-kira 18 pt teks reguler atau 14 pt teks tebal ke atas. Dalam pekerjaan web, verifikasi ukuran dan ketebalan yang dirender secara nyata, bukan hanya label desain.
Bisakah saya menggunakan ini untuk warna transparan?
Pengecek ringkas ini menggunakan warna sRGB opak. Jika UI Anda menggunakan transparansi, campurkan foreground dan background yang dirender akhir terlebih dahulu, lalu periksa pasangan hasil itu.
Apakah lulus AA berarti desain selalu mudah dibaca?
Tidak selalu. Font yang sangat tipis, label UI kecil, latar belakang ramai, dan layar berkualitas rendah masih dapat membuat teks sulit dibaca. Perlakukan rasio sebagai salah satu sinyal penting.
Apakah ini sama dengan kontras kode QR?
Tidak. Kontras kode QR memengaruhi keandalan pemindai, sedangkan alat ini berfokus pada ambang keterbacaan teks. Matematikanya terkait, tetapi keputusan praktisnya berbeda.