Colour Contrast Checker
Check the contrast between a text colour and a background colour against WCAG accessibility guidelines, with an instant live preview and pass or fail results.
Choose Two Colours
Live Preview
Large Text Sample
Normal body text sample, the kind you would read in a paragraph.
Results
Contrast ratio: 14.29:1
How to Use the Colour Contrast Checker
Enter a text colour and a background colour as HEX codes, or use the Random Colours button. The live preview updates instantly to show sample text in your chosen colours, and the results list shows whether that pairing passes each Web Content Accessibility Guidelines (WCAG) contrast level. Use the Swap Colours button to quickly check the reverse combination.
How the Maths Works
This tool calculates the relative luminance of each colour using the WCAG 2.x formula, which weights the red, green and blue channels differently to match how the human eye perceives brightness, applying a gamma correction step to each channel first. The contrast ratio is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. A ratio of 21:1 is the maximum possible, produced by pure black against pure white.
Contrast in Artist Websites and Digital Work
Good contrast between text and background matters whenever you are labelling artwork online, building a shop listing, designing a print label, or adding text over a photograph of your work. Text that looks fine to one viewer can be very hard to read for someone with low vision or colour vision deficiency if the contrast is too low, so checking your colour pairings against WCAG guidelines is a simple way to make sure your work and words are accessible to as many people as possible.
Examples
Frequently Asked Questions
What is a colour contrast checker?
A colour contrast checker measures how easy it is to read text of one colour placed on a background of another colour, and compares that measurement against the Web Content Accessibility Guidelines (WCAG).
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines, an internationally recognised set of standards for making digital content usable by people with a wide range of vision and other abilities.
What do the AA and AAA levels mean?
AA and AAA are two levels of WCAG conformance. AA is the commonly targeted standard and requires a contrast ratio of at least 4.5:1 for normal text. AAA is a stricter standard and requires at least 7:1 for normal text.
Why do large text and normal text have different requirements?
Larger text is easier to read at lower contrast because its shapes are bigger and clearer, so WCAG allows a lower minimum ratio (3:1 for AA) for text that is at least 18 point, or 14 point and bold.
What counts as a good contrast ratio?
For most body text, aim for at least 4.5:1 to meet the widely used AA standard. Headings and large text can pass at 3:1, though higher ratios are always safer and easier to read.
How is the contrast ratio calculated?
Each colour's relative luminance is calculated from its red, green and blue values using the WCAG formula, and the contrast ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05.
What does the UI Components and Graphics check mean?
This checks contrast for things like button borders, icons and form field outlines against their background, which WCAG 2.1 requires to be at least 3:1 so people can see where controls are.
Does this tool check colour blindness specifically?
No. This tool checks luminance contrast, which benefits people with low vision and most forms of colour vision deficiency, but it does not simulate specific types of colour blindness.
Can I use this to check my artwork listing or website text?
Yes. Enter the text colour and background colour you are planning to use for a listing, label or web page, and check the results before you publish.
Can I use the keyboard instead of a mouse or touchscreen?
Yes. Tab between the two HEX fields and the Swap, Random and Reset buttons, all of which are fully keyboard operable.
Can I use this tool on my phone or tablet?
Yes. The fields, preview and results grid all resize to work comfortably on phones and tablets as well as desktop screens.
Is my colour data stored or sent anywhere?
No. All contrast calculations happen directly in your browser. Nothing you type is sent to a server or stored.
Is this Colour Contrast Checker free to use?
Yes, it's completely free to use, with no account, sign-up or download required.
Related Colour Tools
Ready to Create with Colour?
Explore beginner-friendly Creative Flair by Sana painting kits with carefully selected colours and approachable step-by-step guidance.
Explore Painting KitsDigital colour results are provided for planning and educational purposes. Screens, printers, paint brands, pigments, paper and lighting can change how a colour appears. Test important colours before using them in a final artwork or print project.