Warna dan kontras

Pernahkah Anda mencoba membaca teks di layar dan merasa sulit dibaca karena skema warna atau kesulitan melihat layar dalam lingkungan yang sangat terang atau kurang cahaya? Atau, mungkin Anda seseorang dengan masalah penglihatan warna yang lebih permanen, seperti perkiraan 300 juta orang dengan buta warna atau 253 juta orang dengan gangguan penglihatan?

Sebagai desainer atau developer, Anda perlu memahami bagaimana orang mempersepsi warna dan kontras, baik sementara, situasional, atau permanen. Hal ini akan membantu Anda mendukung kebutuhan visual mereka dengan sebaik-baiknya.

Modul ini akan memperkenalkan Anda pada beberapa dasar-dasar warna dan kontras yang dapat diakses.

Memahami warna

Tahukah Anda bahwa objek tidak memiliki warna, tetapi memantulkan panjang gelombang cahaya? Saat melihat warna, mata menerima dan memproses panjang gelombang tersebut dan mengubahnya menjadi warna.

Dalam aksesibilitas digital, kita membahas panjang gelombang ini dalam hal hue, saturasi, dan kecerahan (HSL). Model HSL dibuat sebagai alternatif model warna RGB dan lebih selaras dengan cara manusia mempersepsikan warna.

Hue adalah cara kualitatif untuk mendeskripsikan warna, seperti merah, hijau, atau biru, dengan setiap hue memiliki titik tertentu pada spektrum warna dengan nilai berkisar dari 0 hingga 360, dengan merah di 0, hijau di 120, dan biru di 240.

Saturasi adalah intensitas warna, yang diukur dalam persentase yang berkisar dari 0% hingga 100%. Warna dengan saturasi penuh (100%) akan sangat jelas, sedangkan warna tanpa saturasi (0%) akan menjadi hitam putih atau hitam putih.

Pencahayaan adalah karakter terang atau gelap dari suatu warna, yang diukur dalam persentase mulai dari 0% (hitam) hingga 100% (putih).

Mengukur kontras warna

Untuk membantu mendukung pengguna dengan berbagai disabilitas visual, grup WAI membuat formula kontras warna untuk memastikan ada kontras yang cukup antara teks dan latar belakangnya. Jika rasio kontras warna ini diikuti, orang dengan gangguan penglihatan sedang dapat membaca teks di latar belakang tanpa memerlukan teknologi pendukung peningkatan kontras.

Mari kita lihat gambar dengan palet warna cerah dan bandingkan gambar tersebut akan muncul dengan gambar yang buta warnanya memiliki bentuk tertentu.

Di sebelah kiri, gambar menampilkan pasir pelangi dengan warna ungu, merah, oranye, kuning, hijau aqua, biru muda, dan biru tua. Di sebelah kanan adalah pola pelangi warna-warni yang lebih cerah.

Deuteranopia

Deuteranopia (umumnya dikenal sebagai buta hijau) terjadi pada 1% hingga 5% pria, 0,35% hingga 0,1% wanita.

Penderita Deuteranopia mengalami penurunan sensitivitas terhadap cahaya hijau. Filter buta warna ini menyimulasikan tampilan dari jenis buta warna ini.

Protanopia

Protanopia (umumnya dikenal sebagai buta merah) terjadi pada 1,01% hingga 1,08% pria dan 0,02% hingga 0,03% wanita.

Penderita Protanopia memiliki sensitivitas yang berkurang terhadap cahaya merah. Filter buta warna ini menyimulasikan tampilan dari jenis buta warna ini.

Achromatopsia atau Monokromatisme

Achromatopsia atau Monokromatisme (atau buta warna total) terjadi sangat, sangat jarang.

Penderita Achromatopsia atau Monokromatisme hampir tidak memiliki persepsi terhadap cahaya merah, hijau, atau biru. Filter buta warna ini menyimulasikan tampilan buta warna jenis ini.

Menghitung kontras warna

Formula kontras warna menggunakan luminans relatif warna untuk membantu menentukan kontras, yang dapat berkisar dari 1 hingga 21. Formula ini sering disingkat menjadi [color value]:1. Misalnya, hitam murni terhadap putih murni memiliki rasio kontras warna terbesar di 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

Teks berukuran biasa, termasuk gambar teks, harus memiliki rasio kontras warna 4.5:1 agar memenuhi persyaratan WCAG minimum untuk warna. Teks berukuran besar dan ikon penting harus memiliki rasio kontras warna 3:1. Teks berukuran besar dicirikan dengan setidaknya 18pt / 24px atau 14pt/18,5px tebal. Logo dan elemen dekoratif dikecualikan dari persyaratan kontras warna ini.

Untungnya, tidak diperlukan matematika tingkat lanjut karena ada banyak alat yang akan melakukan penghitungan kontras warna untuk Anda. Alat seperti Adobe Color, Color Contrast Analyzer, Leonardo, dan pemilih warna DevTools di Chrome dapat dengan cepat memberi tahu Anda rasio kontras warna dan menawarkan saran untuk membantu membuat pasangan warna dan palet yang paling inklusif.

Menggunakan warna

Tanpa tingkat kontras warna yang baik, kata, ikon, dan elemen grafis lainnya akan sulit ditemukan, dan desain dapat dengan cepat menjadi tidak dapat diakses. Namun, penting juga untuk memperhatikan cara warna digunakan di layar, karena Anda tidak dapat menggunakan warna saja untuk menyampaikan informasi, tindakan, atau membedakan elemen visual.

Misalnya, jika Anda mengatakan, "klik tombol hijau untuk melanjutkan", tetapi menghilangkan konten atau ID tambahan untuk tombol tersebut, akan sulit bagi orang dengan jenis kebutaan warna tertentu untuk mengetahui tombol mana yang harus diklik. Demikian pula, banyak grafik, diagram, dan tabel menggunakan warna saja untuk menyampaikan informasi. Menambahkan ID lain, seperti pola, teks, atau ikon, sangat penting untuk membantu pengguna memahami kontennya.

Meninjau produk digital Anda dalam hitam putih adalah cara yang baik untuk mendeteksi potensi masalah warna dengan cepat.

Kueri media yang berfokus pada warna

Selain memeriksa rasio kontras warna dan penggunaan warna di layar, Anda harus mempertimbangkan untuk menerapkan kueri media yang semakin populer dan didukung yang menawarkan kontrol lebih besar kepada pengguna atas apa yang ditampilkan di layar.

Misalnya, dengan menggunakan kueri media @prefers-color-scheme, Anda dapat membuat tema gelap, yang dapat berguna bagi orang yang memiliki fotofobia atau sensitivitas cahaya. Anda juga dapat membuat tema kontras tinggi dengan @prefers-contrast, yang mendukung pengguna yang memiliki kekurangan warna dan sensitivitas kontras.

Lebih suka skema warna

Kueri media @prefers-color-scheme memungkinkan pengguna memilih versi bertema terang atau gelap dari situs atau aplikasi yang mereka kunjungi. Anda dapat melihat cara kerja perubahan tema ini dengan mengubah setelan preferensi terang/gelap dan membuka browser yang mendukung kueri media ini. Tinjau petunjuk Mac dan Windows untuk mode gelap.

Lebih suka kontras

Kueri media @prefers-contrast memeriksa setelan OS pengguna untuk melihat apakah kontras tinggi diaktifkan atau dinonaktifkan. Anda dapat melihat penerapan perubahan tema ini dengan mengubah setelan preferensi kontras dan membuka browser yang mendukung kueri media ini (setelan mode kontras Mac dan Windows).

Membuat lapisan kueri media

Anda dapat menggunakan beberapa kueri media yang berfokus pada warna untuk memberikan lebih banyak pilihan kepada pengguna. Dalam contoh ini, kita menumpuk @prefers-color-scheme dan @prefers-contrast bersama-sama.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang warna dan kontras