Pemeriksa Kontras Warna

Cara Menggunakan Pemeriksa Kontras Warna

1. 1. Masukkan kedua warna. Ketik masing-masing sebagai HEX (#777777), rgb(), hsl(), atau nama CSS, atau gunakan pemilih warna. Tukar menukarkannya, berguna untuk memeriksa versi terang-di-gelap dan gelap-di-terang.
2. 2. Baca rasio dan tabelnya. Rasio berkisar dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih). Tabel membandingkannya dengan setiap syarat WCAG dan menyatakan Lolos atau Gagal dengan kata-kata, tidak hanya dengan warna.
3. 3. Tentukan ukurannya. Teks besar memiliki syarat yang lebih rendah. Pratinjau menampilkan teks normal, teks besar, teks besar tebal, dan kontrol berbingkai agar Anda dapat menilai kasus Anda sendiri.
4. 4. Perbaiki pasangan yang gagal. Pilih tingkat yang Anda tuju dan gunakan warna teks atau latar belakang yang disarankan. Alat mempertahankan rona dan hanya mengubah kecerahan, dengan langkah terkecil yang lolos.

Apa yang Disyaratkan WCAG 2.2

Web Content Accessibility Guidelines (WCAG) 2.2 menetapkan rasio kontras minimum dalam tiga kriteria keberhasilan. Rasionya adalah (L₁ + 0,05) ÷ (L₂ + 0,05), dengan L₁ adalah luminansi relatif warna yang lebih terang dan L₂ adalah luminansi relatif warna yang lebih gelap.

Teks besar adalah setidaknya 18 poin, atau 14 poin tebal — 24 piksel dan sekitar 18,7 piksel pada layar 96 dpi. Logo, teks dekoratif murni, dan kontrol nonaktif dikecualikan dari 1.4.3. Aturan 3:1 pada 1.4.11 mencakup bagian kontrol yang diperlukan untuk menemukannya (bingkai tombol, garis luar kotak centang), statusnya seperti fokus, dan grafis yang diperlukan pembaca untuk memahami konten, seperti garis pada grafik.

Cara Rasio Dihitung

Setiap kanal sRGB diskalakan ke 0–1 dan dilinearkan: c ÷ 12,92 jika c ≤ 0,04045, selain itu ((c + 0,055) ÷ 1,055)^2,4. Luminansi relatif kemudian 0,2126 R + 0,7152 G + 0,0722 B. Hijau paling berpengaruh karena mata paling peka terhadapnya.

WCAG tidak membulatkan: rasio 4,4999 gagal 4,5. Karena itu pemeriksa ini menampilkan rasio yang dibulatkan ke bawah hingga dua desimal, sehingga selisih kecil tidak pernah ditampilkan sebagai lolos.

Memeriksa Slide, Poster, dan Figur

• Slide dan poster bukan halaman web, tetapi rasio WCAG adalah tolok ukur yang diterima untuk keduanya juga. Teks isi pada slide biasanya besar (24 piksel adalah 18 poin); keterangan, catatan kaki, dan label sumbu tidak, jadi periksa sebagai teks normal.
• Targetkan di atas minimum untuk proyeksi. Proyektor di ruangan terang menurunkan kontras bagi semua orang. Pilih AAA (7:1) untuk teks pada slide yang akan ditampilkan di ruangan terang.
• Teks di atas foto atau gradien tidak memiliki satu latar belakang. Periksa area paling terang dan paling gelap di belakang teks, atau letakkan teks pada panel solid.
• Grafik dan figur termasuk 1.4.11: garis, batang, dan penanda memerlukan 3:1 terhadap latar belakang. Warna saja tidak boleh membawa makna — lihat Color Blindness Simulator.
• Warna transparan diratakan sebelum diukur: latar belakang diletakkan di atas putih, lalu teks di atas latar belakang. Halaman dengan sesuatu di belakangnya memerlukan warna itu dimasukkan langsung.

Catatan tentang APCA

Accessible Perceptual Contrast Algorithm (APCA) adalah metode kandidat dalam draf kerja WCAG 3, yang memperhitungkan ukuran teks, ketebalan, dan polaritas. Ini adalah draf, bukan syarat, dan tidak ada undang-undang atau standar saat ini yang memintanya. Rasio WCAG 2.x — yang digunakan dalam alat ini — tetap menjadi dasar klaim kepatuhan.

Pertanyaan yang Sering Diajukan

Berapa rasio kontras yang baik?

4,5:1 atau lebih tinggi untuk teks normal memenuhi WCAG AA, dan 7:1 memenuhi AAA. Teks besar memerlukan 3:1 untuk AA dan 4,5:1 untuk AAA. Hitam di atas putih adalah maksimum, 21:1. Apa pun di bawah 3:1 sulit dibaca bagi banyak orang, bahkan dengan penglihatan yang baik.

Apa yang dihitung sebagai teks besar dalam WCAG?

Teks yang setidaknya 18 poin (24 piksel) dengan bobot reguler, atau setidaknya 14 poin (sekitar 18,7 piksel) dalam tebal. Ukuran diukur sebagaimana ditampilkan, jadi font slide yang tampak kecil pada selebaran mungkin tetap besar saat diproyeksikan.

Apakah syarat kontras berlaku untuk ikon dan garis grafik?

Ya, melalui kriteria keberhasilan 1.4.11 Kontras Non-teks: komponen antarmuka pengguna dan grafis yang diperlukan untuk memahami konten harus memiliki setidaknya 3:1 terhadap warna yang berdampingan. Grafis dekoratif dan komponen nonaktif dikecualikan.

Mengapa warna saya menunjukkan 4,49 padahal rasionya hampir 4,5?

Karena WCAG membandingkan rasio yang tepat dan tidak memberi kredit untuk pembulatan. Pasangan pada 4,4999:1 gagal syarat 4,5:1, jadi alat menampilkan nilai yang dibulatkan ke bawah hingga dua desimal, bukan 4,50.

Bagaimana cara kerja warna yang disarankan?

Alat mempertahankan rona dan saturasi warna Anda, lalu menggeser kecerahan HSL ke atas atau ke bawah dalam langkah kecil, dan mengembalikan nilai terdekat yang mencapai rasio target sebagai kode HEX 8-bit. Jika tidak ada kecerahan yang dapat mencapainya — misalnya 7:1 terhadap abu-abu tengah — alat menyatakannya dan menyarankan mengubah warna yang lain.

Apakah APCA lebih baik daripada rasio WCAG?

APCA memodelkan persepsi lebih dekat, terutama untuk mode gelap dan teks tipis, tetapi merupakan bagian dari draf (WCAG 3), bukan syarat yang diterima. Undang-undang aksesibilitas dan standar pengadaan yang mengutip WCAG 2.x menggunakan rasio yang dihitung di sini.