Pemeriksa Kontras Warna

Apa itu Pemeriksa Kontras Warna?

Pemeriksa Kontras Warna adalah pemeriksa kontras WCAG dan APCA daring gratis untuk desainer, pengembang, dan penguji aksesibilitas. Alat ini menerima warna sebagai HEX (#rgb, #rrggbb, dan #rrggbbaa 8 digit dengan alfa), rgb()/rgba() dan hsl()/hsla(), menggabungkan latar depan tembus pandang di atas latar belakang sebelum mengukur, dan melaporkan baik rasio WCAG 2.1 (1:1 hingga 21:1) maupun skor kontras kecerahan APCA Lc. Alat ini menandai WCAG 2.1 Level AA (4.5:1 normal, 3:1 besar) dan AAA (7:1 normal, 4.5:1 besar), menambahkan lencana 3:1 untuk komponen UI dan grafik nonteks, serta dapat menyarankan latar depan lolos terdekat — hanya menyesuaikan kecerahannya hingga memenuhi AA atau AAA — yang Anda terapkan dengan sekali klik.

Cara menggunakan Pemeriksa Kontras Warna

1. Masukkan warna latar depan (teks) sebagai HEX, rgb() atau hsl() — HEX 8 digit atau rgba dengan alfa diterima — atau klik pemilih warna untuk memilih secara visual.
2. Masukkan warna latar belakang dengan cara yang sama; latar depan semitransparan digabungkan di atasnya (dan latar belakang di atas putih) sebelum kontras diukur.
3. Gunakan tombol Tukar untuk membalik latar depan dan latar belakang kapan saja.
4. Baca rasio kontras WCAG 2.1 dan skor APCA Lc yang ditampilkan tepat di sebelahnya.
5. Periksa lencana AA dan AAA untuk teks normal dan besar, plus lencana 3:1 untuk komponen UI dan grafik.
6. Jika sebuah pasangan gagal, lihat warna AA atau AAA lolos terdekat dan klik Terapkan untuk memperbarui latar depan.

Contoh

Latar depan #595959, Latar belakang #ffffff

Rasio 7.00:1 dengan APCA Lc tinggi — lolos AA dan AAA untuk teks normal dan besar

Latar depan #00000080 (hitam 50%) di atas #ffffff

Digabungkan dulu menjadi abu-abu pekat, lalu rasio WCAG dan APCA Lc dihitung

Latar depan #999999 di atas #ffffff — 2.85:1, gagal AA

Buka warna AA terdekat dan klik Terapkan untuk mencapai 4.5:1 sambil mempertahankan rona yang sama

Pertanyaan yang sering diajukan

Rasio kontras apa yang diwajibkan WCAG?

WCAG 2.1 Level AA membutuhkan minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar; Level AAA membutuhkan 7:1 dan 4.5:1. Komponen UI dan objek grafis nonteks (SC 1.4.11) membutuhkan 3:1. Pemeriksa ini menampilkan lencana lolos/gagal untuk masing-masing ambang tersebut.

Apa itu skor APCA Lc?

APCA (Accessible Perceptual Contrast Algorithm) adalah metode kontras yang diusulkan untuk WCAG 3. Ia memberikan nilai kontras kecerahan (Lc) kira-kira 0 hingga 108, di mana lebih tinggi berarti lebih kontras, dan memperhitungkan polaritas (gelap di atas terang vs terang di atas gelap). Ia ditampilkan di sebelah rasio WCAG 2.1 dan memakai tingkat panduannya sendiri, bukan satu lolos/gagal.

Bagaimana cara kerja saran warna lolos terdekat?

Ia mempertahankan rona dan saturasi latar depan dan hanya menyesuaikan kecerahannya lebih terang atau lebih gelap hingga kontras terhadap latar belakang memenuhi AA (4.5:1) atau AAA (7:1), lalu Anda dapat menerapkannya sekali klik. Jika latar belakang bernada menengah dan target tidak tercapai, ia menampilkan warna terdekat yang mungkin.

Format warna apa yang bisa saya masukkan?

HEX (#rgb, #rrggbb, plus #rgba dan #rrggbbaa 8 digit dengan alfa), rgb()/rgba() dan hsl()/hsla(), dengan pemilih warna bawaan untuk setiap bidang. Latar depan semitransparan digabungkan di atas latar belakang — yang sendiri diratakan ke putih — sebelum rasio dihitung. Warna bernama tidak didukung.

Apakah warna saya dikirim ke server?

Tidak. Semua penguraian, penggabungan, serta perhitungan luminansi, rasio, dan APCA berjalan sepenuhnya di browser Anda dengan JavaScript — tidak ada warna yang diunggah dan tidak ada yang dikirim ke server, sehingga bekerja secara privat dan bahkan offline setelah halaman dimuat.