Free WCAG Colour Contrast Checker

Try out our Free WCAG Colour Contrast Checker, a fast and easy way to check the contrast ratio between any two colours and instantly see how they perform against WCAG 2.2 AA and AAA guidelines. It’s perfect for designers, developers and business owners ensuring your content is readable and inclusive.

Contrast

Enter your colours

Instantly measure the contrast ratio between any two colours, see how they perform against WCAG 2.2 AA and AAA success criteria, and share your findings with a single link.

Preview

Live preview & contrast ratio

Small sample text · 14pt / 18.5px

Accessibility empowers every visitor. Keep contrast strong for clear readability.

Large sample text · 18pt / 24px

Inclusive design starts with legible colours.

Graphics or icon

★
4.5:1 Contrast ratio

WCAG 2.2 calculates contrast using relative luminance of the foreground and background colours.

Scores

WCAG pass / fail summary

Scenario AA AAA
Small text (under 18pt) AA AAA
Large text (18pt+ or bold 14pt) AA AAA
Icons & graphical objects AA AAA

Why Good Colour Contrast Matters

Ensuring good colour contrast is a key part of making websites accessible. For someone with low vision, older eyesight or other visual impairments, poor contrast can mean text is hard to read or even invisible — leading to frustration, exclusion or simply leaving your site. According to RNIB, more than two million people in the UK are living with sight loss. 

By getting your background and foreground colours right, you help everyone — whether they’re using large fonts, zooming in, reading on a mobile device in bright light, or relying on assistive technologies. Good contrast supports readability, enhances user experience, and helps you meet accessibility standards (such as WCAG 2.2) — which is also important from a legal and reputational standpoint.

General Guidance for Colour Contrast

Here are some practical tips to keep your site accessible and inclusive:

  • Use a reliable contrast-checker (like this tool) to test all text and important graphics.
  • Aim for a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text/graphics according to WCAG.
  • For enhanced accessibility (AAA level), aim for 7:1 (normal text) or 4.5:1 (large text).
  • Test your colours in real-world conditions: e.g., outdoors on mobile, in sunlight, with glare, or when zoomed.
  • Be careful with coloured text on backgrounds (especially if the background is patterned or has overlay).
  • Don’t rely on colour alone to communicate important information (e.g., status indicators). Use icons, labels, patterns.
  • Maintain consistent contrast across your site: navigation, buttons, form fields and error messages all need good readability.
  • Remember: contrast is not just for low-vision users — it improves usability for everyone (older users, mobile users, people in bright light, etc.).
  • Review and update your colour palette regularly. As your branding changes, re-check accessibility.
  • Document your accessibility decisions (colour choices, contrast test results) to support future audits or proof of compliance.