Simulator buta warna yang cepat dan privat
Mendesain untuk semua orang berarti memastikan konten visual Anda dapat dilihat dengan jelas oleh orang yang memiliki defisiensi penglihatan warna (CVD). Simulator buta warna ini memungkinkan Anda mengunggah gambar apa pun—baik itu mockup UI, visualisasi data, maupun foto—dan langsung melihat tampilannya di mata penderita buta warna.
Karena alat ini berjalan sepenuhnya di browser web Anda, gambar Anda tidak akan pernah diunggah ke server. Anda dapat dengan aman menguji desain UI rahasia, aset game yang belum dirilis, atau proyek klien yang bersifat privat. Manipulasi piksel terjadi langsung di perangkat Anda, memberikan hasil instan tanpa perlu menunggu proses unggah ke server.
Empat jenis buta warna
Penglihatan warna manusia bergantung pada tiga jenis sel kerucut di mata, yang menyerap cahaya merah, hijau, dan biru. Jika satu atau lebih sel kerucut ini hilang atau tidak berfungsi, persepsi warna akan berubah. Alat ini menyimulasikan empat kategori utama pada tingkat keparahan 1.0 (sel kerucut yang terdampak sama sekali tidak ada):
Protanopia (Buta warna merah) Penderita protanopia tidak memiliki sel kerucut merah. Warna merah terlihat jauh lebih gelap dari biasanya, sering kali berubah menjadi hitam atau cokelat tua, sedangkan hijau, kuning, dan oranye terlihat seperti nuansa kuning yang serupa. Menggunakan simulator protanopia sangat penting saat merancang label peringatan atau status error, karena teks merah terang bisa menjadi hampir tidak terlihat pada latar belakang gelap.
Deuteranopia (Buta warna hijau) Deuteranopia adalah jenis buta warna yang paling umum, disebabkan oleh tidak adanya sel kerucut hijau. Kondisi ini sangat mirip dengan protanopia karena membuat penderitanya sangat sulit membedakan warna merah, hijau, cokelat, dan oranye. Membuat gambar tes deuteranopia adalah salah satu langkah terpenting dalam mengevaluasi desain, terutama untuk hal-hal seperti sistem lampu lalu lintas atau grafik keuangan yang menunjukkan untung dan rugi.
Tritanopia (Buta warna biru) Tritanopia adalah kondisi yang jauh lebih langka di mana sel kerucut biru tidak ada. Penderita tritanopia sulit membedakan biru dengan hijau, serta kuning dengan ungu atau merah muda. Dunia sebagian besar terlihat dalam nuansa merah, cyan, dan merah muda.
Akromatopsia (Monokromasi) Akromatopsia adalah buta warna total. Penderita kondisi ini melihat dunia sepenuhnya dalam format grayscale. Meskipun langka, pengujian akromatopsia adalah pemeriksaan aksesibilitas warna yang paling utama. Jika desain Anda berfungsi dengan baik dalam grayscale murni, berarti desain tersebut mengandalkan kontras dan bentuk, bukan rona warna (hue), sehingga akan dapat diakses oleh hampir semua orang.
Kapan harus menggunakan cek warna aksesibilitas
Hanya mengandalkan warna untuk menyampaikan makna adalah kesalahan desain yang umum. Menguji aset Anda dengan simulator buta warna membantu Anda menemukan masalah ini sebelum dilihat oleh pengguna.
Visualisasi data dan grafik. Grafik garis dan diagram lingkaran sering menggunakan legenda dengan kotak warna yang berbeda. Jika Anda memakai warna merah dan hijau untuk membedakan dua garis, keduanya bisa terlihat sama persis bagi penderita deuteranopia. Menguji grafik membantu Anda mengetahui kapan harus menambahkan pola, mengubah ketebalan garis, atau memberi label langsung.
Antarmuka pengguna dan desain web. Pesan error biasanya berwarna merah, dan pesan sukses berwarna hijau. Jika kolom formulir berubah merah untuk menandakan kesalahan tetapi tidak disertai ikon atau teks penjelasan, pengguna buta warna mungkin tidak menyadari adanya error. Anda bisa menggunakan alat ini bersama Cek Kontras Warna untuk memastikan teks tetap terbaca dan status UI terlihat jelas.
Desain game. Video game sering menggunakan warna untuk membedakan kawan dan lawan, atau menyorot item interaktif. Mensimulasikan screenshot game memastikan elemen penting dalam permainan tidak menyatu dengan latar belakang bagi pemain yang mengalami buta warna (CVD).
Identitas brand. Saat membangun brand baru, penting untuk melihat seberapa jelas logo dan materi pemasaran Anda. Jika Anda perlu mengubah warna brand agar lebih mudah dibedakan, cobalah gunakan Generator Palet Warna untuk membuat kombinasi warna yang lebih aksesibel, atau Color Picker Gambar untuk mengambil sampel dan menyesuaikan warna yang bermasalah dari aset Anda saat ini.
Cara simulator buta warna memproses gambar
Alat ini tidak sekadar menerapkan filter warna biasa. Alat ini menggunakan matriks transformasi yang divalidasi secara ilmiah yang dikembangkan oleh Machado, Oliveira, dan Fernandes (2009).
Untuk menghasilkan simulasi yang akurat, alat ini pertama-tama mengubah piksel sRGB standar gambar Anda menjadi ruang warna RGB linear. Langkah ini sangat penting karena gambar digital standar menggunakan kurva gamma non-linear untuk menyimpan data warna secara efisien. Menerapkan perhitungan buta warna langsung pada piksel non-linear akan menghasilkan simulasi yang tidak akurat dan terlalu gelap. Dengan mengubahnya menjadi cahaya linear, menerapkan matriks Machado, dan mengubahnya kembali ke sRGB, alat ini secara akurat meniru fisika cahaya yang masuk ke mata manusia.
Karena perhitungan piksel demi piksel ini membutuhkan komputasi yang berat, alat ini secara otomatis memperkecil gambar yang sangat besar (membatasi sisi terpanjang pada 1200 piksel). Hal ini memastikan browser dapat memproses perhitungan dan merender keempat simulasi secara instan tanpa menguras memori perangkat atau membuat halaman macet.