Warna dan kontras

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

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

Modul ini akan memperkenalkan beberapa dasar-dasar warna dan kontras yang mudah diakses kepada Anda.

Melihat warna

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

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

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

Saturasi adalah intensitas warna, yang diukur dalam persentase mulai dari 0% hingga 100%. Warna dengan saturasi penuh (100%) akan sangat cerah, sedangkan warna tanpa saturasi (0%) akan berwarna abu-abu atau hitam putih.

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

Mengukur kontras warna

Untuk membantu mendukung penyandang disabilitas penglihatan, grup WAI membuat formula kontras warna untuk memastikan kontras yang cukup ada 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 yang meningkatkan kontras.

Lihat gambar dengan palet warna cerah dan bandingkan bagaimana gambar tersebut akan terlihat oleh orang dengan bentuk buta warna 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 multiwarna yang lebih cerah.

Deuteranopia

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

Orang dengan Deuteranopia memiliki sensitivitas yang berkurang terhadap cahaya hijau. Filter buta warna ini menyimulasikan tampilan jenis buta warna ini.

Protanopia

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

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

Achromatopsia atau Monokromatisme

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

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

Menghitung kontras warna

Formula kontras warna menggunakan luminositas relatif warna untuk membantu menentukan kontras, yang dapat berkisar dari 1 hingga 21. Rumus ini sering disingkat menjadi [color value]:1. Misalnya, hitam murni dengan putih murni memiliki rasio kontras warna terbesar pada 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 normal, termasuk gambar teks, harus memiliki rasio kontras warna 4.5:1 agar lulus persyaratan WCAG minimum untuk warna. Teks berukuran besar dan ikon penting harus memiliki rasio kontras warna 3:1. Teks berukuran besar dicirikan dengan ukuran minimal 18 pt / 24 piksel atau 14 pt/ 18,5 piksel yang dicetak tebal. Logo dan elemen dekoratif dikecualikan dari persyaratan kontras warna ini.

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

Menggunakan warna

Tanpa tingkat kontras warna yang baik, kata-kata, ikon, dan elemen grafis lainnya sulit ditemukan, dan desain dapat dengan cepat menjadi tidak dapat diakses. Namun, Anda juga harus 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 tidak menyertakan konten atau ID tambahan apa pun pada tombol, orang dengan jenis buta warna tertentu akan kesulitan mengetahui tombol mana yang harus diklik. Demikian pula, banyak grafik, diagram, dan tabel hanya menggunakan warna untuk menyampaikan informasi. Menambahkan pengenal lain, seperti pola, teks, atau ikon, sangat penting untuk membantu orang memahami konten.

Meninjau produk digital dalam skala abu-abu 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 lebih banyak kontrol kepada pengguna atas apa yang ditampilkan di layar.

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

Lebih suka skema warna

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

Bandingkan mode terang dan gelap.

Lebih suka kontras

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

Bandingkan kontras reguler dan tinggi.

Kueri media lapisan

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

Bandingkan warna dan kontras.