Ada masalah dengan alat ini?
Tentang «Color Blindness CSS Reference Online»
Alat ini menghasilkan referensi CSS untuk merancang palet warna yang dapat diakses yang bekerja untuk pengguna dengan kekurangan penglihatan warna. Ini menunjukkan bagaimana warna muncul di bawah berbagai jenis buta warna (protanopia, deuteranopia, tritanopia, monokromasi) dan menyarankan alternatif yang lebih aman.
Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk kekurangan penglihatan warna. Merancang hanya untuk penglihatan warna penuh mengecualikan mereka — menggunakan pasangan warna yang aman dan tidak hanya mengandalkan warna (menggunakan bentuk, teks, atau pola juga) membuat desain Anda bekerja untuk semua orang.
Gunakan untuk menguji palet merek, mengaudit desain yang ada untuk masalah aksesibilitas, atau mempelajari pasangan warna mana yang bermasalah sehingga Anda menghindarinya dalam desain masa depan.
Cara memakai alat ini
Cara mendapatkan snippet CSS filter untuk simulasi buta warna
Jalankan tanpa input
Alat ini tidak memiliki kolom input — cukup tekan Run. Ia mengembalikan snippet CSS siap-tempel untuk stylesheet Anda (tanpa konfigurasi lain).
Yang Anda peroleh
Hasil: satu field `css` berisi tiga kelas filter: `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Masing-masing memakai matriks SVG `feColorMatrix` yang mendekati salah satu jenis defisiensi penglihatan warna.
Penggunaan
Tambahkan kelas terkait ke `body` (atau wrapper) untuk melihat desain Anda seperti dilihat ~8% pria dengan buta warna merah-hijau, atau proporsi jauh lebih kecil dengan biru-kuning. Aktifkan/nonaktifkan kelas dari devtools — tanpa rebuild.
Catatan
Ini pendekatan linear; visi warna nyata lebih halus. Alat seperti Sim Daltonism (macOS) atau Coblis memakai model lebih baik. Selalu padukan dengan pemeriksaan kontras WCAG (wcag-contrast-checker-online) — warna jangan jadi satu-satunya pembawa informasi.