Warna bisa membuat dashboard lebih mudah dibaca. Tapi terlalu banyak warna justru bisa membuat informasi penting tenggelam.

Masalah yang sering terjadi bukan karena kombinasi warnanya jelek. Biasanya karena warna digunakan tanpa fungsi yang jelas.

Ada warna untuk membedakan kategori, menunjukkan status, menyorot informasi penting, atau sekadar menjadi warna utama dashboard.

Lalu, bagaimana memilihnya?

1. Mulai dari Warna Utama

Kita bisa mulai dengan menentukan satu warna utama.

Jika dashboard dibuat untuk perusahaan atau organisasi, warna ini biasanya mengikuti warna brand.

Misalnya sebuah perusahaan memiliki warna utama biru:

#1D4ED8

Warna tersebut bisa digunakan pada beberapa elemen utama seperti:

• KPI penting;
• bar atau line utama;
• tombol atau filter aktif;
• highlight tertentu.

Tidak semua elemen perlu menggunakan warna utama tersebut.

Untuk background, border, teks sekunder, dan elemen pendukung, warna netral seperti putih, abu-abu, atau hitam biasanya sudah cukup.

2. Jangan Gunakan Terlalu Banyak Warna

Bayangkan sebuah bar chart memiliki 10 kategori.

Apakah setiap bar harus memiliki warna yang berbeda?

Belum tentu.

Jika tujuan chart hanya membandingkan besar nilai antar kategori, satu warna yang sama sering sudah cukup.

Misalnya:

Produk A: biru
Produk B: biru
Produk C: biru
Produk D: biru

Kemudian jika kita ingin menyorot Produk C:

Produk A: abu-abu
Produk B: abu-abu
Produk C: biru
Produk D: abu-abu

Sekarang warna memiliki fungsi yang jelas.

Produk C langsung mendapatkan perhatian.

3. Gunakan Warna untuk Menunjukkan Status

Warna juga sering digunakan untuk menunjukkan kondisi tertentu.

Contohnya:

Hijau
Target tercapai

Merah
Di bawah target

Abu-abu
Belum ada status

Penggunaan seperti ini membantu pembaca mengenali kondisi dengan cepat.

Namun, jangan hanya mengandalkan warna.

Jika status penting, tambahkan teks, label, ikon, atau indikator lain agar informasi tetap dapat dipahami ketika warna sulit dibedakan.

4. Bedakan Data Kategorikal dan Data Numerik

Pemilihan warna juga bergantung pada jenis data.

Untuk data kategorikal, kita biasanya membutuhkan beberapa warna yang cukup berbeda.

Contohnya:

• Retail;
• Corporate;
• Government;
• Education.

Setiap kategori bisa menggunakan warna berbeda jika memang perlu dibedakan.

Untuk data numerik, pendekatannya bisa berbeda.

Misalnya kita ingin menunjukkan tingkat penjualan dari rendah ke tinggi pada sebuah heatmap.

Kita bisa menggunakan gradasi:

warna muda → warna tua

Semakin tinggi nilainya, semakin kuat intensitas warnanya.

Jenis palette seperti ini sering disebut sequential color palette.

5. Ketika Data Memiliki Dua Arah

Ada juga data yang memiliki titik tengah.

Contohnya:

• pertumbuhan negatif dan positif;
• profit dan loss;
• nilai di bawah dan di atas rata-rata;
• perubahan terhadap target.

Untuk kondisi seperti ini kita bisa menggunakan diverging color palette.

Contohnya:

Merah ← Netral → Biru

Warna bergerak ke dua arah dari sebuah titik tengah.

Titik tengah tersebut bisa berupa 0, rata-rata, target, atau nilai referensi lainnya.

6. Perhatikan Kontras

Teks abu-abu muda di atas background putih mungkin terlihat minimalis, tetapi belum tentu mudah dibaca.

Hal yang sama berlaku untuk chart.

Jika dua warna terlalu mirip, pembaca akan kesulitan membedakannya.

Kontras perlu diperhatikan terutama untuk:

• teks;
• label;
• legend;
• tombol;
• warna antar kategori;
• foreground dan background.

Coba lihat dashboard dari jarak sedikit lebih jauh.

Apakah informasi utama masih terlihat?

Jika semuanya memiliki intensitas warna yang sama, kita akan kesulitan mengetahui bagian mana yang harus dilihat terlebih dahulu.

7. Perhatikan Color Vision Deficiency

Tidak semua orang melihat warna dengan cara yang sama.

Kombinasi merah dan hijau, misalnya, bisa sulit dibedakan oleh sebagian pengguna.

Karena itu, untuk informasi penting sebaiknya jangan menggunakan warna sebagai satu-satunya pembeda.

Kita bisa menambahkan:

• label;
• ikon;
• bentuk;
• pola;
• angka.

Untuk chart kategorikal, pilih warna yang tetap memiliki perbedaan cukup jelas ketika dilihat oleh pengguna dengan color vision deficiency.

8. Buat Palette yang Konsisten

Jika warna biru digunakan untuk Actual pada satu halaman, usahakan warna yang sama tetap berarti Actual pada halaman lainnya.

Hal yang sama berlaku untuk status.

Misalnya:

Hijau = tercapai
Merah = tidak tercapai

Jangan tiba-tiba menggunakan merah untuk kondisi positif pada halaman lain.

Konsistensi membuat dashboard lebih mudah dipelajari karena pengguna tidak perlu memahami arti warna dari awal setiap kali berpindah halaman.

Contoh Struktur Warna Sederhana

Sebuah dashboard tidak membutuhkan puluhan warna.

Kita bisa mulai dari struktur sederhana:

Primary
Warna utama dashboard

Neutral
Background, border, teks, dan elemen pendukung

Positive
Kondisi positif

Negative
Kondisi negatif

Warning
Kondisi yang perlu perhatian

Categorical
Beberapa warna tambahan jika perlu membedakan kategori

Dari struktur tersebut, palette bisa dikembangkan sesuai kebutuhan.

Cari Kombinasi Warna dengan Color Palette BikinDashboard

Kalau belum punya kombinasi warna, kamu bisa menggunakan Color Palette di Tools BikinDashboard.

Di sana kamu bisa membuat dan mengeksplorasi kombinasi warna yang nantinya digunakan untuk dashboard atau visualisasi data.

Buka Color Palette

Setelah mendapatkan palette, tentukan fungsi setiap warnanya.

Jangan berhenti pada pertanyaan:

“Warnanya bagus atau tidak?”

Coba tanyakan juga:

“Warna ini digunakan untuk menunjukkan apa?”