Askem

Free Tool

Color Contrast Checker

Check the contrast ratio between two colors against WCAG 2.1 AA and AAA requirements. Tests normal text, large text, and graphical UI components — the same criteria required by the European Accessibility Act.

Text color

#FFFFFF

Background color

#4D65FF

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (24px) — The quick brown fox jumps.

4.54:1 contrast ratio
WCAG AAPassNormal text4.5:1
WCAG AAPassLarge text3:1
WCAG AAAFailNormal text7:1
WCAG AAAPassLarge text4.5:1
WCAG 2.1PassUI elements3:1

Color blindness simulation

Sample text preview

Large text

Protanopia

~1.3% of males

Fail

Sample text preview

Large text

Deuteranopia

~1.2% of males

Pass

Sample text preview

Large text

Tritanopia

~0.01% of population

Pass

Sample text preview

Large text

Achromatopsia

~0.003% of population

Pass

What is a color contrast checker?

A colour contrast checker is a tool that calculates the luminance ratio between a foreground (text) colour and a background colour, then compares it against WCAG 2.1 accessibility thresholds. Insufficient color contrast is the most common WCAG failure on the web, found on 83.6% of home pages according to the WebAIM Million 2024 analysis. This free tool by Askem tests all five WCAG contrast criteria and includes color blindness simulation for four vision types.

WCAG 2.1 contrast requirements

ElementWCAG AAWCAG AAA
Normal text (< 18pt / < 14pt bold)4.5:17:1
Large text (≥ 18pt / ≥ 14pt bold)3:14.5:1
UI components & graphical objects3:1—

How to check color contrast

Enter your text colour and background colour using the hex input, RGB values, or the colour picker. The tool calculates the relative luminance of each colour and divides the lighter value by the darker value to produce the contrast ratio. It then compares this ratio against all five WCAG 2.1 thresholds and shows a pass or fail result for each.

If a colour pair fails, the tool automatically suggests the nearest passing combination by adjusting the lightness of your foreground colour. Click Apply to update both colours instantly. The URL updates with every change, so you can share a specific contrast check by copying the link.

Color contrast and the European Accessibility Act

The European Accessibility Act (EAA) references the EN 301 549 standard, which incorporates WCAG 2.1 Level AA requirements. This means organisations subject to the EAA must ensure their websites meet at least 4.5:1 contrast for normal text, 3:1 for large text, and 3:1 for UI components.

An accessibility audit typically flags colour contrast as one of the first issues. Using a contrast checker during the design phase prevents these failures before they reach production.

Why colour contrast matters for accessibility

When text does not have enough contrast against its background, it becomes difficult or impossible to read for people with low vision, colour blindness, or anyone using a screen in bright sunlight. Proper contrast benefits all users — not just those with disabilities.

This tool checks a single colour pair. To scan your entire website for contrast issues and other accessibility violations automatically, see Askem Quality Assurance. You can also test your full site with our website accessibility checker.

Last updated: March 2026

Frequently Asked Questions

What contrast ratio is required for WCAG AA?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. Large text is defined as 18 points (24px) or 14 points (18.66px) bold.
What contrast ratio is required for WCAG AAA?
WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for normal-sized text and 4.5:1 for large text. AAA is the highest level of conformance.
What counts as large text in WCAG?
Large text is 18 points (24px) or larger, or 14 points (18.66px) bold or larger. Large text has a lower contrast requirement because bigger characters are easier to read at lower contrast.
What is the minimum contrast for UI components?
WCAG 2.1 Success Criterion 1.4.11 requires a contrast ratio of at least 3:1 for user interface components (such as form input borders, buttons, and focus indicators) and graphical objects.
Does the European Accessibility Act require color contrast compliance?
Yes. The European Accessibility Act (EAA) references the EN 301 549 standard, which includes WCAG 2.1 Level AA requirements. This means all color contrast requirements — 4.5:1 for normal text, 3:1 for large text, and 3:1 for UI components — apply to websites and digital services covered by the EAA.
How do I fix a failing contrast ratio?
Increase the lightness difference between your foreground and background colors. Darken light text on a light background, or lighten text on a dark background. This tool suggests the nearest passing colour combination automatically when a pair fails.
How does color blindness affect contrast perception?
Color blindness changes which colors a person can distinguish, but WCAG contrast ratios are based on luminance, not hue. A color pair that passes WCAG contrast requirements generally remains readable for people with color blindness. This tool shows simulations for protanopia, deuteranopia, tritanopia, and achromatopsia so you can verify.
Can I share my contrast check results?
Yes. The URL updates automatically with your selected colors. Copy the URL to share a specific color combination. You can also click the Copy results button to get a text summary for pasting into compliance documentation or chat.
What is a color contrast checker?
A color contrast checker is a tool that calculates the luminance ratio between a foreground (text) color and a background color, then compares it against WCAG 2.1 accessibility thresholds. It helps designers, developers, and content teams verify that their color choices meet accessibility standards before publishing.
Is this contrast checker free to use?
Yes. This colour contrast checker is completely free with no login, no account, and no usage limits. It runs entirely in your browser — no data is sent to any server.

This checks one pair of colors. Askem scans your entire site automatically.

  • Continuous WCAG monitoring
  • Contrast, alt text, headings, and more
  • GDPR compliant — EU hosted
Book a meeting