Desain untuk User yang Mengalami Buta Warna

Widya Lestari
4 min readJun 28, 2017

--

Image from unsplash.com

Buta warna atau bisa juga disebut dengan Color Vision Deficiency (CVD) dialami sekitar 1 dari 8 pria atau sekitar 8% di dunia, sedangkan wanita mengalami buta warna dengan perbandingan 1 dari 200 wanita.

Jika kamu berpikir buta warna artinya hanya dapat membedakan warna hitam dan putih, maka pemikiran itu tidak salah karena ada kasus ekstrim yang membuat orang tidak bisa melihat warna apapun. Namun, kebanyakan orang yang mengalami buta warna tetap dapat melihat warna-warna dengan baik, yang membedakan hanyalah ketidakmampuan mereka untuk melihat warna merah, hijau ataupun biru dengan sempurna.

Dalam proses desain, apa yang dapat kita lakukan untuk memudahkan user dengan buta warna?

Ada beberapa cara yang dapat kamu lakukan jika ingin desain kamu dapat dilihat dengan baik oleh user yang mengalami buta warna.

1. Gunakan variasi icon atau shape

Dalam menyampaikan informasi penting melalui desain, terkadang kita menggunakan warna-warna yang dirasa tepat, misalnya merah untuk error atau hijau untuk sesuatu yang sukses/berhasil. Gunakan variasi icon agar desainmu tidak terpaku pada penggunaan warna saja karena tipe buta warna tertentu membuat orang sulit melihat warna merah ataupun hijau.

Error pada form

Contoh lainnya yaitu penulisan angka yang menunjukkan peningkatan revenue atau keuntungan. Penggunaan warna hijau untuk menunjukkan adanya suatu peningkatan dapat ditambahkan dengan icon seperti berikut ini.

Desain untuk menampilkan kenaikan atau penurunan revenue

2. Minimalis dan monokrom

Seperti kata pepatah, sesuatu yang berlebihan itu tidak baik. Dalam desain, hal tersebut juga dapat berlaku. Jika bisa, hindari penggunaan jenis warna yang terlalu banyak. Cukup tentukan satu atau dua warna dan gunakan variasi shade dari warna tersebut.

3. Perhatikan kombinasi warna yang digunakan

Saat melakukan kombinasi warna tertentu, perhatikan warna apa saja yang telah kamu pilih. Hindari kombinasi warna berikut yang cukup sulit dilihat oleh user dengan buta warna.

  • Hijau dan merah
  • Hijau dan coklat
  • Hijau dan biru
  • Hijau dan abu-abu
  • Hijau dan hitam
  • Hijau muda dan kuning
  • Biru dan ungu
  • Biru dan abu-abu

4. Gunakan high contrast untuk warna-warna yang kamu pilih

Menggunakan warna yang mirip satu sama lain dapat menyulitkan user dengan buta warna. Oleh karena itu, kamu bisa menggunakan warna-warna yang kontras dan mudah dibedakan.

5. Gunakan pola (pattern) dan tekstur

Dalam mendesain peta atau infografis, terkadang kita menggunakan banyak jenis warna untuk visualisasi data. Agar semakin terlihat berbeda satu sama lain, gunakan pola atau tekstur pada objek-objek tersebut dan tambahkan teks yang semakin memudahkan user dengan buta warna memahami data yang ingin kamu sampaikan.

Apakah ada tools yang memudahkan proses desain untuk user dengan buta warna?

Selain mencoba tips di atas, kamu juga bisa memanfaatkan tools desain yang membuat kamu mengetahui bagaimana user buta warna melihat desain yang telah kamu buat.

Photoshop

Kalau kamu menggunakan Photoshop, kamu bisa mengecek hasil desain kamu jika dilihat oleh user buta warna. Photoshop sendiri menyediakan fitur preview desain untuk dua tipe buta warna yang paling umum, yaitu Protanopia dan Deuteranopia.

Fitur Color Blindness di Photoshop

Sketch

Bagi kamu pengguna Sketch, kamu bisa mencoba plugin Stark yang merupakan simulator color blind. Stark menyediakan 8 tipe buta warna yang bisa kamu simulasikan satu per satu. Link untuk mengunduh plugin Stark: http://getstark.co/

Plugin Stark di Sketch

Mungkin kita yang terlibat dalam proses desain antarmuka sempat berpikir kenapa kita harus memperhatikan user buta warna yang jumlahnya terbilang lumayan kecil. Tapi bukankah desain yang bagus berarti dapat diakses oleh semua orang? Tak terkecuali oleh user yang mengalami buta warna.

Kalau kamu punya tips lain terkait desain untuk user buta warna, silakan ikut berbagi di kolom komentar di bawah.

Selamat mendesain! :D

--

--