Color Contrast Checker
Test whether a text and background colour pair is readable enough. Enter the two colours to get the exact contrast ratio and pass/fail badges for WCAG AA and AAA, at normal and large text sizes, with a live sample. All computed locally.
- 100% free
- Private & safe
- Runs in your browser
Why use Color Contrast Checker?
Color Contrast Checker converts instantly and accurately in your browser, showing every unit or format side by side so you can copy the one you need.
- Runs instantly in your browser — nothing to install, nothing uploaded.
- Completely free, with no account, no watermarks and no usage limits.
- Handles Input: two HEX colours; Output: contrast ratio + WCAG AA/AAA results.
- Enter the text colour.
- Works on any device — desktop, tablet and phone — and is fully keyboard accessible.
What it can do — and its limits
- Computes the WCAG contrast ratio between a text colour and a background.
- Shows pass/fail for AA and AAA at both normal and large text sizes.
- Accepts HEX and updates live as you adjust the colours.
How to use Color Contrast Checker
- Enter the text colour.
- Enter the background colour.
- Read the contrast ratio and WCAG badges.
- Adjust colours until it passes.
Examples
- Checking dark-grey text on white passes AAA.
- Confirming a button label is readable.
Worked example
Input
Text #767676 on background #FFFFFF.
Output
Contrast ratio 4.54:1 — passes AA for normal text (needs 4.5:1); fails AAA (needs 7:1).
#767676 is the darkest grey that still passes AA on white — a handy reference point.
Supported formats & limits
- Input: two HEX colours
- Output: contrast ratio + WCAG AA/AAA results
WCAG minimum contrast ratios
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Limitations
- Uses the WCAG 2.x relative-luminance formula; it does not judge colour-blind confusion.
Common problems & fixes
Large text fails but you expected it to pass.
Large text (≥ 24px, or 18.66px bold) only needs 3:1 for AA — check you selected the large-text result.
Ratio seems off for semi-transparent colours.
Contrast is defined for solid colours. Flatten any opacity against the actual background first.
Sources & references
Last verified August 2026.
Frequently asked questions
What ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively.
What counts as large text?
Roughly 18pt (24px), or 14pt (18.66px) bold, and larger.
Is it uploaded?
No — the math runs in your browser.