Colour Contrast Checker
Improve the engagement of your social media posts, adverts, fliers and more. Guarantee maximum readability by selecting your text and background colours and find out straight away if the combination is easy to read. Use this tool to check if your text and background colours pass the WCAG checks for contrast.
How to use this tool
Change the sample text to match a snippet of your own text.
Use the sliders, enter the RGB or HEX values, for the foreground (text) and background colours you want to check.
View your colour contrast results.
Adjust the colours if needed, and copy the values into your design software for perfect colour contrast!
Foreground
Background
Large Text
AA Rating
Normal Text
AA Rating
Large Text
AAA Rating
Normal Text
AAA Rating
What to do my results mean?
There are two levels text needs to pass, an acceptable level which follows the requirements for WCAG AA, and an exceptional level which follows the requirements for WCAG AAA.
Normal text is categorised as text of normal weight, not bold, with a size of 16pt or smaller.
Large text is text of normal weight with a size larger than 16pt.
For text to be easiest to read on a screen, or in print, and therefore be as accessible as possible, it is recommended to use a background colour and foreground colour that pass both exceptional AAA tests for large text and normal text.
Interested in getting a website?
We aim to respond to your email within two business days when possible.
By contacting me via email you are confirming that you agree with our Privacy policy and Terms and Conditions