Colour contrast checker

Combinations of colours passing A, AA and AAA standards

Home Insights Innovation Colour contrast checker
colour contrast

Use our tool to check your brand colour combinations for accessibilty

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 contentMinimum ratio (AA rating)Enhanced ratio (AAA rating)
Body text4.5 : 17 : 1
Large-scale text (120-150% larger than body text)3 : 14.5 : 1
Active user interface components and graphical objects such as icons and graphs3 : 1Not 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;

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.

Text that is part of a logo or brand name has no contrast requirement.

Find out more about this standard on the website.

Using our colour contrast checker

1/ Open the checker in your browser

2/ Enter the rgb or hex colour codes for all of your brand colours and background colours

Colour contrast checker for Indigo Tree brand colours
Indigo Tree brand colours

3/ Move the slider to the colour contrast standard required

AA colour contrast for Indigo Tree
Our brand colours that pass AA

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,ffffff,201751,5427dc,efefef,ede8ff