Cara Memilih Warna Dashboard: Palet yang Aksesibel dan Enak Dilihat

Palet warna dashboard yang bagus itu simpel: satu warna netral buat mayoritas elemen, satu warna aksen buat angka yang paling penting. Sisanya abu-abu.

Masalahnya, kebanyakan dashboard di kantor Indonesia keliatan kayak kotak crayon. Chart pertama biru, kedua merah, ketiga oranye, keempat ungu — semuanya teriak barengan, dan akhirnya nggak ada yang kedengeran.

Di sini aku bahas cara nyusun palet dashboard dari nol: mulai dari milih warna dasar, cek kontras biar kebaca, sampai tes buta warna. Semua langkahnya bisa kamu kerjain tanpa background desain.

Kenapa warna dashboard sering bikin orang salah baca?

Warna di dashboard punya satu tugas: ngarahin mata ke informasi yang penting. Waktu semua elemen dikasih warna cerah, mata nggak punya patokan mana yang harus dilihat duluan, dan pembaca akhirnya scan acak dari kiri atas.

Ada tiga hal yang bikin warna gagal ngerjain tugasnya:

• Terlalu banyak warna aktif. Kalau 8 chart pakai 8 warna beda, nggak ada satu pun yang nonjol.
• Warna dipakai buat dekorasi, bukan buat makna. Bar chart yang tiap barnya beda warna padahal kategorinya sejenis — itu warna tanpa informasi.
• Kontras kurang. Teks abu-abu muda di kartu putih emang keliatan elegan di layar Macbook kamu. Di proyektor ruang meeting, hilang.

Aturan yang aku pakai: abu-abu itu default, warna itu pengecualian. Setiap elemen yang dikasih warna harus bisa kamu jelasin kenapa.

Gimana cara nyusun palet dashboard dari nol?

Palet dashboard cuma butuh tiga kelompok warna: netral, aksen, dan semantik. Total sekitar 10 kode hex, dan kamu bisa pakai palet yang sama buat semua dashboard di kantor.

1. Warna netral (dipakai 80% area)

Ini yang bakal jadi mayoritas dashboard kamu: background, garis grid, label sumbu, dan bar chart biasa.

--bg:        #fafafa   /* background halaman */
--surface:   #ffffff   /* kartu / panel */
--border:    #e2e8f0   /* garis pemisah, grid */
--text-soft: #64748b   /* label sumbu, keterangan */
--text:      #0f172a   /* judul, angka utama */

Kalau kamu cuma pakai lima warna ini, dashboard kamu udah lebih rapi dari 70% dashboard yang aku lihat di kantor klien.

2. Warna aksen (dipakai 15% area)

Satu warna, buat nunjukin data yang lagi jadi fokus. Deret data yang lain? Abu-abu.

--accent:      #0891b2   /* teal - deret utama */
--accent-soft: #cffafe   /* versi muda buat fill/area */

Contoh nyata: chart tren penjualan 6 cabang. Cabang yang lagi kamu bahas dikasih teal, lima cabang lain abu-abu #cbd5e1. Mata pembaca langsung nemu yang bener dalam 1 detik, tanpa kamu perlu nunjuk pakai kursor.

3. Warna semantik (dipakai 5% area)

Warna yang punya arti tetap dan nggak boleh dipakai buat hal lain.

--good:  #16a34a   /* di atas target */
--warn:  #f97316   /* perlu diperhatiin */
--bad:   #dc2626   /* di bawah target / rugi */

Kesalahan yang sering: pakai merah cuma karena warna brand-nya merah. Di dashboard finansial, merah artinya rugi. Kalau semua chart kamu merah, orang finance bakal panik duluan sebelum baca angkanya.

Berapa kontras minimal biar dashboard kebaca?

Standar WCAG AA: rasio kontras minimal 4.5:1 buat teks ukuran normal, dan 3:1 buat teks besar (18pt ke atas atau 14pt bold). Rasio ini ngukur beda kecerahan antara warna teks dan warna background.

Cek gratis di WebAIM Contrast Checker — masukin dua kode hex, langsung keluar rasionya.

Kombinasi	Rasio	Lolos AA?
#0f172a di atas #ffffff	17.9:1	Ya, aman banget
#64748b di atas #ffffff	4.8:1	Ya, buat label
#94a3b8 di atas #ffffff	2.8:1	Nggak — jangan buat teks
#ffffff di atas #0891b2	3.6:1	Cuma buat teks besar

Baris terakhir itu jebakan yang sering kejadian: teks putih di tombol teal keliatan bagus, tapi kalau font-nya 12px, itu gagal standar. Solusinya gelapin teal-nya jadi #0e7490, rasionya naik ke 4.7:1.

Gimana bikin dashboard yang aman buat buta warna?

Sekitar 1 dari 12 pria dan 1 dari 200 wanita punya gangguan penglihatan warna, dan tipe paling umum bikin merah dan hijau keliatan mirip. Jadi kalau dashboard kamu bedain "target tercapai" dan "gagal" cuma pakai merah-hijau, ada kemungkinan bos kamu nggak lihat bedanya.

Tiga cara ngakalinnya:

1. Jangan andelin warna doang. Tambah ikon panah naik/turun, atau tanda + dan -. Warna jadi bonus, bukan satu-satunya sinyal.
2. Pakai kontras terang-gelap, bukan cuma beda hue. Hijau tua vs oranye muda tetap kebedain walau warnanya nggak kebaca.
3. Tes hitam-putih. Screenshot dashboard kamu, jadiin grayscale (di Google Slides atau Preview bisa). Kalau masih kebaca mana yang mana, palet kamu aman.

Buat palet kategorikal yang udah diuji, pakai ColorBrewer. Ada filter "colorblind safe" yang bisa kamu centang langsung.

Contoh kasus: dashboard penjualan toko_berkah

Toko Berkah punya 6 cabang di Jabodetabek. Dashboard lama mereka pakai 6 warna berbeda buat 6 cabang — biru, merah, hijau, kuning, ungu, oranye — di semua chart, termasuk chart yang cuma nampilin total.

Dari dataset ngulikdata, angkanya gini:

Cabang	Omzet Mei 2026	vs Target
Depok	Rp 412.300.000	+18%
Bekasi	Rp 388.900.000	+11%
Tangerang	Rp 355.100.000	+2%
Bogor	Rp 341.700.000	-2%
Jakarta Timur	Rp 297.400.000	-15%
Jakarta Utara	Rp 268.800.000	-23%

Yang penting cuma satu: Jakarta Utara turun 23% dan itu yang harus dibahas di meeting. Tapi di dashboard 6 warna, Jakarta Utara dapat warna ungu — sama mencoloknya kayak Depok yang naik 18%.

Setelah dirapiin, aturannya jadi:

• Lima cabang yang aman: abu-abu #cbd5e1.
• Jakarta Utara: merah #dc2626 plus ikon panah turun.
• Judul chartnya diganti dari "Omzet per Cabang" jadi "Jakarta Utara turun 23%, lima cabang lain stabil".

Hasilnya: waktu yang dipakai manajer buat nemu masalah di meeting turun dari sekitar 40 detik jadi di bawah 5 detik. Nggak ada chart baru yang dibikin. Cuma warnanya yang dikurangi.

Kesalahan umum waktu milih warna dashboard

• Pakai gradien di bar chart. Gradien bikin panjang bar keliatan beda padahal nilainya sama. Pakai warna solid.
• Warna beda buat kategori yang sama. Kalau semua bar itu "penjualan bulanan", semuanya harus satu warna. Beda warna = beda makna.
• Background gelap tanpa alasan. Dark mode keliatan keren di portfolio, tapi kalau dashboard-nya bakal di-print atau ditayangin di proyektor ruang meeting yang terang, teks tipisnya bakal hilang.
• Warna brand dipaksa masuk ke semua chart. Warna brand buat header dan logo. Data punya bahasanya sendiri.
• Warna semantik dipakai sembarangan. Begitu kamu pakai hijau buat kategori "produk minuman", hijau berhenti berarti "bagus". Pilih salah satu.

Palet siap pakai buat dashboard kamu

Copy ini ke Looker Studio, Power BI, atau Tableau kamu. Udah lolos kontras 4.5:1 dan aman buat buta warna.

/* Netral */
#fafafa  #ffffff  #e2e8f0  #64748b  #0f172a

/* Aksen */
#0891b2  #cffafe

/* Semantik */
#16a34a  #f97316  #dc2626

/* Kategorikal (max 5, colorblind-safe) */
#0891b2  #f97316  #7c3aed  #64748b  #ca8a04

Simpan sebagai tema di tool kamu, jadi nggak perlu mikir ulang tiap bikin dashboard baru.

FAQ

Berapa warna maksimal yang boleh dipakai di satu dashboard?

Dua warna aktif udah cukup: satu netral buat mayoritas elemen, satu aksen buat angka yang mau kamu tonjolin. Kalau butuh kategori, tambah maksimal 5-6 warna kategorikal. Lebih dari itu mata pembaca susah bedain, dan warna berhenti punya arti. Aturan gampangnya: setiap warna baru harus punya alasan, bukan cuma biar rame.

Kombinasi warna apa yang harus dihindari di dashboard?

Merah-hijau bersebelahan, soalnya dua warna itu keliatan mirip buat orang dengan buta warna tipe umum. Sekitar 1 dari 12 pria kena. Hindari juga teks abu-abu terang di background putih (kontrasnya jatuh di bawah 4.5:1) dan warna jenuh penuh kayak #FF0000 buat area besar, soalnya bikin mata cepat capek.

Apa itu kontras 4.5:1 dan gimana ngeceknya?

Kontras 4.5:1 itu standar minimal WCAG AA buat teks ukuran normal — rasio kecerahan antara warna teks dan warna background. Cek gratis di WebAIM Contrast Checker: masukin dua kode hex, langsung keluar rasionya. Buat angka besar di kartu KPI, batas minimalnya lebih longgar, 3:1.

Warna merah selalu berarti buruk ya di dashboard?

Di konteks finansial dan target, ya — merah dibaca sebagai rugi atau di bawah target. Makanya jangan pakai merah cuma karena bagus dipandang. Kalau kamu warnain brand color merah di semua chart, pembaca bakal salah baca sinyalnya. Simpan merah khusus buat kondisi yang beneran perlu perhatian.

Palet apa yang aman kalau aku nggak punya designer?

Pakai palet yang udah diuji: ColorBrewer buat data kategorikal, atau Viridis buat data numerik berurutan. Dua-duanya dirancang biar tetap kebaca di kondisi buta warna dan waktu dicetak hitam-putih. Sisanya cukup pakai lima level abu-abu dari #f8fafc sampai #0f172a.

Penutup

Tiga hal yang perlu kamu bawa pulang:

• Abu-abu itu default, warna itu pengecualian. Satu aksen, satu pesan.
• Cek kontras 4.5:1 sebelum publish. Butuh 30 detik, nyelametin dashboard kamu di proyektor.
• Tes grayscale. Kalau masih kebaca, palet kamu aman buat semua orang.

Warna cuma satu bagian. Angka yang mau kamu tunjukin juga harus disiapin dengan bener — dan itu kerjaan SQL. Latihan query agregasi buat dashboard di SUM dan GROUP BY, atau cek istilah visualisasi di glossary dashboard.

Lanjut baca: Data Storytelling: Cara Bikin Data Kamu Didengar Bos dan AI buat Review Dashboard.