Tanpa unggah, 100% lokal, tanpa akun

Simulator Kebutaan Warna

Lihat gambar Anda melalui mata seseorang dengan defisiensi penglihatan warna. Pilih jenisnya, pratinjau, dan unduh hasilnya. Semuanya berjalan di browser Anda.

Cara kerja Simulator kebutaan warna

Color Blindness Simulator menerapkan matriks transformasi warna pada gambar Anda untuk menunjukkan tampilannya bagi orang dengan protanopia (buta merah), deuteranopia (buta hijau), tritanopia (buta biru), atau akromatopsia (kebutaan warna total). Matriks diterapkan piksel demi piksel menggunakan Canvas.getImageData() dan Canvas.putImageData() di browser Anda. Tidak ada data gambar yang dikirimkan ke server.

Simulasi didasarkan pada model perseptual yang dipublikasikan yang berasal dari penelitian tentang defisiensi penglihatan warna. Simulasi adalah perkiraan bagaimana sistem visual seseorang yang terdampak memproses warna, bukan reproduksi pasti dari pengalaman individu yang bervariasi. Alat ini dirancang untuk membantu desainer dan pengembang mengidentifikasi masalah kontras atau pengkodean warna yang akan mempengaruhi sebagian besar audiens mereka: sekitar 8 persen pria dan 0,5 persen wanita memiliki beberapa bentuk defisiensi penglihatan warna.

Ditulis oleh Bastien Sulyan

Cara menggunakan Simulator kebutaan warna, langkah demi langkah

  1. Jatuhkan gambar Anda ke area unggah atau klik untuk mencari.
  2. Pilih jenis defisiensi penglihatan warna dari menu: protanopia, deuteranopia, tritanopia, atau akromatopsia.
  3. Lihat hasil simulasi di samping aslinya di panel perbandingan.
  4. Beralih antara jenis simulasi untuk membandingkan bagaimana setiap kondisi mempengaruhi gambar.
  5. Gunakan tampilan berdampingan untuk mengidentifikasi area di mana warna saja menyampaikan informasi yang mungkin hilang.

Kasus penggunaan umum

  • Seorang desainer UI memeriksa apakah indikator status merah-hijau dapat dibedakan oleh pengguna dengan deuteranopia sebelum merilis fitur.
  • Seorang penulis visualisasi data memverifikasi bahwa bagan multi-garis dengan seri berkode warna tetap dapat dibaca dalam simulasi protanopia.
  • Seorang desainer merek mengevaluasi bagaimana logo dengan warna gradien terbaca di bawah akromatopsia untuk memastikannya mempertahankan bentuk dan kontras yang dapat dikenali.
  • Seorang pengembang game menguji apakah zona peta berkode warna dapat dibedakan oleh pemain dengan tritanopia dan menambahkan isian pola untuk melengkapi pengkodean warna.

Pertanyaan yang sering diajukan

Seberapa akurat simulasi kebutaan warna ini?

Simulasi menerapkan matriks transformasi perseptual yang berasal dari penelitian yang dipublikasikan tentang defisiensi penglihatan warna. Ini adalah perkiraan yang berbasis ilmiah dari kasus tipikal setiap kondisi. Pengalaman individu bervariasi: tingkat keparahan berbeda antar orang dengan diagnosis yang sama, dan simulasi tidak dapat memperhitungkan strategi kompensasi yang dikembangkan beberapa pengguna. Perlakukan keluaran sebagai indikator yang berguna, bukan tes yang pasti.

Apakah alat ini mencakup semua jenis kebutaan warna?

Empat jenis yang dicakup adalah bentuk defisiensi penglihatan warna yang paling umum dan kebutaan warna total. Jenis trikromasi anomalus (protanomali, deuteranomali, tritanomali), yang mewakili defisiensi parsial, tidak dimodelkan secara terpisah dalam versi saat ini.

Apakah gambar saya dianalisis di server untuk menghasilkan simulasi?

Tidak. Transformasi matriks warna dihitung secara lokal menggunakan Canvas.getImageData() untuk membaca array piksel dan Canvas.putImageData() untuk menulis hasilnya. Semua pemrosesan terjadi di dalam tab browser dan data gambar tetap di perangkat Anda.

Bisakah saya menggunakan alat ini untuk memeriksa rasio kontras warna?

Alat ini menunjukkan bagaimana warna terlihat oleh orang dengan defisiensi penglihatan warna tetapi tidak menghitung rasio kontras WCAG secara numerik. Untuk pemeriksaan kontras numerik, gunakan alat Color Converter, yang menyertakan pemeriksa kontras WCAG.

Apakah alat ini bekerja dengan gambar yang berisi teks?

Ya. Transformasi diterapkan ke seluruh array piksel, termasuk teks yang dirender dalam gambar. Ini memungkinkan Anda memeriksa apakah warna teks terhadap latar belakangnya tetap terbaca di bawah setiap kondisi yang disimulasikan.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat gambar