Yang diperiksa aturan ini
Pastikan kontras antara warna latar depan dan latar belakang memenuhi ambang batas minimum rasio kontras WCAG 2 AA.
Mengapa ini penting
WCAG 1.4.3 mensyaratkan rasio kontras minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Harga, badge, dan banner yang samar sulit dibaca oleh orang dengan penglihatan rendah, dan oleh semua orang di bawah cahaya terang.
Cara memperbaikinya
Di website apa pun
- Temukan teks berkontras rendah dan catat warna teks serta warna latar belakangnya: alat pengecek kontras atau developer tools di browser Anda menampilkan keduanya.
- Ubah warna teks atau latar belakang di CSS tema Anda hingga rasionya minimal 4.5:1 (3:1 untuk teks berukuran 24px ke atas, atau 18,66px tebal).
- Beri perhatian khusus pada badge diskon, teks placeholder, tautan footer, dan tombol di atas gambar.
Di Shopify
- Temukan teks berkontras rendah dan catat warna teks serta warna latar belakangnya: alat pengecek kontras atau developer tools di browser Anda menampilkan keduanya.
- Di Toko Online > Tema > Sesuaikan > Pengaturan tema > Warna, gelapkan warna teks atau terangkan latar belakang untuk skema warna yang terdampak hingga rasionya minimal 4.5:1.
- Beri perhatian khusus pada badge diskon, teks placeholder, tautan footer, dan tombol di atas gambar.
Cara mengecek perbaikannya
- Jalankan lagi pemindaian dan pastikan color-contrast tidak muncul lagi.
- Cek sampel dengan alat pengecek kontras pada warna yang persis.
Cara FixReports menemukannya
Pemindaian kami menjalankan aturan axe-core color-contrast di browser Chrome sungguhan pada setiap halaman yang diuji, lalu melaporkan setiap elemen yang gagal beserta halamannya, markup-nya, dan, jika relevan, tangkapan layarnya.
Pengujian otomatis memastikan bahwa masalah spesifik ini memang ada. Pengujian itu tidak dapat menentukan apakah bagian lain halaman sudah aksesibel: beberapa hambatan baru terlihat ketika seseorang memeriksa halaman itu.