Colour Contrast Checker (WCAG)
Check the contrast ratio between a text colour and a background colour against the WCAG accessibility guidelines used for websites, apps and printed design.
Choose Your Colours
Preview & Result
Example Heading Text
This is an example of smaller body text on this background colour.
How to Use This Tool
Pick a text colour and a background colour, either by using the colour pickers or by typing a hex code directly. The preview updates instantly to show what your text would actually look like, and the contrast ratio is calculated using the same formula the Web Content Accessibility Guidelines (WCAG) use.
What the Pass and Fail Badges Mean
WCAG 2.x defines minimum contrast ratios for readable text: 4.5:1 for normal text and 3:1 for large text (roughly 18pt or 14pt bold) at the AA level, which is the most commonly required standard. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. This tool checks your chosen colours against all four thresholds at once.
Example
Dark charcoal text (around #1A1A1A) on an off-white background (around #FBF6EF) typically produces a very high contrast ratio, comfortably passing every level. Light grey text on a white background, by contrast, often fails even the basic AA requirement, which is a common accessibility mistake in web and packaging design.
Why Contrast Matters
Good contrast helps people with low vision, colour vision deficiencies, or those simply viewing a screen in bright sunlight read your content comfortably. It is also a legal accessibility requirement in many contexts for websites and digital products.
Frequently Asked Questions
What does this tool check?
It calculates the WCAG contrast ratio between a text colour and a background colour, and shows whether that ratio passes the common AA and AAA accessibility thresholds.
What contrast ratio do I need?
Most guidelines require at least 4.5:1 for normal text and 3:1 for large text at the AA level, which is the standard most commonly referenced for websites and apps.
What is the difference between AA and AAA?
AA is the standard level most sites aim for. AAA is a stricter, enhanced level requiring higher contrast, generally recommended but not always required.
Does this only apply to websites?
The WCAG formula was written for digital screens, but good contrast is just as useful to check for printed artwork, packaging text, and hand-lettered pieces meant to be read easily.
Why did my colours fail?
Colours that are close in lightness, even if their hues look different, often have low contrast. Try making one colour noticeably darker or lighter rather than changing its hue.
Does colour alone affect the result?
The formula is based on relative luminance (perceived lightness), not hue, so two very different-looking colours can still have poor contrast if they are similarly light or dark.
Is this the official WCAG calculation?
Yes, this tool uses the standard WCAG relative luminance and contrast ratio formulas published by the W3C.
Is this tool free to use?
Yes, this tool is completely free to use with no sign-up 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 KitsThis tool implements the standard WCAG 2.x relative luminance and contrast ratio formulas published by the W3C. It is provided as a helpful reference and does not constitute legal or professional accessibility advice or certification.