# Pemeriksa Kontras Warna

Periksa kontras antara warna teks dan warna latar belakang berdasarkan WCAG 2 dan APCA. Pemeriksa ini menghitung rasio kontras WCAG 2 dari luminans relatif, melaporkan lulus atau gagal untuk teks normal dan besar tingkat AA dan AAA serta untuk grafis UI, dan menambahkan nilai kontras kecerahan APCA beserta panduan kegunaannya. Dibuat untuk desainer dan pengembang yang membangun antarmuka aksesibel.

## Pertanyaan yang sering diajukan

### Apa arti tingkat WCAG?

Tingkat AA mensyaratkan 4.5:1 untuk teks normal dan 3:1 untuk teks besar (kriteria keberhasilan 1.4.3); tingkat AAA mensyaratkan 7:1 dan 4.5:1 (1.4.6). Komponen antarmuka pengguna dan grafis bermakna memerlukan 3:1 terhadap warna di sekitarnya (1.4.11). Pemeriksa ini melaporkan lulus atau gagal untuk masing-masing dari lima ambang tersebut.

### Apa yang termasuk teks besar?

WCAG mendefinisikan teks besar sebagai minimal 18 poin reguler, sekitar 24 CSS piksel, atau minimal 14 poin tebal, sekitar 18.66 CSS piksel. Teks yang lebih kecil termasuk teks normal dan memerlukan rasio yang lebih tinggi.

### Mengapa rasio 4.499:1 gagal memenuhi AA?

Ambang WCAG bersifat pasti, jadi rasio yang akan dibulatkan menjadi 4.5 tetapi nilainya di bawah angka itu tidak lulus. Pemeriksa membandingkan rasio yang belum dibulatkan dan menampilkannya dengan memotong hingga dua angka desimal, sehingga angka yang ditampilkan tidak pernah terlihat lebih baik daripada nilai sebenarnya.

### Apa itu APCA?

Accessible Perceptual Contrast Algorithm adalah metode kontras yang dikembangkan untuk draf WCAG 3. Metode ini memodelkan kontras kecerahan yang dirasakan, memperlakukan teks dan latar belakang secara berbeda, serta menghasilkan nilai kontras kecerahan, Lc, dari sekitar -108 hingga 106. Metode ini belum menjadi bagian dari standar WCAG yang diterbitkan, jadi gunakan hasil WCAG 2 untuk kepatuhan dan APCA sebagai pemeriksaan tambahan.

### Mengapa nilai APCA terkadang negatif?

APCA memperhitungkan polaritas: nilai positif berarti teks gelap di atas latar belakang terang, sedangkan nilai negatif berarti teks terang di atas latar belakang gelap. Panduan menggunakan nilai absolut, jadi Lc -75 dan Lc 75 berada pada tingkat yang sama.

### Bagaimana tingkat panduan APCA ditentukan?

Tingkat ini mengikuti mode sederhana bronze APCA: Lc 90 disarankan untuk teks isi, Lc 75 adalah minimum untuk teks isi, Lc 60 untuk teks konten lainnya, Lc 45 untuk judul dan teks besar, Lc 30 untuk teks yang dibaca sekilas seperti placeholder, dan Lc 15 untuk elemen nonteks. Ukuran dan ketebalan font tetap berpengaruh, jadi anggap tingkat ini sebagai titik awal, bukan keputusan akhir.

### Versi APCA mana yang diterapkan?

Konstanta APCA-W3 versi 0.0.98 G, revisi 4g, dengan eksponen sederhana 2.4 pada kanal sRGB, batas hitam lembut, dan pemotongan kontras rendah. Teks hitam di atas putih menghasilkan sekitar Lc 106.0 dan teks putih di atas hitam sekitar Lc -107.9, sesuai dengan implementasi referensi.

### Format warna apa yang bisa saya masukkan?

Kode hex dengan atau tanpa #, nama warna CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), ruang color() seperti display-p3, dan cmyk(). Warna di luar sRGB dipetakan ke sRGB terlebih dahulu karena kedua rumus ditetapkan untuk warna layar sRGB.

### Bagaimana warna transparan ditangani?

Warna teks semi-transparan dibaurkan di atas latar belakang sebelum diukur, seperti cara browser menggambarnya. Latar belakang semi-transparan terlebih dahulu dibaurkan di atas warna putih. Hasilnya mencantumkan warna teks dan latar belakang opak yang benar-benar dibandingkan.

### Apakah urutan kedua warna berpengaruh?

Untuk WCAG 2, urutannya tidak berpengaruh karena rasio luminans yang lebih terang terhadap yang lebih gelap tetap sama dalam urutan apa pun. Untuk APCA, urutannya berpengaruh karena teks dan latar belakang diberi bobot berbeda, jadi masukkan warna teks di kolom pertama dan warna latar belakang di kolom kedua.

Iklan Anda di sini?

[Email kami](mailto:hi@dennn.is?subject=Beriklan%20di%20OneClick%20Pro)

[Iklan Rangkaian plugin siap agen untuk WordPress.](https://sleekwp.com/?ref=oneclickpro)