Colour and contrast
Provide good contrast and avoid using colour alone to convey meaning. This enhances readability for everyone, especially those with colour vision differences.
Colour and contrast in AgDS
We go beyond the criteria for accessible colour and contrast, often achieving a higher level of contrast than required. The contrast between the foreground and background colours for components and their interactive states are all accessible. This means you can be confident in applying design system colours and components to your projects.
Our use of strong contrast between foreground and background elements in all our components achieved full WCAG conformance in accessibility audits in 2022 and 2024. Implementation of AgDS colour and contrast in our patterns is demonstrated in the yourGov application.
Requirements
- All text has a contrast ratio of at least 4.5:1 against its background.
- Important user interface or graphic elements that convey information achieve a contrast of 3:1 against the background.
- Colour is not the only visual means of conveying information – for example, destructive actions should use additional indicators beyond use of the colour red.
Benefits
- Makes content accessible to users with colour blindness and low vision.
- Provides cues that reinforce meaning for all users.
- Improves usability when using screen filters or monochrome displays.
- Ensures content remains accessible in high-contrast modes.
- Supports comprehension across diverse cognitive and perceptual abilities.