Pemeriksa Kontras Warna

Apa itu Pemeriksa Kontras Warna?

Pemeriksa Kontras Warna adalah pemeriksa rasio kontras WCAG daring gratis untuk desainer, pengembang, dan penguji aksesibilitas. Alat ini mengambil warna latar depan (teks) dan warna latar belakang, menghitung luminansi relatif masing-masing, dan melaporkan rasio kontras sebagai nilai dari 1:1 hingga 21:1. Selanjutnya alat ini memberi tahu apakah rasio tersebut memenuhi WCAG 2.1 Level AA (4.5:1 normal, 3:1 besar) dan Level AAA (7:1 normal, 4.5:1 besar), serta menampilkan kedua warna sebagai pratinjau langsung dengan teks contoh sehingga Anda dapat menilai keterbacaan secara sekilas. Gunakan untuk memastikan badan teks, tombol, tautan, dan label terbaca sebelum Anda merilis sebuah desain.

Cara menggunakan Pemeriksa Kontras Warna

1. Ketik atau tempel warna latar depan (teks) sebagai nilai HEX, atau klik pemilih warna bawaannya untuk memilihnya secara visual.
2. Lakukan hal yang sama untuk warna latar belakang tempat teks berada.
3. Baca keluaran rasio kontras, ditampilkan sebagai nilai seperti 4.5:1 (1:1 adalah warna yang identik, 21:1 adalah hitam pekat di atas putih).
4. Periksa lencana AA dan AAA untuk teks normal dan untuk teks besar (18pt / 14pt tebal ke atas) guna melihat level mana yang lolos.
5. Lihat pratinjau teks contoh yang dirender dengan kedua warna Anda untuk memastikan teks nyaman dibaca.
6. Sesuaikan salah satu warna hingga Anda mencapai level kontras yang dibutuhkan desain Anda.

Contoh

Latar depan #595959, Latar belakang #ffffff

Rasio 7.00:1 — lolos AA dan AAA untuk teks normal dan besar

Latar depan #999999, Latar belakang #ffffff

Rasio 2.85:1 — gagal AA normal dan AAA, tidak memenuhi apa pun yang diperlukan untuk badan teks

Latar depan #767676, Latar belakang #ffffff

Rasio 4.54:1 — lolos AA normal dan AA besar, tetapi gagal AAA normal

Pertanyaan yang sering diajukan

Rasio kontras apa yang diwajibkan WCAG?

WCAG 2.1 Level AA membutuhkan setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar. Level AAA lebih ketat: 7:1 untuk teks normal dan 4.5:1 untuk teks besar. Pemeriksa ini menampilkan lencana lolos/gagal untuk masing-masing dari keempat ambang batas tersebut.

Apa yang dianggap teks besar?

WCAG mendefinisikan teks besar sebagai 18pt (sekitar 24px) ke atas, atau 14pt (sekitar 18.66px) ke atas jika tebal. Teks besar memiliki persyaratan kontras yang lebih rendah karena glif yang lebih besar lebih mudah dibaca, itulah sebabnya lencana teks besar bisa lolos saat lencana teks normal tidak.

Bagaimana rasio kontras dihitung?

Alat ini menggunakan rumus resmi WCAG: luminansi relatif setiap warna dihitung dari kanal sRGB yang dilinearkan, dan rasionya adalah (lebih terang + 0.05) / (lebih gelap + 0.05). Hasilnya berkisar dari 1:1 (warna identik) hingga 21:1 (hitam di atas putih).

Apakah mendukung alfa, RGB, atau warna bernama?

Input hanya HEX (#rgb singkat atau #rrggbb), dengan pemilih warna bawaan untuk setiap bidang. Alat ini tidak memperhitungkan alfa/opasitas atau transparansi parsial — gabungkan dulu lapisan semitransparan menjadi warna solid, lalu periksa itu.

Apakah warna saya dikirim ke server?

Tidak. Perhitungan luminansi dan rasio 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.