Palettes · Dashboards
Dashboard colors one working example, light and dark, checked for color vision
A dashboard is where every color problem meets: chart series, good and bad changes, service states, two themes. This one is built from the site’s measured palettes, and every color on it is measured where it is used, in both themes and in four simulated visions. Nothing relies on color alone.
- Contrast pairs, both themes
- 24
- Visions checked
- 4
- Meanings with a second carrier
- 4
The example
The dashboard
Switch the theme and the vision. The colors change; the meaning does not, because every color has a word, a shape or a number beside it.
Simulated with Machado, Oliveira and Fernandes (2009); grayscale keeps luminance only.
Store operations
Week 41, 6 to 12 October
-
Orders
1,284
Better up 6% on last week
-
Late deliveries
42
Worse up 9 on last week
-
Return rate
3.1%
Better down 0.4 points
-
Out of stock
7
Watch same as last week
| Service | Status |
|---|---|
| Payments | Running |
| Site search | Slow |
| Delivery tracking | Down |
| Maintenance tonight |
Measured
What was checked
Every pair the dashboard puts on screen, in both themes. Text needs 4.5:1 and the lines and marks of a chart 3:1 (WCAG 1.4.3 and 1.4.11).
| Where it is used | Light | Dark | Needs |
|---|---|---|---|
| Text and numbers on a card | 14.07:1 | 15.76:1 | 4.5:1 |
| Success: the word on a card | 6.58:1 | 10.38:1 | 4.5:1 |
| Success: the badge word on its tint | 5.87:1 | 8.95:1 | 4.5:1 |
| Warning: the word on a card | 7.09:1 | 10.85:1 | 4.5:1 |
| Warning: the badge word on its tint | 6.36:1 | 9.34:1 | 4.5:1 |
| Error: the word on a card | 6.47:1 | 6.54:1 | 4.5:1 |
| Error: the badge word on its tint | 5.29:1 | 6.16:1 | 4.5:1 |
| Information: the word on a card | 8.72:1 | 10.03:1 | 4.5:1 |
| Information: the badge word on its tint | 8.01:1 | 9.09:1 | 4.5:1 |
| Series 1: line and marks on a card | 21.00:1 | 18.09:1 | 3:1 |
| Series 2: line and marks on a card | 5.18:1 | 3.48:1 | 3:1 |
| Series 3: line and marks on a card | 3.86:1 | 4.67:1 | 3:1 |
The three series, in each vision
Chosen, not picked: of the Okabe–Ito colors that reach 3:1 on the card, the three whose closest pair stays furthest apart in every vision. Grayscale brings them nearer, which is why each line also has a label and its own marker.
| Vision | Light: Closest pair | Dark: Closest pair |
|---|---|---|
| Typical vision | 39.2 Distinct | 43.2 Distinct |
| Protanopia | 41.5 Distinct | 42.5 Distinct |
| Deuteranopia | 38.3 Distinct | 39.2 Distinct |
| Tritanopia | 41.5 Distinct | 42.8 Distinct |
| Grayscale | 8.3 Noticeable | 8.3 Noticeable |
The four states, in each vision
The state colors come close in some visions and nearly meet in grayscale. They are the third cue, after the word and the icon.
| Vision | Light: Closest pair | Dark: Closest pair |
|---|---|---|
| Typical vision | 13.2 Distinct | 28.8 Distinct |
| Protanopia | 4.4 Close match | 3.7 Close match |
| Deuteranopia | 4.1 Close match | 6.9 Noticeable |
| Tritanopia | 10.0 Noticeable | 10.7 Distinct |
| Grayscale | 0.4 Imperceptible | 0.8 Imperceptible |
What carries each meaning besides color
| Meaning | Carried by |
|---|---|
| Which line is which channel | A label at the end of each line, and a different marker shape on each |
| Whether a number got better or worse | A word (Better, Worse, Watch) and an icon shape beside every change |
| Whether a service is working | A word and an icon in every badge |
| How many late deliveries each region had | The value printed at the end of every bar |
Use them
The colors, as tokens
The dashboard’s colors as CSS custom properties, light first, then dark.
:root {
--page: #F5F0E6;
--card: #FFFFFF;
--ink: #2F2B24;
--chart-1: #000000; /* Black */
--chart-2: #0072B2; /* Blue */
--chart-3: #D55E00; /* Vermilion */
--ok: #136B39;
--ok-bg: #E8F5EE;
--warn: #92400E;
--warn-bg: #FEF3C7;
--bad: #B91C1C;
--bad-bg: #FEE2E2;
--info: #1E40AF;
--info-bg: #EFF6FF;
}
@media (prefers-color-scheme: dark) {
:root {
--page: #0F0E0C;
--card: #171613;
--ink: #F2EFE9;
--chart-1: #FFFFFF; /* White */
--chart-2: #0072B2; /* Blue */
--chart-3: #D55E00; /* Vermilion */
--ok: #4ADE80;
--ok-bg: #12281C;
--warn: #E2C766;
--warn-bg: #2A2312;
--bad: #F87171;
--bad-bg: #241A12;
--info: #93C5FD;
--info-bg: #16202E;
}
}Criteria
WCAG criteria it meets
Found a mistake? Write to us and we will correct it.