Colour

VUD colour system is a structured set of colours used consistently throughout a user interface to help you create visual harmony, hierarchy, and meaning.

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.

 

 

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.

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.

null
null
null

 

 

 

 

 

 

 

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
null

 

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.