Panduan Palet Ramah Buta Warna — Aturan Praktis untuk Desainer dan Pengembang

Membandingkan palet Okabe-Ito dan Paul Tol dengan simulasi protan, deutan, dan tritan, serta merangkum aturan desain yang tidak bergantung pada warna: kontras kecerahan, pengodean ganda, dan kriteria WCAG.

Jika sekitar 1 dari 12 laki-laki (keturunan Eropa) mengalami gangguan penglihatan warna merah-hijau, sebagian orang yang melihat grafik, peta, atau dasbor Anda pasti memiliki buta warna parsial. Kabar baiknya, cukup dengan beberapa aturan, sebagian besar masalah akan hilang.

Aturan 1 — Jangan sampaikan informasi hanya dengan warna

Kriteria keberhasilan 1.4.1 “Use of Color” dalam standar aksesibilitas web WCAG menetapkan bahwa warna tidak boleh menjadi satu-satunya sarana visual untuk menyampaikan informasi. Kolom input yang salah diberi ikon dan teks selain bingkai merah, dan garis grafik diberi bentuk, garis putus-putus, atau label langsung selain warna.

Aturan 2 — Pastikan ada beda kecerahan

Meskipun mengalami gangguan penglihatan warna, orang tetap mudah melihat beda kecerahan. Pilih warna yang harus dibedakan dengan kecerahan (value) yang jelas berbeda. Cara paling mudah mengeceknya adalah melihat apakah warnanya masih bisa dibedakan saat dicetak hitam-putih.

Aturan 3 — Hindari pasangan merah-hijau, gunakan biru-oranye

“Baik = hijau, buruk = merah” adalah kesalahan paling umum. Bagi protan maupun deutan, keduanya tampak sebagai oker yang mirip. Jika butuh kontras dua kategori, biru ↔ oranye adalah pilihan paling aman.

Palet yang teruji

Palet “Color Universal Design” yang diusulkan Okabe dan Ito terdiri dari 8 warna yang dipilih agar tetap dapat dibedakan oleh orang dengan gangguan penglihatan warna merah-hijau. Tabel di bawah menampilkan warna yang sama setelah diubah dengan simulasi dikromasi (Machado 2009, tingkat 100%).

Palet Okabe–Ito (8 warna) — tiap baris menyimulasikan warna yang sama untuk setiap jenis
Penglihatan warna normal	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Dikromasi protan	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Dikromasi deutan	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Dikromasi tritan	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

Palet “bright” dari Paul Tol juga disusun dengan mempertimbangkan gangguan penglihatan warna sekaligus cetak hitam-putih.

Palet Paul Tol bright (7 warna)
Penglihatan warna normal	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Dikromasi protan	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Dikromasi deutan	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Dikromasi tritan	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

Sebaliknya, kombinasi merah, hijau, dan oranye bersaturasi tinggi yang sering dipakai saling tumpang tindih bagi protan dan deutan.

Contoh yang harus dihindari — kombinasi merah dan hijau bersaturasi tinggi
Penglihatan warna normal	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Dikromasi protan	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Dikromasi deutan	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Dikromasi tritan	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Untuk nilai kontinu, perubahan kecerahan yang merata

Untuk nilai kontinu seperti suhu atau kepadatan, gunakan peta warna sekuensial yang kecerahannya berubah merata ke satu arah (viridis, cividis, dll.). cividis dirancang dengan mempertimbangkan gangguan penglihatan warna.
Peta warna pelangi (jet) kecerahannya naik-turun tak beraturan sehingga menyesatkan bahkan tanpa gangguan penglihatan warna, dan informasinya hilang di rentang merah-hijau.
Untuk nilai yang menyebar ke dua arah (naik · turun), peta warna divergen biru-putih-oranye (atau merah) lebih aman daripada versi merah-hijau.

Teks dan kontras

Untuk teks isi, disarankan kontras kecerahan terhadap latar minimal 4,5:1 sesuai WCAG 1.4.3. Tulisan merah di atas latar hitam kontrasnya sangat berkurang bagi protan.
Untuk tautan, jangan hanya mengubah warna; pertahankan garis bawahnya.

Urutan pengecekan

1. Apakah masih bisa dibedakan dalam skala abu-abu (grayscale)?
2. Apakah masih bisa dibedakan di simulator dengan protan dan deutan 100%?
3. Apakah ada petunjuk selain warna, seperti bentuk, label, atau pola?
4. Bisakah label ditempel langsung pada grafik tanpa legenda?

Jika keempatnya lolos, materi Anda akan lebih mudah dibaca bukan hanya oleh orang dengan gangguan penglihatan warna, tetapi juga oleh mereka yang melihatnya di layar redup, cetakan hitam-putih, atau di luar ruangan yang terang.

Lihat di simulator →