Skip to content

Color Contrast Checker

Short answer

Check text-to-background color contrast ratios against WCAG AA/AAA standards.

What it does not do: It checks only the two colours you enter; it does not scan a page, and text over images or gradients needs a manual check.

Free · No signup · Runs in your browser
4.54Contrast ratio

Borderline contrast — check large-text use.

The quick brown fox jumps

The quick brown fox jumps

AA · normal textPass
AA · large textPass
AAA · normal textFail
AAA · large textPass

How to improve

WCAG level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). Aim for 7:1 (AAA) where you can — it keeps text readable for low-vision users and in bright sunlight.

What It Does

Computes the WCAG contrast ratio between any foreground and background color you enter, using the same relative-luminance formula as the WCAG spec, and checks it against the AA and AAA thresholds for normal and large text (4.5:1 / 3:1 for AA, 7:1 / 4.5:1 for AAA). Shows a live text preview in your colors alongside a pass/fail badge for each threshold.

Why It Matters

Low-contrast text is the most common automatically detected accessibility failure on home pages in WebAIM's yearly Million report, and it is one of the easiest to fix with a color change. WCAG 2.1 success criterion 1.4.3 sets the minimum ratios, and EN 301 549 — the standard behind the European Accessibility Act — applies them to web content.

How It Works

  1. Enter or pick a foreground (text) color and a background color

  2. We calculate the WCAG relative-luminance contrast ratio between the two colors

  3. Check the ratio against the AA and AAA thresholds for normal and large text

  4. See a live preview of your text on your background plus a pass or fail badge for each threshold

Sample input + output

INPUT
foreground: #767676
background: #ffffff
OUTPUT
contrast ratio: 4.54:1

AA normal text (4.5:1)      PASS
AA large text (3:1)         PASS
AAA normal text (7:1)       FAIL
AAA large text (4.5:1)      PASS

How to read the result

Contrast ratio (4.54:1 in the sample)
How much lighter the lighter colour is than the darker one, from 1:1 (the same colour) to 21:1 (black on white). It uses the relative luminance formula defined in WCAG 2.1, so the result matches any tool that follows the standard.
AA normal text (4.5:1)
The level the European Accessibility Act points to through EN 301 549: body text needs at least 4.5:1. #767676 on white passes at 4.54:1, which makes it the lightest plain grey that passes on white — #777777 already fails.
AA large text (3:1)
Large text — at least 18pt (24px), or 14pt (about 18.7px) in bold — needs 3:1. User-interface parts and meaningful graphics, such as input borders and icons, need 3:1 against what surrounds them too (WCAG 1.4.11).
AAA (7:1 and 4.5:1)
The enhanced level. Neither the EAA nor EN 301 549 requires it, but it helps people with low vision and anyone reading a screen in bright light. The sample passes AAA for large text and fails it for normal text.
Preview and colour of the ratio
Your text in your two colours, in two sizes, so you judge the pair by eye as well as by the number. The ratio shows green from 7:1, amber from 4.5:1 — a pass for AA — and red below that.

Who Uses This

  • Designer

    Validate brand color palette against WCAG before locking it in. Many "modern" pastels fail 4.5:1 against white — better to discover before applying brand-wide.

  • Accessibility Auditor

    Check each text and background color pair against AA and AAA thresholds before signing off a client's EAA accessibility statement.

  • Frontend Developer

    Catch contrast regressions introduced by CSS-variable theme changes before they reach production.

Common problems and how to fix them

  1. Light grey text on white

    Grey placeholder, caption and footer text is the usual failure. Use #767676 or darker on white for normal text; on a coloured background, change the lightness of one colour and check again.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  2. The brand colour is too light for text

    Keep the brand colour for large headings, icons and backgrounds, and use a darker shade of it for small text and links. A darker shade still reads as the brand.

  3. White text on a coloured button

    Check the button colour against white as well as against the page. If it fails, darken the button or put dark text on it, and check the hover and focus colours the same way.

  4. Text over images or gradients

    There is no single background colour to measure. Check the lightest part behind the text, or put a solid or semi-transparent layer behind it so the ratio holds everywhere.

  5. Links that differ from text only by colour

    If links in running text are shown only by their colour, that colour also needs 3:1 against the surrounding text (W3C technique G183), plus another cue on hover and focus. An underline is the simpler fix.

Frequently Asked Questions

What WCAG ratio do I need?
4.5:1 for normal text, 3:1 for large text (≥18pt or ≥14pt bold) and UI components. WCAG 2.1 AAA requires 7:1 — a higher bar most brands don't target.
Does this check images and icons?
Text contrast only, and only for the two colors you enter here. Image contrast (e.g. text-on-image hero banners) needs manual review — there is no automatic page scan.
What contrast does the EAA require?
For web content, EN 301 549 v3.2.1 applies WCAG 2.1 Level AA, including 1.4.3 — so text needs at least 4.5:1 against its background (3:1 for large text). Check every pair your site uses.

Sources

The documentation this tool and the explanations on this page are based on.

Free tools on this topic

Guides on this topic

Research data on this topic

Related Tools in EAA Compliance

View all EAA Compliance tools