UoS Brand Accessible Colour Suggester
When we use a corporate brand, the requirement to ensure we make accessible choices may leave us reliant on a small set of colours. With each use of the Randomise button, a background colour, text colour, and three graphic colours will appear at random from the UoS brand. This may help you to choose a new accessible and on-brand colour combination for your next document, presentation, or infographic.
Use the Randomise button to get started!
Results
What does "WCAG Rating" mean?
WCAG means the Web Content Accessibility Guidelines. The rating refers to a number of WCAG success criteria outlined below and for what purpose the level of contrast is suitable.
- G: Contrast ratio is at least 3:1
-
- Tl;dr: Use for graphics / icons, but not text.
- 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.
- AA: Contrast ratio is at least 4.5:1
-
- Tl;dr: Use for text, graphics or icons.
- 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.
- AAA: Contrast ratio is at least 7:1
-
- Tl;dr: Use for text, graphics or icons. This meets the enhanced AAA level.
- 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.