fx Dashboard Design Principles

Colour system: one accent colour, semantic red/green, accessibility

⏱ 10 min

What you'll learn

  • The palette (5 colours is enough)
  • One accent colour
  • Semantic colours mean status — nothing else

Concept

1. The palette (5 colours is enough)

Role Use for Example
Neutral dark text, numbers, titles #1F2937 (charcoal)
Neutral light non-highlighted bars, gridlines, borders #D1D5DB (light grey)
Background sheet / card background #FFFFFF or #F7F7F7
Accent the ONE thing you want noticed #1F4E78 (brand blue)
Semantic good / warning / bad — status only #1B873F green · #D97706 amber · #C62828 red

Write the hex codes on your Documentation sheet (Module 8) and reuse them everywhere.

2. One accent colour

Grey everything, then colour only what matters: the current year's line (last year in grey), the selected region's bar, the KPI that's off-track. When everything is coloured, nothing stands out.

3. Semantic colours mean status — nothing else

Red and green should only ever mean bad and good. Don't use green as "Electronics" and red as "Furniture" — viewers will read them as good/bad. And remember direction: for costs, lower is green (Analysis track, Module 7).

4. Set it up in Excel

  • Theme colours: Page Layout → Colors → Customize Colors → set Accent 1 = your accent, Accent 2–6 = greys/semantic → save as "ExcelWalaa Dashboard". New charts and shapes then use your palette automatically.
  • Cell styles: Home → Cell Styles → New Cell Style for "KPI Value", "KPI Label", "Section Title" — change once, update everywhere.
  • Chart template: format one chart → right-click → Save as Template (.crtx); use Insert → Charts → Templates next time.

5. Accessibility

About 1 in 12 men has some colour-vision deficiency, most commonly red–green.

  • Never rely on colour alone: add ▲▼, "+/−", or words ("Behind target").
  • Prefer blue/orange for two-series comparisons instead of red/green.
  • Use enough contrast: dark text on light background (contrast ratio 4.5:1 or more for normal text). Avoid light grey text on white for numbers.
  • Test: take a screenshot and view it in grayscale — can you still tell the series and statuses apart?

6. Backgrounds and dark mode

White or very light grey backgrounds print well and match most reports. Dark dashboards look dramatic on a TV but print badly and reduce contrast for small text — use only for wall screens.

Common mistakes

A different colour for every bar (Excel's "Vary colors by point"). Red/green for categories. Pale text that fails contrast. Gradients and 3-D shading.

Exercises

mediumCreate and save a custom theme colour set with your accent, two greys and the three semantic colours. Re-colour one existing chart: everything grey, current year in accent, one data label in red where something is behind target. Check it in grayscale.
Use one accent for current-period data, grey for comparison, and green/amber/red only for status. Pair status with words or symbols, check labels against their backgrounds, and inspect a grayscale export. A cost overrun should remain identifiable as adverse even without red.

Quiz

How many accent colours per dashboard?
One
What should red and green mean?
Only bad/good status
Why add ▲▼ next to coloured numbers?
Colour-blind viewers and grayscale printing
Colour system: one accent colour, semantic red/green, accessibility · Dashboards | ExcelWalaa