Cara menggunakan Pengecek Kontras APCA
- Masukkan warna teks dan latar (format CSS apa pun).
- Baca nilai Lc — makin tinggi, makin mudah dibaca. Nilai negatif berarti teks terang di latar gelap.
- Periksa tabel penggunaan untuk melihat apakah pasangan warna ini cocok untuk teks isi, judul, atau hanya elemen non-teks.
- Bandingkan dengan rasio WCAG 2 di sampingnya, yang sampai sekarang masih menjadi standar hukum dan audit.
Apa itu APCA?
APCA (Accessible Perceptual Contrast Algorithm), dikembangkan oleh Andrew Somers untuk W3C, adalah metode kontras yang diusulkan untuk pedoman WCAG 3 yang akan datang. Alih-alih rasio seperti 4,5:1, metode ini menghasilkan nilai kontras kecerahan Lc dari kira-kira 0 hingga 106 (positif untuk teks gelap di latar terang, negatif untuk teks terang di latar gelap). Metode ini memodelkan cara mata manusia benar-benar mempersepsikan kontras, termasuk pengaruh ukuran dan ketebalan font.
Mengapa APCA, bukan rasio WCAG 2?
- Sadar polaritas: WCAG 2 memperlakukan teks putih di atas hitam dan teks hitam di atas putih dengan cara yang sama, padahal mata kita tidak. APCA memberi skor yang berbeda untuk keduanya.
- Lebih baik untuk mode gelap: rumus WCAG 2 melebih-lebihkan kontras untuk pasangan warna gelap, sehingga beberapa kombinasi tema gelap yang dinyatakan “lulus” sebenarnya sulit dibaca. APCA mendeteksi hal ini.
- Lebih sedikit kegagalan palsu: beberapa pasangan warna tengah yang sebenarnya tetap terbaca, seperti teks putih pada tombol oranye, gagal di WCAG 2, sementara APCA menilainya lebih realistis.
Cara membaca nilai Lc
| Lc | Cocok untuk |
|---|---|
| 90+ | Disarankan untuk teks isi dan bacaan panjang |
| 75 | Minimum untuk teks isi (~18px reguler) |
| 60 | Teks konten lainnya (~24px reguler atau 16px tebal) |
| 45 | Judul besar dan label UI berukuran besar |
| 30 | Teks placeholder, status nonaktif, ikon besar |
| 15 | Minimum untuk elemen non-teks seperti pembatas |
Ini adalah panduan “tingkat perunggu” yang disederhanakan; pendekatan APCA lengkap menggunakan tabel pencarian untuk setiap ukuran dan ketebalan font.
Haruskah saya memakai APCA sekarang?
WCAG 3 masih berupa draf kerja, dan bentuk final APCA bisa berubah. Undang-undang dan audit aksesibilitas (termasuk European Accessibility Act, yang merujuk WCAG 2.1 melalui EN 301 549) masih memakai rasio WCAG 2. Pendekatan praktisnya: penuhi WCAG 2 AA untuk kepatuhan, lalu gunakan APCA sebagai pendapat kedua, terutama untuk tema gelap dan teks tampilan berukuran besar. Periksa WCAG 2 secara rinci dengan Pengecek Kontras.
Juga dicari sebagai: apca, wcag 3, kontras lc, kontras persepsi, aksesibilitas web, kontras teks.
Tool yang cocok dipakai bersama Pengecek Kontras APCA
- Simulator Buta Warna — Unggah screenshot atau desain dan lihat sekaligus dalam delapan jenis defisiensi penglihatan warna — atau uji palet untuk menemukan warna yang menjadi tidak bisa dibedakan.
- Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
- Konverter OKLCH — Jelajahi ruang warna OKLCH yang seragam secara persepsi dengan slider langsung, cek apakah warna masuk ke sRGB, dan salin fallback HEX, RGB, dan HSL yang sesuai.
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.