Colour Contrast Checker — WCAG Accessibility Tool

How to Use the Colour Contrast Checker

1. Open the colour contrast checker.
2. Enter the foreground colour (text colour) as a hex code (e.g., #333333), RGB, or use the colour picker.
3. Enter the background colour (e.g., #FFFFFF for white).
4. The checker instantly shows: contrast ratio (e.g., 7:1), and pass/fail for WCAG AA (normal text, large text, UI components) and AAA levels.
5. Adjust colours until you reach the required ratio for your use case.
6. Use the suggested alternative colours feature to find the nearest accessible version of your chosen colour.

WCAG Contrast Requirements

Common Contrast Failures in Web Design

How the Contrast Ratio Is Calculated

The WCAG contrast ratio uses relative luminance — not just perceived brightness:

1. Convert RGB to relative luminance: Each RGB component (0–255) is divided by 255 to get a 0–1 value, then linearised using a gamma correction formula: values ≤ 0.04045 are divided by 12.92; values above are computed as ((value + 0.055) / 1.055) ^ 2.4.
2. Compute luminance: L = 0.2126R + 0.7152G + 0.0722B (these weights reflect human vision — green contributes most to perceived brightness, red next, blue least).
3. Compute ratio: Contrast = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour and L2 the darker. The ratio ranges from 1:1 (no contrast — same colour) to 21:1 (maximum — pure black on pure white).

This formula means equal RGB differences do not produce equal contrast differences — dark-on-dark has very different characteristics to light-on-light. Two colours that look similar to a person with normal vision may have very different effects on users with low vision or colour blindness.

Contrast and Colour Blindness

Colour contrast requirements exist separately from colour blindness considerations, but overlap significantly:

• Deuteranopia (most common): Reduced sensitivity to green. Red-green distinction is impaired. ~6% of men.
• Protanopia: Reduced sensitivity to red. Red appears much darker. ~2% of men.
• Tritanopia: Blue-yellow confusion. Rare (~0.01% of population).
• Achromatopsia: Complete colour blindness; relies entirely on luminance contrast. Rare but important for worst-case design.

Sufficient luminance contrast (not just colour difference) is accessible to all forms of colour blindness — because luminance is perceived regardless of which colour receptors are functioning. This is why the WCAG formula uses luminance, not colour difference: a 4.5:1 contrast ratio is accessible to users with colour blindness even if the colours themselves look different to them.

Legal Requirements for Accessibility in the UK

Web accessibility is a legal requirement for many organisations in the UK:

• Public sector: The Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 require WCAG 2.1 AA compliance for all UK public sector websites and apps. Exemptions are narrow; enforcement is via the Equality and Human Rights Commission.
• Private sector: The Equality Act 2010 requires "reasonable adjustments" for disabled users. Inaccessible websites have been subject to legal challenges in the UK and EU. WCAG 2.1 AA is accepted as the standard of reasonable adjustment for digital services.
• EU: The European Accessibility Act (EAA) requires WCAG 2.1 AA for many private sector digital services from June 2025. UK businesses serving EU customers are affected.
• WCAG 2.2: Published in October 2023; adds requirements for focus visibility and drag-and-drop alternatives. The UK government has published guidance recommending 2.2 compliance.

Common Questions

What counts as "large text" for the 3:1 ratio?

WCAG defines large text as: 18 point (24px) or larger in regular weight, or 14 point (18.67px) or larger in bold weight. Note that CSS px values do not always map 1:1 to pt values depending on user settings and display. The practical threshold: heading text at 24px+ gets the 3:1 requirement; body text at 16–20px gets the 4.5:1 requirement. When in doubt, use 4.5:1 for any text that might be displayed at body text size.

Does this apply to images of text?

Yes — WCAG 1.4.3 applies to images of text as well as live text. Images containing text (infographics, screenshots with text overlays, decorative text images) must meet the same contrast requirements. The exception: logotypes (the brand name as a logo) are exempt from contrast requirements. However, alternative text for images containing important text must be provided regardless.

Our brand colours fail contrast — do we have to change them?

Not necessarily — you need to use them in accessible combinations. A light brand colour that fails as a text colour may work fine as a background with dark text. A dark brand colour works as text on light backgrounds. Most accessibility issues arise not from brand colours themselves but from combinations chosen without checking contrast. Using your brand colour as an accent colour (borders, icons, highlights) at 3:1 contrast, with sufficient-contrast dark text as the primary content colour, typically satisfies requirements without changing brand colours.