Color Contrast Checker
Check any text and background pair against WCAG AA and AAA, with a live preview and the nearest passing colour.
Contrast ratio
4.54:1
Passes AA for all text sizes
Large heading text
Normal body text at the default size. Read this and decide whether the pair is comfortable, not only whether it passes.
Small print, captions, and helper text.
| Level | Minimum | Result | Applies to |
|---|---|---|---|
| AA — normal text | 4.5:1 | ✓ Pass | Body copy below 18.66px, or below 14px bold |
| AA — large text | 3:1 | ✓ Pass | 18.66px and up, or 14px and up when bold |
| AAA — normal text | 7:1 | ✗ Fail | Enhanced level for body copy |
| AAA — large text | 4.5:1 | ✓ Pass | Enhanced level for headings |
| Non-text contrast | 3:1 | ✓ Pass | Icons, input borders, focus rings, chart keys |
Related Tools
Color Contrast Checker — WCAG AA & AAA Ratio Tester
Enter a text colour and a background colour and see the WCAG contrast ratio the moment you type, along with a pass or fail for every level: AA and AAA, normal and large text, and the 3:1 minimum that applies to icons, input borders, and focus rings. A live preview shows real sentences at three sizes on your actual colour pair, because a ratio of 4.6:1 can still be uncomfortable to read at 13px.
When a pair fails, the tool walks the text colour toward black or white until it passes and hands you the nearest hex value, so you keep as much of the original hue as the standard allows. Everything is computed in your browser from the WCAG 2.2 relative luminance formula — no upload, no signup, and no per-check limit.
How to use Color Contrast Checker
- Type or pick the text colour — hex like #767676 or rgb(118, 118, 118) both work.
- Do the same for the background colour.
- Read the ratio and the pass/fail table for AA, AAA, and non-text elements.
- Check the live preview to judge readability, not just compliance.
- If the pair fails, click "Use this colour" to apply the nearest passing shade.
Features
- Every WCAG level at once — AA and AAA for normal and large text, plus the 3:1 non-text minimum for icons, borders, and focus indicators, each with the size thresholds spelled out.
- Live preview at three sizes — Heading, body, and small print rendered on your real colours, so you can see whether a technically passing pair is actually comfortable to read.
- Nearest passing colour — A binary search moves the text colour toward black or white only as far as needed for 4.5:1, preserving as much of your original hue as possible.
- Hex and RGB input — Paste values straight from Figma, a CSS file, or a design token without reformatting them first. Runs entirely in your browser.
Frequently Asked Questions
What contrast ratio do I actually need to pass?
For WCAG 2.2 Level AA — the level most legislation references, including the European Accessibility Act and Section 508 — body text needs 4.5:1 and large text needs 3:1. Large means 18.66px and up, or 14px and up when bold. Level AAA raises those to 7:1 and 4.5:1. Icons, input borders, and focus rings fall under non-text contrast and need 3:1.
Why does #767676 pass on white but #777777 fail?
Because 4.5:1 lands almost exactly between them: #767676 on white is 4.54:1 and #777777 is 4.48:1. Grey text on white is the most common accessibility failure on the web for exactly this reason — the difference is invisible to the eye but decisive for the standard. Nudging one hex digit is usually all a fix takes.
Does passing the ratio mean my colours are accessible?
It means they meet one specific requirement. Contrast says nothing about colour blindness, so a red and green pair can pass and still be unusable for the roughly 8% of men with a deficiency. It also says nothing about relying on colour alone to convey meaning, which is a separate WCAG criterion. Use the ratio as a floor, then check the interface still works in greyscale.
Which colour should I change when a pair fails?
Usually the text, since backgrounds tend to be fixed by brand or layout — that is why the suggestion here adjusts the text colour. If the text colour is the brand asset instead, use the swap button and darken or lighten the background. The ratio is symmetrical, so either direction gets you to the same number.