Colours¶
Our goal was to provide a colour palette (US: color palette) that allows a lot of freedom, is easy to use, but at the same time looks harmonious, and meets some accessibility requirements.
What we came up with, is the colour palette served on the confirm assets site (downloads). The colour report shows all shades and their exact contrasts.
Important
The colour palette is the base for all of our products, company documentation, presentations, and similar.
Hint
We handle «colours as code»: all shades are generated from colours.yml. How to change and build the colours is described in the assets project.
Characteristics¶
- ModularThe palette contains different colour families. The family itself consists of different variants and shades of a colour.
- InterchangeableWe can replace one colour family with another since different colours with the same gradation value share the same lightness (OKLCH), so all shades of a level are evenly bright.
- Accessible by default(WCAG) 2 Level AA is met for all colours with white (up to level 50) or black (from level 60) text colour.
Accessibility values¶
We ensure that we achieve at least level AA, with AAA being desirable. That means:
Level AA requires a contrast between foreground and background of at least:
4.5 for text
3 for headlines & large text
Level AAA requires a contrast of at least:
7 for text
4.5 for headlines & large text
Interface elements require a contrast of at least 3.
black |
level 10 |
level 20 |
level 30 |
level 40 |
level 50 |
level 60 |
level 70 |
level 80 |
level 90 |
level 100 |
white |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Contrast-Ratio White |
— |
— |
— |
— |
7 |
4.5 |
— |
— |
— |
— |
— |
— |
Text normal |
AAA |
AAA |
AAA |
AAA |
AAA |
AA |
— |
— |
— |
— |
— |
— |
Text large / Headlines |
AAA |
AAA |
AAA |
AAA |
AAA |
AAA |
— |
— |
— |
— |
— |
— |
Contrast-Ratio Black |
— |
— |
— |
— |
— |
3 |
4.5 |
7 |
— |
— |
— |
— |
Text normal |
— |
— |
— |
— |
— |
— |
AA |
AAA |
AAA |
AAA |
AAA |
AAA |
Text large / Headlines |
— |
— |
— |
— |
— |
AA |
AAA |
AAA |
AAA |
AAA |
AAA |
AAA |
The values are the minimum contrasts over all colour families. For the exact contrast of every shade, have a look at the colour report.
Usage tips¶
Use |
Light (white) background |
Dark (black) background |
|---|---|---|
Text |
10–50 |
60–100 |
Borders & icons |
10–50 |
60–100 |
Accents (sparingly) |
40–50 |
60–70 |
Backgrounds |
80–100 |
10–30 |
Tip
orange-60 is the orange of the logo and the primary colour of our theme.