Colour
StableColour tokens store the colour variables for styling elements.
Accessibility
Things to note
- When choosing and using colours, always check that sufficient colour contrast between the element and its background is maintained. All colour choices should comply with WCAG 2.1 Standard at AA Level contrast ratios.
- Do not rely solely on colour when communicating information to the user – especially crucial system information like error state, success state, or warnings. Also, convey the same information with another modality, e.g. with a text label or icon that clearly indicates its meaning.
Accessible colour combinations
Here you can find some recommended colour combinations for text and other informative elements. The examples are sorted in order of their contrast ratio. For more examples of accessible colour combinations, see the Colour accessibility examples - Abstract collection.
- AA (contrast ratio at least
4,5 : 1) and AAA (contrast ratio at least7 : 1) means you can safely use the color combination on all text sizes - AA for large text (contrast ratio at least
3 : 1) means the text size should be at least 18 pt for regular weight or 14 pt for bold weight - Black 90 is the default text colour in HDS
Brand colour combinations
Combining a brand colour background with the correct text colour is important to maintain a high contrast.
| Colour name (en) | Text colour token | Colour contrast (WCAG) | Example |
|---|---|---|---|
| Engel | --color-black-90 | AAA 14,3 : 1 | AAA |
| Silver | --color-black-90 | AAA 13,1 : 1 | AAA |
| Bus | --color-white | AAA 12 : 1 | AAA |
| Summer | --color-black-90 | AAA 11,1 : 1 | AAA |
| Fog | --color-black-90 | AAA 10 : 1 | AAA |
| Copper | --color-black-90 | AAA 9,4 : 1 | AAA |
| Suomenlinna | --color-black-90 | AAA 9,1 : 1 | AAA |
| Gold | --color-black-90 | AAA 7,1 : 1 | AAA |
| Brick | --color-white | AA (AAA for large text) 6,1 : 1 | AA |
| Metro | --color-black-90 | AA (AAA for large text) 5,2 : 1 | AA |
| Coat of Arms | --color-white | AA (AAA for large text) 5 : 1 | AA |
| Spåra | --color-white | AA (AAA for large text) 4,6 : 1 | AA |
For text and other informative elements on white background it is recommended to only use following brand colours:
| Colour name (en) | Colour contrast (WCAG) | Example |
|---|---|---|
| Bus | AAA 12 : 1 | AAA |
| Brick | AA (AAA for large text) 6,1 : 1 | AA |
| Coat of Arms | AA (AAA for large text) 5 : 1 | AA |
| Tram | AA (AAA for large text) 4,6 : 1 | AA |
| Metro | AA for large text 3,3 : 1 | A |
Grayscale combinations
When using grayscale tokens, be mindful of the contrast. Black tokens below --color-black-50 do not have sufficient contrast on white backgrounds. Lighter blacks can be used on darker backgrounds or as colour of disabled elements.
| Colour name (en) | Text colour token | Colour contrast (WCAG) | Example (background) | Example (text) |
|---|---|---|---|---|
| Black | --color-white | AAA 21 : 1 | AAA | AAA |
| Black-90 | --color-white | AAA 17,4 : 1 | AAA | AAA |
| Black-80 | --color-white | AAA 12,6 : 1 | AAA | AAA |
| Black-70 | --color-white | AAA 8,6 : 1 | AAA | AAA |
| Black-60 | --color-white | AA (AAA for large text) 5,7 : 1 | AAA | AAA |
| Black-50 | --color-black-90 | AA for large text 4,3 : 1 | A | A |
| Black-40 | --color-black-90 | AAA 6,1 : 1 | AAA | AAA |
| Black-30 | --color-black-90 | AAA 8,2 : 1 | AAA | AAA |
| Black-20 | --color-black-90 | AAA 10,8 : 1 | AAA | AAA |
| Black-10 | --color-black-90 | AAA 13,8 : 1 | AAA | AAA |
| Black-5 | --color-black-90 | AAA 15,4 : 1 | AAA | AAA |
| White | --color-black-90 | AAA 17,4 : 1 | AAA | AAA |
Focus colour
HDS components use a custom focus colour styling instead of the default browser provided style. The default HDS focus style is 3px wide and accessible on light backgrounds. Since HDS does not offer dark mode, the focus style colour may require customising when using HDS components on darker backgrounds. The white focus colour is recommended if the default colour does not meet the contrast requirement. The WCAG requirement for user interface element contrast is 3 : 1. Additionally, a lighter 2px wide focus style can be used for sub-components where space is limited and a thicker focus might take up too much room.
| Colour name (en) | Background colour token | Colour contrast (WCAG) | Example |
|---|---|---|---|
| Coat of Arms | --color-white | AA 5 : 1 | |
| White | --color-black | AAA 21 : 1 |
HDS focus style colour can be customised to better fit the theme of the service. However, the implementor must always ensure that the following WCAG requirements are met:
- WCAG 1.4.1 Use of Color (Level A)
- WCAG 2.4.3 Focus Order (Level A) (while designing components with multiple focusable elements)
- WCAG 2.4.7 Focus Visible (Level A)
- While not officially part of WCAG yet, HDS also follows WCAG 2.4.11 Focus Visible (Enhanced). Due to their draft status, these requirements may still change. But we still recommend following them for future-proofing.