ValidateHTML
Your sites

Color Contrast Checker

Enter a text colour and a background colour to get the WCAG 2.2 contrast ratio, a pass or fail for AA and AAA, and the closest colour that passes.

Contrast ratio

21.00:1

Passes AA and AAA for all text

Normal text, 16px. The quick brown fox jumps over the lazy dog.

Large text, 24px regular

Large text, 18.66px bold

ButtonIcon and border (1.4.11)

  • PassAA

    Normal text

    Needs 4.5:1, WCAG 1.4.3

  • PassAA

    Large text

    Needs 3:1, WCAG 1.4.3

  • PassAAA

    Normal text

    Needs 7:1, WCAG 1.4.6

  • PassAAA

    Large text

    Needs 4.5:1, WCAG 1.4.6

  • PassAA

    UI components and graphics

    Needs 3:1, WCAG 1.4.11

Contrast needs a rendered page, so our site scan does not measure it. It does read every page for the other WCAG failures: missing alt text, labels and names

WCAG Contrast Requirements

WhatAAAAACriterion
Normal text4.5:17:11.4.3 and 1.4.6
Large text: 24px regular, or 18.66px bold3:14.5:11.4.3 and 1.4.6
UI components and meaningful graphics3:1none1.4.11

The lightest grey that passes AA on white is #767676, at 4.54:1. One step lighter, #777777, is 4.47:1 and fails. Pure red #ff0000 on white is 3.99:1: enough for large text, not for body text.

Why the Exact Ratio Matters

WCAG sets minimums, not targets, and it does not round. A ratio of 4.4988:1 fails AA for normal text, even though it reads as 4.50 when rounded. That is not a theoretical case: it is #0078d7, the Windows accent blue, on white.

This checker decides every pass and fail on the exact value and displays it truncated, never rounded up, so the number on screen can only understate the ratio. When a pair fails, it computes the closest text colour and the closest background colour that pass, keeping the hue, so the fix is usually a shade you will not notice.

Contrast Is One Check Among Many

Low contrast is among the most frequent accessibility failures, and it is the one that needs real colours to measure. The others live in the markup: images without alt text, form fields without labels, buttons and frames without an accessible name. The Accessibility Checker finds those on any page, and the accessibility error guides explain each one, including how to fix low contrast across a design system.

Frequently Asked Questions

What contrast ratio does WCAG require?
Level AA, the level most laws and audits use, requires 4.5:1 for normal text and 3:1 for large text. Level AAA raises those to 7:1 and 4.5:1. Since WCAG 2.1, criterion 1.4.11 also requires 3:1 for the visible parts of controls, such as an input border or an icon button, and for graphics needed to understand the content.
What counts as large text?
WCAG defines large text as at least 18 point regular or 14 point bold. In CSS pixels that is 24px regular, or 18.66px bold. A 18px bold heading is therefore not large text and needs 4.5:1. Text that only looks large because of a decorative font does not count either: the size is what matters, not the appearance.
How is the contrast ratio calculated?
Each colour is converted to its relative luminance, a weighted sum of its red, green and blue channels after removing the sRGB gamma curve. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. It runs from 1:1 (identical colours) to 21:1 (black on white). The order of the two colours does not change the result.
Is 4.49:1 close enough to 4.5:1?
No. WCAG says at least 4.5:1, and there is no rounding in the definition. This checker compares the exact ratio and shows it truncated to two decimals, so it can never display 4.50 next to a fail. A checker that rounds can show the Windows accent blue #0078d7 on white as 4.50:1 when the exact value is 4.4988:1.
Which elements are exempt from contrast requirements?
Text that is part of a logo or brand name, purely decorative text, text in an inactive (disabled) control, and text in a picture that has significant other visual content are exempt from 1.4.3. Placeholder text is not on that list: if it carries information, treat it as normal text.
How do I check text over an image or a gradient?
Check the text colour against the lightest and the darkest part of the background it sits on. Both have to pass. If they do not, add a solid or semi-transparent backdrop behind the text, then check against the colour that backdrop produces.
What does this checker do with transparent colours?
A translucent text colour is blended over the background, as a browser paints it, and the result is checked. A translucent background is assumed to sit on white, and the tool says so, because the real result depends on whatever is behind it.
Does the European Accessibility Act require AA or AAA?
The harmonised standard behind the European Accessibility Act, EN 301 549, references WCAG 2.1 Level AA. Contrast at AA is therefore the requirement in practice; AAA is a stronger goal, not a legal minimum.

Related Tools

Accessibility CheckerHTML ValidatorCSS ValidatorMeta Tag Checker