A WCAG 2.2 colour contrast checker with a built-in fix
The Contrast Checker measures the contrast ratio between a text colour and a background colour exactly as the Web Content Accessibility Guidelines (WCAG) 2.2 define it, then shows clear pass/fail badges for normal text, large text and UI components at levels AA and AAA.
When a pair fails, the tool does not leave you guessing: it suggests the nearest text colour that passes by adjusting only the lightness in OKLCH, so the hue and vividness of your brand colour stay intact. Paste HEX, RGB, HSL or named colours, use the pickers, swap the two colours and read a live preview at real text sizes.
How to use the Contrast Checker
- Enter the Text colour and Background colour — type any CSS colour or use the colour squares.
- Read the contrast ratio and the AA / AAA badges for normal text, large text and UI components.
- Look at the Preview to judge small, normal, large and bold text plus a button outline and icon.
- If the pair fails, press Use it on the suggested fix, or adjust your colours until the badges turn green.
- Press Swap to test the inverse (light text on dark), and Copy report to paste the results into a ticket or a design review.
Contrast Checker features
Exact WCAG 2.2 maths
Relative luminance is computed with the sRGB linearisation and the 0.2126 / 0.7152 / 0.0722 weights from the specification; the ratio is (L1 + 0.05) ÷ (L2 + 0.05).
Three success criteria
Covers 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) and 1.4.11 Non-text Contrast, with the thresholds printed on every badge.
Smart colour fix
Finds the smallest lightness change in OKLCH that reaches 4.5:1 (or 7:1 if you already pass AA), keeping the colour recognisably yours.
Handles transparency
Semi-transparent colours are composited the way a browser renders them before the ratio is measured.
Live preview at real sizes
14 px, 16 px, 24 px and 18.66 px bold text, a button outline and an icon on your actual colours.
Copyable report
One click copies the ratio and every pass/fail result as plain text.
WCAG contrast thresholds
WCAG 2.2 sets different minimums depending on what is being shown and the conformance level you are aiming for. Most laws and procurement rules (ADA lawsuits in the US, the European Accessibility Act, India’s GIGW guidelines, the UK Public Sector Bodies regulations) point at level AA.
| What | Level AA | Level AAA |
|---|---|---|
| Normal text (below 24 px, or below 18.66 px bold) | 4.5:1 | 7:1 |
| Large text (24 px+, or 18.66 px+ bold) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | — |
| Logos, decorative text, disabled controls | exempt | exempt |
How the contrast ratio is calculated
Each colour is first converted to relative luminance: the sRGB channels are divided by 255, linearised (values up to 0.04045 are divided by 12.92; larger values use ((c + 0.055) ÷ 1.055)2.4), then combined as 0.2126 R + 0.7152 G + 0.0722 B. White has a luminance of 1 and black 0.
The ratio is then (Llighter + 0.05) ÷ (Ldarker + 0.05), giving a scale from 1:1 (identical colours) to 21:1 (black on white). The 0.05 term represents ambient light reflected from a screen. For example, grey #767676 has a luminance of 0.1812, so against white the ratio is 1.05 ÷ 0.2312 = 4.54:1 — the lightest neutral grey that passes AA on white.
Tips for accessible colour choices
- Pure grey placeholder text at #999 fails on white (2.85:1). Use #767676 or darker.
- Large headings can use lighter brand colours (3:1), but body copy nearly always needs a darker tint — generate one with the Color Shades Generator.
- Never rely on colour alone: pair red/green status with icons or text. Preview how your palette looks with colour-vision deficiencies in the Color Blindness Simulator.
- Test focus rings and input borders too — they need 3:1 against the adjacent background under criterion 1.4.11.
- Check both light and dark themes; a colour that passes on white often fails on dark grey. Explore candidate colours in the Color Picker, which shows contrast against white and black as you drag.
Contrast Checker FAQ
What contrast ratio does WCAG require?
Level AA requires at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for user-interface components. Level AAA raises text to 7:1 and large text to 4.5:1.
Is this contrast checker up to date with WCAG 2.2?
Yes. WCAG 2.2 (October 2023) kept the contrast formula and thresholds of 2.0 and 2.1 unchanged, so the ratios here apply to 2.0, 2.1 and 2.2 alike.
How does the suggested fix work?
The tool converts your text colour to OKLCH, keeps its hue and chroma, and moves the lightness in small steps up or down until the ratio reaches 4.5:1 (or 7:1 when you already pass AA). It picks whichever direction needs the smaller change, so the result stays close to the original colour.
Does the checker handle transparent colours?
Yes. If either colour has an alpha value, it is blended the way a browser draws it — the background over white, then the text over that background — and the ratio is measured on the resulting opaque colours.
Why does my colour pass for large text but fail for normal text?
The thresholds differ because bigger, bolder letters are easier to read at lower contrast. A ratio between 3:1 and 4.5:1 is acceptable for headings of 24 px or more but not for body copy.
Is the WCAG ratio the same as APCA?
No. APCA is a newer perceptual algorithm being developed for future guidelines. It is not yet part of any WCAG standard, so this tool reports the WCAG 2.x ratio that audits and regulations currently rely on.