Warna dan kontras

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

Sebagai seorang desainer atau pengembang, Anda perlu memahami bagaimana persepsi orang terhadap warna. dan kontras, baik untuk sementara, situasional, atau permanen. Hal ini akan membantu Anda sebaik mungkin mendukung kebutuhan visual mereka.

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

Memahami warna

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

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

Catatan: Di CSS, warna dapat ditentukan dengan banyak cara, seperti menggunakan nama warna, nilai RGB, RGBa, HEX, HSL, HSLa, HSV, atau HSVa. HSLa mirip dengan HSL, hanya nilai alfa yang ditambahkan. Alfa adalah pengukuran opasitas dan didefinisikan sebagai angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya tidak tembus pandang).

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

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

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

Mengukur kontras warna

Untuk membantu mendukung para difabel visual, kelompok WAI membuat formula kontras warna menjadi memastikan ada kontras yang cukup di antara teks dan latar belakangnya. Ketika rasio kontras warna ini diikuti, orang dengan gangguan penglihatan cukup rendah dapat membaca teks di latar belakang tanpa memerlukan teknologi pendukung yang meningkatkan kontras.

Mari kita lihat gambar dengan palet warna yang cerah dan bandingkan bagaimana gambar tersebut akan muncul bagi mereka dengan bentuk kebutaan warna tertentu.

Foto oleh Alexander Grey di Unsplash.

Foto oleh Clark Van Der Beken di Unsplash.

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 green blind) terjadi pada 1% hingga 5% pria, 0,35% hingga 0,1% betina.

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

Protanopia

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

Penderita Protanopia memiliki penurunan sensitivitas terhadap cahaya merah. Filter buta warna ini menyimulasikan tampilan jenis kebutaan warna ini.

Achromatopsia atau Monokromatisme

Achromatopsia atau Monokromatisme (atau kebutaan warna total) sangat jarang terjadi.

Orang dengan Achromatopsia atau Monokromatisme hampir tidak memiliki persepsi warna merah, cahaya hijau, atau biru. Filter buta warna ini mensimulasikan jenis buta warna.

Menghitung kontras warna

Rumus kontras warna menggunakan luminans relatif warna untuk membantu menentukan kontras, yang dapat berkisar dari 1 hingga 21. Rumus ini sering disingkat menjadi [color value]:1. Misalnya, warna hitam murni dengan putih 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 dari 4.5:1 untuk meneruskan persyaratan minimum WCAG 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,5 px tebal. Logo dan elemen dekoratif dikecualikan dari warna ini persyaratan kontras.

Untungnya, tidak diperlukan matematika lanjutan karena ada banyak alat yang akan melakukan perhitungan kontras warna untuk Anda. Alat seperti Adobe Color, Penganalisis Kontras Warna, Leonardo, dan Pemilih warna DevTools Chrome dapat dengan cepat memberitahukan rasio kontras warna dan menawarkan saran untuk membantu membuat pasangan warna dan palet yang paling inklusif.

Menggunakan warna

Tanpa adanya tingkat kontras warna yang baik, kata, ikon, dan elemen grafis elemen tersebut sulit ditemukan, dan desainnya bisa dengan cepat tidak dapat diakses. Namun, penting juga untuk membayar perhatian terhadap cara warna digunakan di layar, karena Anda tidak dapat menggunakan warna saja untuk menyampaikan informasi, tindakan, atau membedakan suatu elemen visual.

Misalnya, jika Anda mengucapkan "klik tombol hijau untuk melanjutkan", tetapi menghilangkan konten atau ID tambahan ke tombol, hal itu akan orang dengan jenis buta warna tertentu untuk mengetahui tombol mana untuk diklik. Demikian pula, banyak grafik, bagan, dan tabel yang menggunakan warna saja untuk menyampaikan tidak akurat atau tidak sesuai. Menambahkan pengenal lain, seperti pola, teks, atau ikon, adalah penting untuk membantu orang 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 pada layar Anda, sebaiknya pertimbangkan untuk menerapkan model kueri media yang menawarkan lebih banyak kontrol 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 menderita fotofobia atau sensitivitas cahaya. Anda juga dapat membuat tema kontras tinggi dengan @prefers-contrast, yang mendukung orang dengan kekurangan warna dan sensitivitas kontras.

Catatan: Ada kueri media dan setelan OS tambahan yang perlu dipertimbangkan untuk aksesibilitas warna, tetapi dukungannya jauh lebih sedikit daripada yang tercantum dalam modul ini. Lihat artikel Mode Tampilan Aksesibilitas Sistem Operasi dan Browser untuk informasi selengkapnya tentang berbagai setelan aksesibilitas OS.

Memilih skema warna

Dukungan Browser

• 76
• 79
• 67
• 12,1

Sumber

Kueri media @prefers-color-scheme memungkinkan pengguna memilih lampu atau versi situs web atau aplikasi bertema gelap yang mereka kunjungi. Anda dapat melihat perubahan tema dengan mengubah pengaturan preferensi terang/gelap Anda dan menavigasi ke browser yang mendukung kueri media ini. Ulas Mac dan Petunjuk Windows untuk mode gelap.

setelan umum macOS untuk tampilan.

Membandingkan mode terang dan gelap.

Mode terang.

Mode gelap.

Lebih memilih kontras

Dukungan Browser

• 96
• 96
• 101
• 14,1

Sumber

@prefers-contrast kueri media memeriksa setelan OS pengguna untuk melihat apakah kontras tinggi diaktifkan atau nonaktif. Anda dapat melihat cara kerja perubahan tema ini dengan mengubah kontras setelan preferensi dan navigasi ke browser yang mendukung kueri media ini (Setelan mode kontras Mac dan Windows).

Bandingkan kontras biasa dan tinggi.

Mode terang, tanpa preferensi kontras.

Mode gelap, preferensi kontras tinggi.

Membuat lapisan kueri media

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

Membandingkan warna dan kontras.

Mode terang, tanpa preferensi kontras.

Mode gelap, tanpa preferensi kontras.

Mode terang, preferensi kontras tinggi.

Mode gelap, preferensi kontras tinggi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang warna dan kontras

Warna saja tidak cukup sebagai pengidentifikasi yang cukup untuk dokumentasi. Apa lagi yang akan membantu pembaca mengidentifikasi elemen UI?

Pola

Kurang tepat. Pola saja tidak cukup untuk membantu pengguna mengidentifikasi elemen UI.

Teks

Kurang tepat. Teks saja mungkin tidak cukup untuk membantu pengguna mengidentifikasi elemen UI.

Ikon

Kurang tepat. Ikon saja tidak cukup untuk membantu pengguna mengidentifikasi elemen UI.

Semua yang di atas

Ya. Dua atau lebih ID akan membantu pengguna mengidentifikasi elemen UI.