Colour contrast is accessibility
Colour contrast isn’t just a design preference; it is a fundamental requirement for making your content legible for everyone, especially those with visual impairments or colour blindness. In the UK, compliance often hinges on meeting the global WCAG 2.1 (Web Content Accessibility Guidelines).
Our new, checker uses the official W3C formula to measure the contrast ratio between your foreground and background colours. Use this tool to instantly verify that your designs meet the critical AA and AAA accessibility benchmarks.
Accessibility Everyday
I’m thrilled to be posting this tool today, as it perfectly aligns with the spirit of Purple Tuesday. While awareness days are crucial, our goal should always be to transition that awareness into daily practice. Let’s champion the idea of accessibility not just on one day, but by making Accessibility Everyday!
Enjoy the checker and share it with anyone working on digital projects of any kind—webpages, SM posts, ads, brochures, presentations, and all marketing materials for your business.
WCAG Colour Contrast Checker
Enter your foreground and background colours to instantly verify compliance with WCAG 2.1 AA and AAA standards.
Live Preview
This is normal size text (18px/1.125rem) to test AA/AAA compliance.
This is large size text (24px/1.5rem bold) to test AA/AAA compliance.
Contrast Results
Level AA Check
Minimum requirement for most content.
- Normal Text (4.5:1): —
- Large Text (3.0:1): —
Level AAA Check
Enhanced requirement for critical content.
- Normal Text (7.0:1): —
- Large Text (4.5:1): —
Frequently Asked Questions
What do WCAG Levels AA and AAA mean?
They represent increasing levels of accessibility strictness:
- Level AA (Double-A): This is the minimum required standard for most public digital content, including the UK public sector. It ensures content is legible for most users with moderate vision loss.
- Level AAA (Triple-A): This is the enhanced or ideal standard. It satisfies a wider range of user needs, including those with more severe vision loss, requiring significantly higher contrast.
Why does “Large Text” (3.0:1) have a lower required contrast ratio than Normal Text (4.5:1)?
Larger text (specifically 18pt/24px or 14pt/19px bold) is inherently easier for the human eye to distinguish. The WCAG standards acknowledge this by permitting a lower Level AA contrast threshold (3.0:1) for large text, as its size helps compensate for reduced contrast.
How is the Contrast Ratio calculated?
The ratio is not based on a simple colour difference. It is derived from the Relative Luminance of both the foreground and background colours, which is a calculation defined by the W3C that measures the perceived light intensity of a colour. This formula accounts for how the human eye perceives different wavelengths, ensuring the result is reliable and accurate to the standard.
Does this checker work for colours other than black and white?
Yes, absolutely. The luminance calculation used by the checker is based on the full RGB spectrum, meaning it accurately measures the contrast ratio between any two colours, whether they are dark, light, saturated, or desaturated (e.g., green text on a blue background).