Pemeriksa Kontras Warna

1. 01Masukkan warna teksKetik kode hex atau pilih lewat pemilih warna.
2. 02Masukkan warna latarWarna di belakang teks tersebut. Tombol tukar berguna untuk mencoba kebalikannya.
3. 03Baca hasilnyaAnda akan melihat rasio kontrasnya serta status lolos atau gagal untuk tiap tingkat dan ukuran teks.

• Memeriksa warna merekWarna merek sering kali indah tetapi tidak terbaca sebagai teks. Di sinilah hal itu ketahuan.
• Merancang tombol dan tautanTeks pada tombol berwarna adalah tempat kontras paling sering gagal.
• Mode gelapPasangan warna yang lolos di latar putih belum tentu lolos di latar gelap.

• Hitam di atas putihRasio 21:1, kontras tertinggi yang mungkin, dan lolos di semua tingkat.
• Abu-abu muda di atas putihSering terlihat elegan tetapi gagal di tingkat AA untuk teks ukuran normal.
• Teks putih di atas warna aksenBanyak warna aksen yang terang butuh teks gelap, bukan putih, agar lolos.

• Teks besar punya syarat lebih longgarTeks berukuran 24px ke atas, atau 19px tebal, hanya butuh rasio 3:1 untuk lolos AA.
• Coba tukar warnanyaKadang teks gelap di atas latar terang lolos, sementara kebalikannya tidak. Tombol tukar membuat ini cepat diuji.
• AAA tidak selalu wajibAA umumnya menjadi target praktis. AAA berguna untuk teks panjang yang dibaca lama.

Rasio kontras membandingkan tingkat terang relatif dari dua warna. Nilainya berkisar antara 1:1 untuk dua warna yang identik sampai 21:1 untuk hitam di atas putih. WCAG mensyaratkan minimal 4,5:1 untuk teks ukuran normal pada tingkat AA dan 3:1 untuk teks besar; tingkat AAA menaikkannya menjadi 7:1 dan 4,5:1. Perhitungan ini memakai tingkat terang, bukan warna, sehingga dua warna yang sangat berbeda rona bisa tetap gagal kalau tingkat terangnya mirip.

Rasio kontras hanya salah satu bagian dari aksesibilitas. Alat ini tidak menilai ukuran font, jarak antarbaris, kerapatan teks, atau apakah informasi disampaikan hanya lewat warna saja, padahal semuanya sama pentingnya. Ia juga hanya memeriksa satu pasang warna sekaligus, sementara halaman sungguhan punya banyak pasangan. Lolos di sini berarti kombinasi warna itu memenuhi ambang kontras, bukan berarti seluruh halaman sudah aksesibel.

Semua perhitungan berjalan di browser Anda dan tidak ada yang dikirim ke server.

Berapa rasio kontras yang dibutuhkan?

Untuk WCAG AA: 4,5:1 untuk teks ukuran normal dan 3:1 untuk teks besar. Untuk AAA: 7:1 dan 4,5:1.

Apa yang dihitung sebagai teks besar?

Ukuran 18pt ke atas, kira-kira 24px, atau 14pt tebal, kira-kira 19px.

Kenapa dua warna cerah bisa gagal?

Karena rasio kontras memakai tingkat terang, bukan rona. Dua warna yang sama terangnya akan punya kontras rendah meski ronanya sangat berbeda.

Apakah lolos di sini berarti situs saya aksesibel?

Tidak. Ini hanya memeriksa kontras satu pasang warna. Aksesibilitas juga mencakup ukuran teks, struktur, dan hal lain di luar warna.

Apakah warnanya disimpan?

Tidak. Semuanya dihitung di browser Anda.