Pemeriksa kontras warna dan keterbacaan

Keterbacaan adalah perbedaan luminansi antara warna teks dan warna latar belakang. Semakin besar perbedaannya, semakin mudah membaca teks. Kontras yang terlalu rendah membuat konten sulit dibaca — terutama bagi orang dengan gangguan penglihatan, lansia, atau dalam kondisi pencahayaan yang sulit (mis. di ponsel di bawah sinar matahari langsung).

Menurut Organisasi Kesehatan Dunia (WHO), sekitar 2,2 miliar orang di seluruh dunia memiliki beberapa bentuk gangguan penglihatan. Selain itu, jutaan orang memiliki buta warna (sekitar 8% pria dan 0,5% wanita), dan lebih banyak lagi mengalami penurunan penglihatan terkait usia.

Alat ini menghitung rasio kontras menggunakan rumus yang ditentukan dalam WCAG 2.1 (Web Content Accessibility Guidelines) — pedoman aksesibilitas digital internasional. Hasilnya memungkinkan penilaian objektif apakah warna cukup dapat dibaca, terlepas dari pengaturan monitor atau persepsi warna individu.

Alat menampilkan rasio kontras pada skala dari 1:1 (tanpa kontras) hingga 21:1 (kontras maksimum — hitam di atas putih). Hasilnya dibandingkan dengan ambang batas yang didefinisikan dalam standar WCAG:

• Teks normal — memerlukan minimal 4.5:1 untuk Level AA (standar minimum) atau 7:1 untuk Level AAA (standar ditingkatkan). Berlaku untuk teks di bawah 18pt (24px) atau di bawah 14pt (18.5px) tebal.
• Teks besar / tebal — memerlukan minimal 3:1 untuk Level AA atau 4.5:1 untuk Level AAA. Berlaku untuk teks dari 18pt (24px) atau dari 14pt (18.5px) tebal — heading, tombol, highlight.
• Ikon dan elemen UI — memerlukan minimal 3:1 untuk Level AA. Berlaku untuk ikon, tombol, kolom formulir, dan elemen antarmuka lain yang menyampaikan informasi.

Level AA adalah minimum yang diperlukan oleh regulasi aksesibilitas digital di banyak negara, termasuk Petunjuk Aksesibilitas Web UE. Level AAA memberikan keterbacaan lebih baik tetapi tidak selalu praktis untuk dicapai pada semua elemen.

Jika kontras terlalu rendah, Anda tidak perlu mencari warna yang tepat dengan coba-coba. Fitur Cocokkan secara otomatis menemukan varian warna teks yang memenuhi ambang kontras yang dipilih.

Cara kerja pencocokan:

1. Pilih target pencocokan dari daftar — mis. AA untuk teks normal atau AAA untuk teks besar.
2. Klik tombol Cocokkan.
3. Alat akan mencari melalui varian kecerahan warna teks dan menyarankan yang terdekat yang memenuhi persyaratan.
4. Warna yang disarankan dapat disalin ke clipboard atau langsung diatur sebagai warna teks baru.

Algoritma mempertahankan hue dan saturasi warna asli, hanya mengubah kecerahan. Warna yang disarankan tetap konsisten dengan identitas visual sambil memenuhi standar aksesibilitas.

Saya melihat pesan kesalahan format warna

Periksa format warna. Kode HEX harus dimulai dengan # dan berisi 3 atau 6 karakter (mis. #fff atau #ffffff). Untuk format RGB, periksa apakah nilai dipisahkan dengan koma dan berada dalam rentang 0-255.

Fitur Cocokkan tidak menemukan warna yang sesuai

Ketika latar belakang dan teks memiliki kecerahan yang mirip dalam hue yang sama, algoritma mungkin tidak menemukan varian yang memenuhi persyaratan tanpa mengubah hue. Dalam kasus ini, pertimbangkan untuk mengubah warna latar belakang atau memilih warna teks yang sama sekali berbeda.

Warna di color picker tidak sesuai dengan kode yang dimasukkan

Color picker browser hanya mendukung format HEX tanpa transparansi. Jika Anda memasukkan warna dalam format RGBA atau HSLA dengan transparansi, picker akan menampilkan bagian warnanya saja (tanpa alpha). Perhitungan kontras tetap memperhitungkan transparansi.

Buta warna mempengaruhi sekitar 8% pria dan 0,5% wanita. Orang dengan buta warna mungkin kesulitan membedakan pasangan warna tertentu, meskipun kontras luminansi memadai.

Jenis buta warna yang paling umum:

• Deuteranopia — kesulitan membedakan hijau dan merah (bentuk paling umum)
• Protanopia — kesulitan melihat merah
• Tritanopia — kesulitan melihat biru dan kuning (jarang)

Alat ini memeriksa kontras luminansi, yang penting untuk semua pengguna. Namun, saat mendesain, juga disarankan untuk menghindari kombinasi warna yang bermasalah (mis. teks merah pada latar hijau) dan tidak mengandalkan warna saja untuk menyampaikan informasi — gunakan juga bentuk, ikon, dan teks.