TL;DR
Warna dashboard yang bagus dibangun dari satu warna netral buat mayoritas elemen dan satu warna aksen buat angka yang paling penting. Kontras teks minimal 4.5:1 supaya kebaca, dan hindari kombinasi merah-hijau soalnya sekitar 1 dari 12 pria punya buta warna. Kalau dashboard kamu masih kebaca setelah dijadiin hitam-putih, palet kamu udah aman.
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.
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:
Aturan yang aku pakai: abu-abu itu default, warna itu pengecualian. Setiap elemen yang dikasih warna harus bisa kamu jelasin kenapa.
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.
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.
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.
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.
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.
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:
Buat palet kategorikal yang udah diuji, pakai ColorBrewer. Ada filter "colorblind safe" yang bisa kamu centang langsung.
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:
#cbd5e1.#dc2626 plus ikon panah turun.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.
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 #ca8a04Simpan sebagai tema di tool kamu, jadi nggak perlu mikir ulang tiap bikin dashboard baru.
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.
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.
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.
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.
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.
Abu-abu itu default, warna itu pengecualian: satu aksen, satu pesan. Cek kontras 4.5:1 sebelum publish, butuh 30 detik dan nyelametin dashboard kamu di proyektor. Tes grayscale juga: 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.
Mau praktek langsung? Mulai latihan SQL gratis
Latihan interaktif, langsung di browser.
Dashboard penjualan yang rapi bisa kamu bikin cuma pakai Google Sheets, tanpa Looker Studio, tanpa add-on, tanpa bayar apa pun. Ini urutan 6 langkahnya, lengkap dengan rumusnya.
Dashboard buat mantau angka yang berubah tiap hari. Laporan buat jawab satu pertanyaan sekali dan tuntas. Salah pilih, kerjaanmu kebuang.
Delapan KPI keuangan yang beneran dibuka CFO tiap bulan, rumusnya, dan cara nyusunnya jadi satu dashboard yang kebaca dalam 90 detik.