Colour contrast checker
Combinations of colours passing A, AA and AAA standards
Use our tool to check your brand colour combinations for accessibility
Contrast and the use of colour are vital to accessibility, and since inclusivity is one of our core values so we always strive to create websites which pass AA for colour contrast.
Good color contrast for your website design benefits all your visitors and is really helpful to people with certain types of color blindness and visual conditions who may find it difficult to differentiate between similar colors. If a visitor does not see bright and dark areas easily, they will have trouble seeing edges, borders, and other details.
Our innovative colour contrast checker enables our designers and clients to easily check which of their brand colours pass the various AA and AAA standards for colour contrast.
WCAG colour contrast standard
When designing websites, the WCAG guidelines recommend the following contrast ratios:
| Type of content | Minimum ratio (AA rating) | Enhanced ratio (AAA rating) |
|---|---|---|
| Body text | 4.5 : 1 | 7 : 1 |
| Large-scale text (120-150% larger than body text) | 3 : 1 | 4.5 : 1 |
| Active user interface components and graphical objects such as icons and graphs | 3 : 1 | Not defined |
AA Success Criterion (SC)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes
Text that is part of a logo or brand name has no contrast requirement.
Find out more about this standard on the w3.org website.
Using our colour contrast checker
1/ Open the checker in your browser contrast-checker.indigotree.co.uk
2/ Enter the rgb or hex colour codes for all of your brand colours and background colours
3/ Move the slider to the colour contrast standard required
4/ Save the link or screenshot the page to refer to later as it includes the colours you have entered – for example our brand colour contrast check
https://contrast-checker.indigotree.co.uk/#000000,ffffff,201751,5427dc,efefef,ede8ff