UoS Brand Accessible Colour Suggester
Introduction
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.
Customisation
Upload Your Colors
Upload JSON
JSON file with color hex codes and names
Example format:
[ {"colourHex": "#FFFFFF", "name": "White"}, {"colourHex": "#000000", "name": "Black"} ]
Upload CSV
CSV file with colors (supports multiple formats)
Supported formats:
HEX,NAME #FFFFFF,White #000000,Black
NAME,HEX White,#FFFFFF Black,#000000
HEX #FFFFFF #000000
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.