Cara menggunakan Simulator Buta Warna
- Seret gambar ke area ini, klik untuk memilih file, atau tempel screenshot dengan Ctrl+V.
- Bandingkan gambar asli dengan versi simulasi untuk setiap jenis defisiensi penglihatan warna.
- Perhatikan informasi yang hilang — warna status merah/hijau, seri grafik, dan kondisi error.
- Beralih ke Palette untuk menguji warna brand atau grafik, dan dapatkan peringatan untuk pasangan warna yang menjadi tidak bisa dibedakan.
Apa itu buta warna?
Defisiensi penglihatan warna (CVD) memengaruhi sekitar 1 dari 12 pria dan 1 dari 200 wanita keturunan Eropa Utara. Sebagian besar penderita CVD tetap bisa melihat warna — hanya rentang warnanya yang lebih sempit. Jenis yang umum adalah:
| Jenis | Kerucut yang terpengaruh | Efek |
|---|---|---|
| Deuteranomaly / deuteranopia | Hijau (M) | Merah dan hijau sulit dibedakan — bentuk yang paling umum |
| Protanomaly / protanopia | Merah (L) | Warna merah tampak lebih gelap dan menyatu dengan hijau dan cokelat |
| Tritanomaly / tritanopia | Biru (S) | Kebingungan biru/hijau dan kuning/merah muda — jarang terjadi |
| Achromatopsia | Semua | Tidak bisa melihat warna — sangat jarang, tetapi berguna sebagai uji skala abu-abu |
“-anopia” berarti jenis kerucut tersebut tidak ada; “-anomaly” berarti kerucut itu bergeser, yang merupakan bentuk lebih ringan.
Cara kerja simulasinya
Setiap piksel dikonversi ke RGB linear lalu dikalikan dengan matriks penglihatan warna dari Machado, Oliveira dan Fernandes (2009), model fisiologis yang banyak dipakai — intensitas penuh untuk tipe “-anopia” dan intensitas 60% untuk tipe “-anomaly”. Achromatopsia menggunakan luminansi relatif. Semua proses berjalan di canvas di browser kamu; gambar besar diperkecil menjadi lebar 900px agar lebih cepat.
Mendesain untuk pengguna buta warna
- Jangan hanya mengandalkan warna (WCAG 1.4.1): tambahkan ikon, label, pola, atau teks pada pesan status, error formulir, dan seri grafik.
- Variasikan kecerahan, bukan hanya hue: hijau gelap dan merah terang hampir selalu tetap bisa dibedakan. Konverter OKLCH memudahkan kamu mengatur kecerahan.
- Gunakan palet grafik yang aman untuk buta warna, misalnya biru/oranye, bukan merah/hijau.
- Jaga kontras teks tetap tinggi — cek pasangan warna dengan Contrast Checker.
Simulasi hanya mendekati pengalaman rata-rata; persepsi tiap orang berbeda, jadi menguji dengan pengguna nyata tetap sangat berharga.
Juga dicari sebagai: tes buta warna, colorblind simulator, protanopia, deuteranopia, uji aksesibilitas warna, cek warna buta warna.
Tool yang cocok dipakai bersama Simulator Buta Warna
- Pengecek Kontras APCA — Hitung kontras kecerahan APCA (Lc) antara teks dan latar, lihat untuk penggunaan apa nilainya cocok, lalu bandingkan dengan rasio WCAG 2 yang klasik.
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
- Kompres Gambar — Perkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan pengaturannya.