Obligated to comply with WCAG 2.2 AA
VUD colour system adheres to Web Content Accessibility Guidelines (WCAG), a set of guidelines and standards from the World Wide Web Consortium (W3C) for web accessibility.
Level A provides the minimum level of accessibility
Level AA is the recommended level to achieve a good level of accessibility.
Level AAA includes additional guidelines to enhance accessibility further but may be challenging to implement fully in some cases.
|
Type |
AA (WCAG level) |
AAA (WCAG level) |
|---|---|---|
|
Normal text below 24px |
4.5:1 against the background |
7:1 against the background |
|
Large text above 24px |
3:1 against the background |
4.5:1 against the background |
|
Graphical elements such as charts |
3:1 against the background |
... |
When you improve colour accessibility, you'll most likely enhance the usability of all people, including people with accessibility needs such as low vision, colour-deficient partial sight, or blindness. Here are some common factors to consider.
Use significant colour contrast
Partial eyesight, ageing, and natural colour deficits all produce changes in perception that reduce the visual effects of any colour combinations. Two colours that contrast sharply to someone with normal vision may be far less distinguishable to someone with a visual disorder.
Perception:
To a person with colour-deficient partial sight, the left-hand side might appear as the right-hand side appears to a person with normal colour vision.
Low-contrast examples adjacent to one another
Example of low-contrast examples placed next to each other. The top row shows normal color vision, while the bottom row shows partial color deficiency.
|
|
|
|
|
|
|
Make effective colour choices that work for everyone
Compensate for deficits by making colours differ more dramatically in the colour’s three attributes; hue, lightness and saturation.
How to choose colours from the colour palette
- Avoid using hues with similar brightness that gives low contrast
- Use dark hues against the light hues to pass the Contrast Checker
Design for colour blindness
Accommodating colour blindness is just one aspect of creating an inclusive design. It's important to provide alternative visual cues or indicators to convey information, and not just rely solely on a colour. This helps ensure that individuals with colour blindness can still understand and interact with the interface effectively.
For example, use labels, patterns, icons, or text in conjunction with colours to provide additional context and clarity.
Related content