Gubuku – Pernah gak sih lo lagi bikin desain yang menurut lo udah estetik parah, tapi begitu di-share ke orang lain, mereka malah bingung bacanya? Atau lo pernah mikir gak, “Gimana ya tampilan visual buatan gue di mata temen-temen yang punya kondisi buta warna?”

FYI aja nih bestie, di dunia ini ada ratusan juta orang yang hidup dengan kondisi buta warna (color blindness). Jadi, desainer grafis yang keren zaman sekarang itu gak cuma soal jago milih warna yang lagi hype, tapi juga paham konsep Inclusive Design alias desain yang ramah dan bisa diakses sama siapa aja.

Biar karya lo gak cuma cakep tapi juga accessible buat semua orang, yuk kupas tuntas cara mendesain aset visual yang nyaman dipandang untuk penderita buta warna berdasarkan 3 tipe utamanya!

Kenalan Dulu Sama 3 Tipe Utama Buta Warna

Sebelum masuk ke teknis desain, lo wajib tahu kalau buta warna itu gak berarti dunia mereka cuma warna hitam-putih (itu namanya Achromatopsia dan lumayan langka). Sebagian besar penderita buta warna punya masalah dalam membedakan spektrum warna tertentu.

Ini dia 3 tipe utamanya:

1. Red-Green Color Blindness (Protanopia & Deuteranopia): Tipe paling umum! Mereka susah membedakan warna merah dan hijau. Di mata mereka, merah dan hijau bisa kelihatan mirip cokelat atau abu-abu.

2. Blue-Yellow Color Blindness (Tritanopia): Tipe yang cukup langka. Penderitanya susah membedakan warna biru dan hijau, serta kuning dan merah muda/abu-abu.

3. Monochromacy (Achromatopsia): Penderita tidak bisa melihat warna sama sekali dan hanya melihat dunia dalam skala abu-abu (grayscale).

5 Trik Mendesain Visual yang Friendly Buat Penderita Buta Warna

1. Jangan Gunakan Warna Sebagai Satu-satunya “Penanda” Informasi

Ini kesalahan paling sering dilakukan pemula. Contoh paling gampang: buat indikator formulir error (merah) dan success (hijau). Kalau cuma ngandelin warna merah vs hijau, penderita Red-Green color blindness bakal kebingungan!

Solusinya:

• Sandingkan warna dengan ikon atau bentuk (misal: tanda silang ❌ untuk error, tanda centang ✅ untuk sukses).

• Gunakan teks penjelas tambahan seperti “Gagal” atau “Berhasil”.

2. Mainkan Kontras Rasio (Bukan Cuma Beda Warna!)

Warna boleh mirip di spektrum tertentu, tapi kalau kontrasnya kuat, visual lo bakal tetap gampang dibaca.

• Pastikan ada perbedaan ketebalan (luminance) yang jelas antara teks dan background.

• Pakai formula teks gelap di atas background terang, atau sebaliknya.

• Pro Tip: Coba ubah desain lo ke mode Grayscale (hitam-putih). Kalau tulisan atau elemen visual lo masih kelihatan jelas dan terbaca dalam warna hitam-putih, berarti nilai kontras desain lo udah aman!

3. Manfaatkan Pola (Pattern) dan Tekstur untuk Grafik/Data

Kalau lo lagi bikin infografis, grafik batang, atau pie chart, jangan cuma bedain kategorinya pake warna doang.

Daripada cuma ngandelin merah vs hijau vs biru, tambahin pola garis-garis, bintik-bintik (dots), atau arsir yang berbeda di tiap bagian grafik. Dengan begitu, siapa pun bisa langsung tahu bedanya tanpa perlu tergantung pada persepsi warna.

4. Pilih Kombinasi Warna yang “Aman”

Beberapa kombinasi warna itu ibarat nightmare buat penderita buta warna. Sebaiknya hindari pasangan warna berikut dalam satu elemen yang berdekatan:

• ❌ Merah & Hijau

• ❌ Hijau & Cokelat

• ❌ Biru & Ungu

• ❌ Hijau & Biru

• ❌ Biru & Abu-abu

Sebagai gantinya, gunakan kombinasi warna dengan kontras tinggi seperti Biru & Oranye atau Kuning & Hitam.

5. Gunakan Simulator Color Blindness Saat Proofing

Di era serba canggih ini, lo gak usah ngeraba-raba sendiri hasil desain lo. Gunakan tools simulator buat nge-cek gimana tampilan desain lo di mata penderita buta warna sebelum di-publish!

• Plugin Figma/Adobe: Lo bisa install plugin gratisan kayak Stark atau Colorblind di Figma atau Illustrator.

• Color Oracle: Aplikasi desktop gratis yang bisa nge-convert seluruh layar komputer lo ke visual mode buta warna secara real-time.

Ringkasan Trik Desain Inklusif

Elemen Desain	Yang Harus Diwaspadai ❌	Solusi Inklusif ✅
Status Indikator	Cuma pake lingkaran merah & hijau	Tambahkan ikon (❌/✅) & teks penjelas
Chart / Diagram	Cuma pake warna beda tipis	Pakai pola/arsir berbeda & direct label
Teks & Background	Kontras rendah (misal: merah di atas hijau)	Kontras tinggi (terang di atas gelap)
Checklist Terakhir	Langsung dipublish tanpa dites	Cek pakai plugin simulator buta warna

Penulis kiki dari smkn 9 bungo