Simulator Buta Warna
Lihat bagaimana gambar dan warna terlihat oleh orang dengan defisiensi penglihatan warna.
Jenis buta warna
Protanopia (~1% pria) · tidak ada cone merah. Merah tampak gelap, sulit dibedakan dari hijau.
Deuteranopia (~1% pria) · tidak ada cone hijau. Bentuk paling umum. Hijau dan merah tampak serupa.
Tritanopia (~0,003%) · tidak ada cone biru. Biru tampak kehijauan, kuning tampak merah muda.
Akromatopsia (~0,003%) · tidak ada penglihatan warna. Semuanya tampak dalam skala abu-abu.
Protanomali / Deuteranomali / Tritanomali · versi parsial dari yang sebelumnya, dengan sensitivitas berkurang (tetapi tidak hilang).
Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk defisiensi penglihatan warna.
Mengapa Merancang untuk Defisiensi Penglihatan Warna Itu Penting
Defisiensi penglihatan warna (CVD) adalah hal yang umum. Institut Mata Nasional AS melaporkan bahwa sekitar 1 dari 12 pria memiliki beberapa bentuk CVD; wanita terpengaruh dengan tingkat yang jauh lebih rendah karena bentuk yang paling umum diwarisi melalui gen resesif terkait-X. Secara keseluruhan, populasi global dengan beberapa tingkat CVD mencapai ratusan juta orang. Setiap desain yang menghadap pengguna yang mengandalkan merah dan hijau untuk menyampaikan makna (indikator error vs sukses, grafik, status pills, pesan validasi) akan gagal bagi sebagian pengguna yang signifikan kecuali warna dipasangkan dengan isyarat lain.
Ini juga merupakan persyaratan aksesibilitas formal. WCAG 2.2 Success Criterion 1.4.1 («Use of Color»), Level A menyatakan aturan tersebut secara langsung: «Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.» Level A adalah standar kesesuaian WCAG terendah; gagal memenuhinya berarti situs tidak hanya tidak dapat diakses tetapi juga tidak sesuai hukum di yurisdiksi yang mewajibkan kesesuaian WCAG (US Section 508, EU Accessibility Act, UK Equality Act).
Delapan Bentuk CVD
Penglihatan warna manusia bergantung pada tiga jenis fotoreseptor kerucut: kerucut-L (panjang gelombang panjang, puncak sekitar merah), kerucut-M (panjang gelombang menengah, puncak sekitar hijau), dan kerucut-S (panjang gelombang pendek, puncak sekitar biru-violet). Setiap bentuk CVD berkaitan dengan salah satu kerucut ini yang tidak ada (-anopia) atau bergeser sensitivitasnya (-anomaly).
| Bentuk | Kerucut yang terpengaruh | Efek visual |
|---|---|---|
| Protanopia | Kerucut-L tidak ada | Merah tampak gelap; merah dan hijau dapat membingungkan. |
| Protanomaly | Kerucut-L bergeser | Sensitivitas merah berkurang; kebingungan merah-hijau parsial. |
| Deuteranopia | Kerucut-M tidak ada | Hijau dan merah terlihat mirip. |
| Deuteranomaly | Kerucut-M bergeser | Bentuk CVD yang paling umum, sensitivitas hijau berkurang, kebingungan merah-hijau ringan hingga sedang. |
| Tritanopia | Kerucut-S tidak ada | Biru tampak kehijauan, kuning tampak kemerahan. Sangat langka. |
| Tritanomaly | Kerucut-S bergeser | Diskriminasi biru-kuning berkurang. |
| Achromatopsia | Semua kerucut tidak ada | Ketiadaan penglihatan warna total; dunia tampak dalam skala abu-abu. Sering disertai sensitivitas cahaya dan ketajaman visual yang berkurang. |
| Achromatomaly | Semua kerucut terganggu | Diskriminasi warna yang sangat berkurang di seluruh spektrum. |
Deuteranomaly adalah bentuk yang paling umum karena gen fotopigmen kerucut-L dan kerucut-M berdekatan pada kromosom X dan hanya berbeda beberapa asam amino. Mutasi kecil dengan mudah menggeser puncak sensitivitas kerucut-M lebih dekat ke kerucut-L, mengurangi kemampuan otak untuk membedakan antara merah dan hijau.
Mengapa Pria Lebih Sering Terpengaruh
Gen fotopigmen kerucut-L (OPN1LW) dan kerucut-M (OPN1MW) keduanya berada di kromosom X. Pria hanya mewarisi satu X (dari ibunya); wanita mewarisi dua (satu dari setiap orang tua). Agar defisiensi resesif dapat diekspresikan, seorang wanita membutuhkan gen yang defisien di kedua kromosom X, sementara pria hanya membutuhkannya di satu X-nya. Aritmatika ini menghasilkan perbedaan prevalensi sekitar 10× antara pria dan wanita untuk CVD merah-hijau secara khusus. Gen kerucut-S ada di kromosom 7 dan bersifat autosomal; tritanopia dan tritanomaly memengaruhi pria dan wanita dengan tingkat yang serupa, tetapi kedua bentuk ini sangat langka untuk memulainya.
Persyaratan Kontras WCAG Juga Berlaku
Di luar SC 1.4.1, WCAG juga menetapkan rasio kontras minimum untuk teks dan komponen UI, semuanya diukur terhadap pasangan warna yang benar-benar terlihat:
- SC 1.4.3 Contrast (Minimum), Level AA: minimal 4,5:1 untuk teks badan normal, 3:1 untuk teks besar atau tebal.
- SC 1.4.6 Contrast (Enhanced), Level AAA: 7:1 untuk teks normal, 4,5:1 untuk teks besar.
- SC 1.4.11 Non-text Contrast, Level AA: 3:1 untuk komponen UI dan objek grafis (batas tombol, indikator fokus, garis ikon).
Gunakan simulator ini bersama pemeriksa kontras. Dua warna dapat memiliki rasio kontras 4,5:1 yang sempurna dalam penglihatan normal dan masih tidak dapat dibedakan oleh deuteranope. Simulator menangkap mode kegagalan kedua yang tidak terdeteksi oleh pemeriksaan kontras murni.
Jebakan Desain Umum dan Perbaikannya
- Indikator status merah / hijau untuk sukses vs error. Padukan dengan ikon (✗ / ✓), label teks, atau bentuk yang berbeda. Jangan pernah mengandalkan rona saja.
- Tautan berwarna tanpa garis bawah. Banyak pengguna CVD tidak dapat membedakan tautan berwarna dari teks isi di sekitarnya. Tambahkan garis bawah, perubahan ketebalan font, atau keduanya.
- Diagram batang yang diwarnai hanya berdasarkan kategori. Tambahkan pola, label langsung, atau gunakan palet yang aman untuk buta warna (Viridis, Cividis, Magma, Okabe-Ito, set CVD-safe ColorBrewer).
- Peta panas dengan gradien merah→hijau. Beralih ke palet yang seragam secara perseptual, Viridis Matplotlib (default sejak 2017) dan Cividis (Nuñez et al, 2018, dirancang khusus untuk penderita CVD) keduanya aman.
- Validasi formulir hanya dengan teks merah. Padukan dengan ikon, pesan error yang eksplisit, dan perubahan garis tepi field yang terlihat.
- Instruksi «Klik tombol hijau». Rujuk pada posisi atau label, bukan warna.
- Kunci peta dengan rona yang serupa. Peta choropleth dengan skala merah-oranye-kuning dapat runtuh menjadi dua warna yang tidak dapat dibedakan di bawah deuteranopia. Gunakan skala satu rona (terang hingga biru tua) atau palet divergen yang aman untuk CVD.
- Kode warna desain game. Secara terkenal, Pokémon Crystal Apricorns awal dan PokéStop berkode warna asli di Pokémon GO menyajikan keputusan merah-hijau yang tidak dapat dipecahkan oleh banyak pemain CVD.
Palet yang Aman untuk Buta Warna
- Viridis: Palet sekuensial default Matplotlib sejak 2017. Seragam secara perseptual di seluruh penglihatan normal dan CVD.
- Cividis: Dirancang khusus untuk penderita CVD (Nuñez, Anderton & Renslow, PLOS ONE 2018). Mempertahankan jarak perseptual yang seragam bahkan dengan deuteranopia atau protanopia yang disimulasikan.
- ColorBrewer: Palet Cynthia Brewer untuk kartografi. Situs ini secara eksplisit menandai varian yang aman untuk CVD untuk data sekuensial, divergen, dan kualitatif.
- Okabe-Ito: Palet kualitatif delapan warna yang dirancang oleh Masataka Okabe dan Kei Ito untuk aksesibilitas dalam penerbitan ilmiah. Palet yang direkomendasikan untuk data kategoris dengan hingga 8 kategori.
DevTools Browser Juga Memiliki Simulator CVD
Baik Chrome maupun Edge DevTools memiliki opsi «Emulate vision deficiencies» bawaan (di tab Rendering) yang dapat mensimulasikan protanopia, deuteranopia, tritanopia, dan achromatopsia di seluruh viewport. Firefox's Accessibility Inspector memperlihatkan simulator serupa. Keduanya sangat baik untuk audit seluruh halaman selama ulasan desain; alat satu warna ini melengkapinya dengan mengisolasi satu swatch pada satu waktu sehingga Anda dapat membuat keputusan palet tanpa bagian halaman lainnya membingungkan perbandingan.
Tes Diagnostik yang Mungkin Pernah Anda Dengar
- Lembar Ishihara (Shinobu Ishihara, 1917), lembar titik berwarna terkenal dengan angka tersembunyi. Standar dalam pengaturan klinis untuk skrining defisiensi merah-hijau.
- Tes Farnsworth-Munsell 100-Hue: susun kap dalam urutan rona yang berkesinambungan. Menguji diskriminasi halus, bukan hanya kehadiran ya/tidak dari CVD.
- Anomaloskop: sesuaikan campuran merah-hijau untuk mencocokkan referensi kuning. Digunakan untuk klasifikasi klinis jenis dan tingkat keparahan CVD.
Alat ini bukan diagnostik, melainkan mensimulasikan bagaimana warna tertentu muncul bagi seseorang dengan berbagai bentuk CVD sehingga Anda dapat merancang sesuai, bukan menguji penglihatan seseorang.
Kesalahan Umum
- Memperlakukan CVD sebagai masalah khusus. Satu dari 12 pria adalah proporsi yang signifikan dari basis pengguna produk konsumen mana pun, dan sebagian besar dari mereka tidak pernah melaporkannya karena mereka telah mengatasi hambatan itu sepanjang hidup mereka.
- Menganggap «dark mode» atau «high contrast» sudah mencakupnya. Kontras dan CVD adalah dua hal yang independen. Palet kontras tinggi masih dapat mengandalkan perbedaan merah-hijau yang gagal.
- Hanya menguji dengan deuteranopia. Deuteranopia adalah bentuk yang paling umum tetapi bukan satu-satunya; protanopia, tritanopia, dan varian -anomaly parsial semuanya menghasilkan kebingungan yang berbeda. Coba semuanya.
- Hanya menggunakan simulator, mengabaikan pemeriksa kontras. Palet bisa aman untuk CVD tetapi tetap gagal memenuhi minimum kontras WCAG 1.4.3. Gunakan kedua alat.
- Memilih warna berdasarkan nama alih-alih jarak yang dirasakan. «Merah, hijau, dan biru» terdengar jaraknya berjauhan; dalam CVD bisa runtuh menjadi «gelap, gelap, biru.» Uji swatch yang sebenarnya.
Pertanyaan yang Sering Diajukan
Seberapa akurat simulasinya?
Simulasi CVD adalah perkiraan, bukan rendering yang sempurna. Algoritma standar (metode Brettel, Viénot & Mollon 1997, disempurnakan oleh Viénot 1999 dan Machado et al 2009) memproyeksikan warna ke «line of confusion» untuk kerucut yang hilang atau bergeser dalam ruang warna LMS. Hasilnya adalah apa yang akan dilihat oleh seseorang dengan dikromasi penuh secara rata-rata, tetapi pengguna CVD nyata bervariasi secara individual; otak mengkompensasi dengan isyarat dari luminansi, konteks, dan pengalaman sebelumnya yang tidak dapat direplikasi oleh simulasi statis.
Apakah gambar atau warna saya dikirim ke mana pun?
Tidak. Simulasi berjalan sepenuhnya di browser Anda menggunakan elemen canvas untuk menerapkan transformasi warna per piksel. Tidak ada yang diunggah, dicatat, atau disimpan. Ini penting ketika gambar yang Anda uji adalah mockup desain yang belum dirilis, tangkapan layar UI rahasia, atau apa pun yang tidak ingin Anda bagikan ke pihak ketiga.
Haruskah saya merancang untuk semua delapan bentuk CVD?
Dalam praktiknya, merancang untuk bentuk yang paling umum (deuteranopia dan deuteranomaly) mencakup sebagian besar pengguna. Menambahkan pemeriksaan terhadap protanopia mencakup sebagian besar sisanya. Tritanopia dan tritanomaly cukup langka sehingga memenuhi uji deutan/protan biasanya sudah cukup, meskipun desain yang dapat diakses dengan baik yang tidak mengandalkan rona sama sekali (dipasangkan dengan ikon, pola, atau label) mencakup semua orang secara otomatis.
Palet saya saat ini memiliki kata «CVD-safe» dalam namanya. Apakah saya masih perlu menguji?
Ya. «CVD-safe» biasanya berarti warna kategori palet dapat dibedakan di bawah simulasi, tetapi begitu Anda menyusun antarmuka nyata (teks di atas latar berwarna, ikon di atas isian, status hover yang digeser 5% kecerahan) Anda dapat memperkenalkan kembali kebingungan. Uji pasangan warna yang Anda susun, bukan hanya palet sumber.
Apa perbedaan antara protanopia dan protanomaly?
Protanopia adalah ketiadaan fotopigmen kerucut-L (merah), orang yang terpengaruh tidak memiliki sensitivitas merah yang fungsional sama sekali. Protanomaly adalah pergeseran puncak sensitivitas kerucut-L daripada ketiadaannya, orang yang terpengaruh memiliki diskriminasi merah yang berkurang tetapi tidak nol. Pola yang sama untuk deutera-/deuter- dan trita-/triton-: -anopia adalah bentuk yang kuat, -anomaly adalah bentuk parsial.
Apakah kacamata koreksi warna (EnChroma) benar-benar berfungsi?
Bagi banyak orang dengan defisiensi merah-hijau, ya, kacamata tersebut memperlebar celah yang dirasakan antara merah dan hijau tertentu dengan menyaring panjang gelombang tumpang tindih tertentu antara kerucut-L dan kerucut-M. Kacamata tersebut tidak «menyembuhkan» CVD atau membuat dikromat melihat warna normal; situasi fotopigmen tidak berubah. Efektivitas bervariasi menurut individu dan kondisi pencahayaan; siang hari di luar ruangan cenderung menjadi situasi di mana kacamata tersebut paling membantu.