Simulator Buta Warna

Lihat karya Anda melalui mata penderita buta warna

Simulator buta warna ini merender ulang gambar apa pun untuk memperkirakan tampilannya bagi seseorang dengan defisiensi penglihatan warna (CVD). Unggah tangkapan layar, grafik, peta, atau foto — atau gunakan contoh bawaan — lalu beralih di antara protanopia, deuteranopia, tritanopia, dan buta warna total untuk langsung melihat di mana desain Anda terlalu bergantung pada warna semata.

Berbeda dengan ekstensi browser yang hanya mewarnai halaman aktif, simulator buta warna online ini bekerja pada piksel gambar yang Anda pilih, tempelan clipboard, atau umpan webcam langsung — dan mempertahankan resolusi asli penuh, sehingga Anda dapat mengunduh hasil simulasi dengan kualitas yang sama seperti yang Anda masukkan.

Akurat sesuai Machado, dengan slider keparahan

Sebagian besar simulator gratis hanya menampilkan bentuk dikromat penuh (100%), yang melebih-lebihkan cara sebagian besar penderita buta warna sebenarnya melihat. Alat ini menggunakan matriks fisiologis Machado, Oliveira & Fernandes (2009) — model yang sama yang dipakai Chrome DevTools — dan menambahkan slider keparahan 0–100% agar Anda dapat melihat pratinjau trikromasi anomali juga. Deuteranomaly, jenis paling umum, terlihat realistis sekitar 40–60%, sementara 100% memberi Anda deuteranopia penuh yang lebih langka.

Delapan jenis dicakup seluruhnya: protanomaly dan protanopia, deuteranomaly dan deuteranopia, tritanomaly dan tritanopia, achromatopsia, serta blue-cone monochromacy — menjawab pencarian umum tentang '7 jenis buta warna' dan bahkan lebih.

Bandingkan, koreksi, dan periksa

Empat mode tampilan membuat masalah terlihat jelas. Single menampilkan satu jenis layar penuh; slider split-compare menyapu antara gambar asli dan simulasi; grid semua jenis merender setiap jenis CVD dari satu unggahan sekaligus; dan webcam langsung mensimulasikan umpan kamera Anda secara real time. Arahkan kursor ke gambar untuk memakai eyedropper bawaan dan membaca warna asli versus warna hasil simulasi pada piksel mana pun.

Aktifkan Daltonize untuk melihat pratinjau versi gambar yang telah dikoreksi untuk CVD, di mana warna-warna yang biasanya menyatu didorong menjauh ke kanal-kanal yang masih dapat dibedakan oleh penderita buta warna — fitur yang tidak ditawarkan sebagian besar simulator gratis.

Periksa keamanan palet warna

Desainer tidak selalu memiliki tangkapan layar yang siap, jadi pemeriksa palet bawaan memungkinkan Anda menempelkan kode hex (misalnya #e11d48 dan #16a34a) dan melihat setiap contoh warna berdampingan di bawah penglihatan normal dan setiap jenis CVD. Jika 'merah error' dan 'hijau sukses' Anda berubah menjadi nada keruh yang sama bagi penderita deuteranopia, Anda akan langsung melihatnya — dan tahu bahwa Anda perlu menambahkan ikon atau label.

Ini cara tercepat untuk menjawab 'apakah palet saya ramah buta warna?' tanpa meninggalkan halaman atau menginstal apa pun.

Privat by design — tidak ada yang diunggah

Setiap transformasi berjalan secara lokal pada canvas HTML, sehingga gambar, palet, dan aliran webcam Anda tidak pernah meninggalkan perangkat. Tidak ada server, tidak ada akun, dan tidak ada batasan ukuran berkas dari kami. Ini kontras yang disengaja dengan simulator yang mengunggah berkas Anda atau menciutkannya ke 800px sebelum diproses — mockup Anda yang belum dirilis tetap menjadi milik Anda.

Gunakan sebagai pemeriksaan cepat defisiensi penglihatan warna sebelum Anda merilis: jalankan grafik, dasbor, infografik, status lampu lalu lintas, dan palet merek melalui jenis merah-hijau yang umum, perbaiki apa pun yang hanya bergantung pada rona, dan rilis sesuatu yang benar-benar dapat dibaca oleh sekitar 1 dari 12 pria.

Perbandingan dengan Coblis, Color Oracle, dan DaltonLens

Coblis (coblis.com) adalah simulator buta warna gratis paling terkenal. Ia bekerja dengan mengunggah gambar Anda ke server eksternal, yang menjadi risiko privasi untuk desain UI dan fotografi yang belum dirilis. Ia juga tidak memiliki slider keparahan — Anda hanya dapat melihat versi dikromat penuh 100%. Color Oracle adalah aplikasi desktop gratis untuk Windows dan Mac yang menampilkan overlay simulasi buta warna pada seluruh layar Anda, tetapi ia memerlukan instalasi perangkat lunak, tidak berjalan di perangkat seluler, dan tidak dapat mensimulasikan trikromasi anomali (keparahan parsial). DaltonLens (daltonlens.org) menawarkan library Python dan alat browser — sangat baik untuk peneliti, tetapi teknis dan kurang cocok bagi desainer yang menginginkan pemeriksaan visual cepat.

Alat ini mengatasi ketiga kekurangan tersebut: tanpa unggah ke server (lokal di canvas), slider keparahan 0–100% untuk simulasi trikromasi anomali yang realistis, tanpa instalasi, berjalan di perangkat apa pun termasuk iPhone dan Android, serta menambahkan keluaran daltonisasi dan pemeriksa palet dalam satu halaman yang sama. Semua fitur ini gratis tanpa perlu akun — sesuatu yang membedakan UtiloKit dari platform aksesibilitas yang mengenakan biaya untuk rangkaian simulasi CVD lengkap.

Panduan, bukan diagnosis

Simulasi ini memodelkan tampilan rata-rata setiap defisiensi; penglihatan warna nyata bervariasi dari orang ke orang, dan simulator tidak akan pernah dapat mereproduksi persis apa yang dilihat seseorang. Ini adalah alat desain dan aksesibilitas, bukan perangkat medis — jika Anda ingin menguji penglihatan Anda sendiri, temui profesional perawatan mata untuk penilaian penglihatan warna yang layak seperti tes Ishihara atau anomaloskop.

Biologi penglihatan warna: kerucut, rasio, dan apa yang sebenarnya rusak

Penglihatan warna manusia bergantung pada tiga kelas fotoreseptor di retina, masing-masing disetel ke bagian berbeda dari spektrum tampak. Kerucut S (panjang gelombang pendek) memuncak sekitar 420 nm — yang secara longgar kita sebut biru. Kerucut M (panjang gelombang menengah) memuncak sekitar 530 nm — hijau. Kerucut L (panjang gelombang panjang) memuncak dekat 560 nm — merah. Yang penting, persepsi warna bukan tentang sinyal absolut dari satu jenis kerucut; melainkan rasio stimulasi di ketiga kerucut yang ditafsirkan korteks visual sebagai rona. Cahaya murni 560 nm memicu kerucut L lebih dari kerucut M, dan nyaris tidak menyentuh kerucut S — rasio itu terbaca sebagai merah. Ubah rasio dengan menambahkan panjang gelombang lain dan otak melihat warna berbeda, meski kecerahan totalnya identik.

Sistem berbasis rasio inilah yang membuat defisiensi penglihatan warna begitu spesifik mengganggu. Monochromacy — hanya satu jenis kerucut fungsional, atau tidak sama sekali — menghasilkan buta warna total karena tidak ada rasio untuk dihitung; hanya kecerahan yang tersisa. Ia memengaruhi sekitar 1 dari 30.000 orang dan sering disertai sensitivitas cahaya parah serta ketajaman visual yang menurun. Dichromacy adalah kehilangan satu kelas kerucut penuh, menyisakan dua yang utuh — otak masih memiliki rasio tetapi satu dimensi alih-alih dua dimensi, meruntuhkan ruang warna yang kaya menjadi satu garis rona yang membingungkan. Trikromasi anomali adalah bentuk yang paling umum: ketiga jenis kerucut ada, tetapi salah satunya memiliki puncak sensitivitas yang bergeser, sehingga rasio masih bekerja tetapi dengan pemisahan yang berkurang antara dua sumbu — warna dekat sumbu kerucut yang bergeser menjadi sulit dibedakan.

Implikasi praktis untuk desain adalah bahwa kebingungan warna bukanlah gangguan acak. Setiap jenis defisiensi menyebabkan kebingungan sepanjang sumbu spesifik dalam ruang rona. Defisiensi protan dan deutan meruntuhkan sumbu merah-hijau; defisiensi tritan meruntuhkan sumbu biru-kuning. Warna yang terletak jauh dari sumbu tersebut — kombinasi navy-di-atas-putih berkontras tinggi, misalnya — tetap terlihat sempurna oleh hampir setiap pengguna terlepas dari jenis CVD.

Jenis defisiensi penglihatan warna secara rinci

Protanopia adalah ketiadaan total kerucut L. Karena kerucut L biasanya berkontribusi pada kecerahan yang dipersepsikan selain rona, merah tampak tidak hanya mirip rona dengan hijau tetapi juga jauh lebih gelap — ikon peringatan merah pada latar gelap bisa menjadi hampir tak terlihat. Protanomaly adalah bentuk parsial (kerucut L bergeser alih-alih hilang) dan memengaruhi sekitar 1% pria; kebingungannya mirip protanopia tetapi lebih ringan. Deuteranopia — kerucut M hilang — adalah bentuk dikromat paling umum, memengaruhi sekitar 1% pria; merah, oranye, hijau, dan cokelat semuanya menyatu ke arah kuning-khaki keruh, tetapi kecerahan lebih sedikit terpengaruh dibanding protanopia karena kerucut M lebih sedikit berkontribusi pada persepsi luminansi. Deuteranomaly (kerucut M bergeser) adalah jenis paling lazim, memengaruhi sekitar 5–6% pria: ruang warna terkompresi alih-alih terbelah, sehingga pembedaan mungkin dilakukan tetapi tidak dapat diandalkan pada kontras rendah atau ukuran kecil.

Tritanopia — kerucut S hilang — menyebabkan kebingungan biru-kuning: biru bergeser ke arah hijau, kuning ke arah merah muda atau abu-abu. Ia tidak terkait jenis kelamin, memengaruhi pria dan wanita secara setara, dan langka pada sekitar 1 dari 10.000. Tritanomaly adalah bentuk parsialnya. Kedua jenis tritan juga terkait dengan penuaan (lensa menguning, menyerap panjang gelombang pendek) dan efek samping obat tertentu, artinya mereka dapat diperoleh alih-alih diwariskan — poin yang sering terlewat dalam diskusi aksesibilitas. Achromatopsia (rod monochromacy) adalah bentuk paling parah: sistem kerucut sebagian besar tidak berfungsi, menyisakan penglihatan dalam nuansa abu-abu dengan fotofobia signifikan dan ketajaman berkurang. Blue-cone monochromacy adalah bentuk hampir total terkait-X yang sangat mirip di mana hanya kerucut S yang berfungsi; ini lebih langka lagi.

Memahami jenis-jenis spesifik penting untuk keputusan desain. Kegagalan merah-hijau (protan dan deutan) memengaruhi sekitar 1 dari 12 pria, menjadikannya kepedulian aksesibilitas yang dominan. Kegagalan tritan memengaruhi jauh lebih sedikit orang tetapi layak disimulasikan untuk dasbor padat data yang menggunakan biru/kuning sebagai pasangan data utama. Achromatopsia memengaruhi minoritas ekstrem tetapi cukup parah untuk dipertimbangkan dalam audit aksesibilitas apa pun.

Genetika dan epidemiologi: mengapa pria jauh lebih terpengaruh

Gen yang mengode L-opsin dan M-opsin — fotopigmen kerucut L dan M — terletak pada kromosom X. Karena pria hanya membawa satu kromosom X (XY), satu salinan cacat dari salah satu gen opsin sudah cukup menyebabkan buta warna merah-hijau. Wanita (XX) membutuhkan salinan cacat pada kedua kromosom X, sehingga jauh lebih sering menjadi pembawa daripada terpengaruh. Hasilnya adalah asimetri epidemiologi yang mencolok: sekitar 8% pria dan hanya 0,5% wanita pada populasi keturunan Eropa memiliki suatu bentuk CVD merah-hijau — rasio kira-kira 16:1. Angkanya agak lebih rendah pada populasi Afrika dan Asia Timur, kemungkinan karena perbedaan frekuensi historis varian gen opsin. Defisiensi tritan, sebaliknya, bersifat autosomal (kromosom 7) dan memengaruhi pria dan wanita dengan angka hampir setara.

Defisiensi penglihatan warna yang diperoleh menambahkan dimensi lain. Neuritis optik, glaukoma, dan retinopati diabetik semuanya dapat menurunkan pembedaan warna, begitu pula beberapa obat — termasuk antihistamin tertentu, sildenafil (obat disfungsi ereksi memengaruhi jalur fosfodiesterase di kerucut), dan etambutol (dipakai untuk mengobati tuberkulosis). Ini berarti buta warna bukan sifat tetap yang terbatas pada minoritas genetik; ia adalah spektrum yang melebar seiring usia dan penyakit. Mendesain untuk buta warna karenanya juga melayani pengguna lanjut usia yang penguningan lensanya mengurangi transmisi panjang gelombang pendek, serta pengguna mana pun yang mengonsumsi obat terkait.

Sejumlah tokoh terkenal telah mengungkapkan defisiensi penglihatan warna, yang membantu menghilangkan stereotip buta warna sebagai gangguan parah: Mark Zuckerberg dilaporkan mengalami deuteranopia (alasan palet Facebook sangat didominasi biru), John Legend telah membahas buta warnanya secara terbuka, dan tokoh sejarah termasuk Mark Twain dan Paul Newman diyakini mengalami CVD. Sebagian besar penderita buta warna hidup dan bekerja tanpa keterbatasan berarti — masalah utama muncul ketika antarmuka, grafik, atau sistem keselamatan dirancang tanpa mempertimbangkan mereka.

Mendesain untuk defisiensi penglihatan warna: aturan, palet, dan WCAG

Prinsip mendasar desain warna yang aksesibel sederhana: jangan pernah hanya mengandalkan warna untuk menyampaikan informasi. Makna apa pun yang dikodekan murni dalam rona — lencana error merah vs. lencana sukses hijau, grafik dengan garis berkode warna saja, peta dengan wilayah berkode warna saja — menjadi ambigu atau tak terlihat bagi sebagian besar audiens Anda. Perbaikannya selalu menambahkan kanal sekunder: bentuk, pola, label, ikon, atau tekstur. Status sukses berkomunikasi andal ketika membawa warna hijau dan ikon tanda centang; grafik garis berkomunikasi andal ketika setiap seri memakai warna berbeda dan gaya garis berbeda (solid, putus-putus, titik-titik) atau bentuk penanda (lingkaran, kotak, segitiga).

Pasangan warna terburuk dalam desain antarmuka adalah merah dan hijau yang dipakai sebagai status berlawanan — sukses/error, lulus/gagal, jalan/berhenti — karena memetakan langsung ke sumbu kebingungan protan dan deutan yang memengaruhi 8% pengguna pria. Oranye-versus-biru atau magenta-versus-teal adalah pengganti yang lebih aman. Untuk visualisasi data, palet Okabe-Ito — dikembangkan khusus untuk figur ilmiah — menggunakan delapan warna yang tetap dapat dibedakan di bawah protanopia, deuteranopia, dan tritanopia sekaligus: hitam, oranye (#E69F00), biru langit (#56B4E9), hijau kebiruan (#009E73), kuning (#F0E442), biru (#0072B2), vermilion (#D55E00), dan ungu kemerahan (#CC79A7). Palet colorblind Tableau dan palet Design Language IBM mengikuti prinsip serupa.

WCAG 1.4.1 — Use of Color (Level A, tingkat kepatuhan minimum) secara eksplisit menyatakan bahwa warna tidak boleh dipakai sebagai satu-satunya sarana visual untuk menyampaikan informasi, menunjukkan tindakan, mendorong respons, atau membedakan elemen visual. Ini adalah persyaratan keras untuk situs web atau aplikasi apa pun yang dapat diakses publik, bukan sekadar saran praktik terbaik. Padukan dengan WCAG 1.4.3 (rasio kontras ≥ 4,5:1 untuk teks normal) dan Anda mencakup baik sumbu pengkodean warna maupun sumbu kontras luminansi dari aksesibilitas warna. Menjalankan UI Anda melalui simulator ini sebelum rilis adalah cara tercepat menangkap kegagalan 1.4.1 yang tidak dapat dideteksi pemeriksa kontras otomatis — karena pemeriksa kontras mengukur selisih luminansi, bukan kebingungan rona.