# Elemen harus memenuhi ambang batas minimum rasio kontras warna

<https://www.fixreports.com/id/issues/color-contrast>

WCAG 1.4.3 Contrast (Minimum) · Level AA

Sebagian teks kurang menonjol dari latar belakangnya sehingga sulit dibaca oleh orang dengan penglihatan rendah.

## 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
1. Temukan teks berkontras rendah dan catat warna teks serta warna latar belakangnya: alat pengecek kontras atau developer tools di browser Anda menampilkan keduanya.
2. 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).
3. Beri perhatian khusus pada badge diskon, teks placeholder, tautan footer, dan tombol di atas gambar.

### Di Shopify
1. Temukan teks berkontras rendah dan catat warna teks serta warna latar belakangnya: alat pengecek kontras atau developer tools di browser Anda menampilkan keduanya.
2. 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.
3. Beri perhatian khusus pada badge diskon, teks placeholder, tautan footer, dan tombol di atas gambar.

### Di WooCommerce dan WordPress
1. Temukan teks berkontras rendah dan catat warna teks serta warna latar belakangnya: alat pengecek kontras atau developer tools di browser Anda menampilkan keduanya.
2. 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).
3. 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.

## Sumber
- Dokumentasi aturan axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Memahami WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum