Mengapa Rasio Kontras Dibutuhkan

Saat membaca teks, mata Anda membandingkan tingkat terang atau gelap huruf dengan latar belakang. Perbedaan itulah yang disebut kontras. 👀

Satu desainer mengatakan warna terlihat baik, sementara desainer lain menyipitkan mata. Untuk menyelesaikan perbedaan itu, aksesibilitas menggunakan rasio kontras, yaitu satu angka terukur yang dapat diperiksa siapa saja.

Rasio berkisar dari 1:1 hingga 21:1. Hitam di atas putih adalah nilai maksimum, 21:1, sedangkan warna yang sama di atas dirinya sendiri bernilai 1:1 dan sama sekali tidak terlihat.

Perhitungannya didasarkan pada luminans, yaitu kecerahan warna yang dirasakan. Dua rona yang sangat berbeda tetap dapat sulit dibedakan jika tingkat kecerahannya terlalu berdekatan.

Aturan kontras ada karena kemampuan penglihatan berbeda-beda. Pengguna dengan penglihatan rendah, mata lansia, dan pembaca yang lelah semuanya membutuhkan perbedaan yang lebih besar daripada desainer muda di layar yang terang.

Silau matahari, monitor murah, dan ponsel yang diredupkan semuanya mengurangi kontras. Rasio yang tetap terbaca dalam kondisi tersebut membuat teks mudah dibaca di mana saja.

WCAG menetapkan 4.5:1 untuk teks normal sebagai batas minimum berdasarkan penelitian. Nilai ini kira-kira mengakomodasi penglihatan rendah tingkat sedang tanpa memaksa penggunaan hitam dan putih murni.

Teks besar lebih mudah dibaca, sehingga batasnya turun menjadi 3:1. Huruf yang besar dan tebal dapat menggunakan perbedaan kecerahan yang lebih kecil daripada teks isi yang mungil.

Rasio selalu membahas dua warna secara bersamaan. Warna abu-abu tidak dapat disebut terbaca atau tidak terbaca sendirian, melainkan hanya jika dibandingkan dengan permukaan tempatnya berada.

Gagasan yang sama berlaku untuk komponen UI. Garis tepi tombol, ikon, dan garis luar formulir juga membutuhkan kontras yang cukup agar dapat ditemukan pengguna.

Kedua warna ini membentuk rasio sekitar 4.6:1, sedikit melampaui batas teks normal untuk pembacaan yang nyaman.

Anda telah mempelajari bahwa rasio kontras mengubah keterbacaan menjadi satu angka yang objektif, berdasarkan luminans, sehingga teks dapat digunakan oleh semua mata. Selanjutnya: mencapai ambang batas AA. ✅