Colour accessibility matrix
When we design a palette of brand colours, we should ensure that the colours we select for text and graphics have enough contrast to the surrounding objects. This is essential because it enables people with visual impairments or colour vision deficiencies to interact with the digital experience in the same way as their non-visually-impaired counterparts.
Enter colours
Click within the input below and enter your brand colours in hexidecimal, click on "add swatch" to enter the colour into the grid. You can remove a swatch by clicking on the (x) button on the corresponding list item.
- #FFFFFF#FFFFFF
- #000000#000000
Results
| #FFFFFF | #000000 | ||
|---|---|---|---|
| #FFFFFF | AAA Large Text: WCAG AAA Text: WCAG AAA Graphical Elements: WCAG AA | ||
| #000000 | AAA Large Text: WCAG AAA Text: WCAG AAA Graphical Elements: WCAG AA |
Share your results
About your scores
Rating G
Contrast ratio is at least 3:1.
- Suitable for User Interface Components and Graphical Objects where no text is used (WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast).
- Suitable for large-scale text (at least 18 point if not bold and at least 14 point if bold) and images of large-scale text (WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum).
- View all examples of brand colour combinations with a ratio of 3:1 and above.
Rating AA
Contrast ratio is at least 4.5:1
- Suitable for the visual representation of text and images of text to minimum level (WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum).
- Suitable for large-scale text (at least 18 point if not bold and at least 14 point if bold) and images of large-scale text (WCAG 2.1 Success Criterion 1.4.6 Contrast (Enhanced)
- Suitable for User Interface Components and Graphical Objects where no text is used (WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast)
- View all examples of brand colour combinations with a ratio of 4.5:1 and above.
Rating AAA
Contrast ratio is at least 7:1.
- Suitable for the visual representation of text and images of text at enhanced level (WCAG 2.1 Success Criterion 1.4.6 Contrast (Enhanced).
- Suitable for User Interface Components and Graphical Objects where no text is used (WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast).
- View all examples of brand colour combinations with a ratio of 7:1 and above.