Your files never leave your device. All processing happens in your browser.
Open the Img Stop Color Contrast Checker, enter the text colour and background colour (HEX, RGB or the pickers) and read the WCAG contrast ratio. Badges show pass or fail for AA and AAA normal and large text and for UI components. If a level fails, pick a target and apply the closest passing text or background colour with one click.
About the Color Contrast Checker
The Img Stop Color Contrast Checker measures how readable text is on a background, using the WCAG 2 contrast formula that accessibility audits and laws refer to. Enter two colours and see the ratio – from 1:1 (invisible) to 21:1 (black on white) – together with pass or fail results for each level.
A live preview shows large text, body text, small print, a button, an input border and an icon in your colours. When colours fail, the tool suggests the nearest text colour and background colour that pass your chosen target, keeping the same hue and changing only the lightness, so your brand look stays intact.
Key features
- WCAG 2 contrast ratioCalculated exactly with the official relative-luminance formula.
- Five checksAA and AAA for normal and large text, plus 3:1 for UI components and graphics.
- Live previewHeadings, body text, small print, button, input and icon.
- Smart suggestionsClosest passing text or background colour with the same hue.
- One-click apply and swapApply a suggestion or swap text and background instantly.
- Any colour formatHEX, RGB, HSL, names and see-through colours.
How to use the Color Contrast Checker
- Enter the colours Type or pick the text and background colours.
- Read the ratio See the contrast ratio and verdict.
- Check the levels Look at AA, AAA and UI component results.
- Fix if needed Choose a target and apply the suggested colour.
Color Contrast Checker at a glance
| Price | Free |
|---|---|
| Standard | WCAG 2.0 / 2.1 / 2.2 contrast |
| Checks | AA, AAA (normal and large), UI 3:1 |
| Suggestions | Nearest passing text and background |
| Input | HEX, RGB, HSL, names, pickers |
| Processing | In your browser |
When to use it
- Make websites and apps meet WCAG AA accessibility requirements.
- Check brand colours for buttons, links and headings.
- Design readable slides, posters and social media graphics.
- Test text on coloured backgrounds in emails and documents.
- Prepare for accessibility audits and compliance reviews.
Tips for the best result
- Most guidelines and laws require at least AA: 4.5:1 for body text and 3:1 for large text.
- Large text means at least 24 px regular or about 18.7 px bold.
- Icons, input borders and focus rings need 3:1 against their surroundings.
- Ratios are rounded down, so 4.49:1 does not pass 4.5:1.
- Light gray text on white is the most common failure – try a darker gray such as #767676 or below.
Frequently asked questions
How do I check colour contrast?
Enter your text and background colours in the Img Stop Color Contrast Checker. The contrast ratio and pass/fail results for WCAG AA and AAA appear instantly.
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text and UI components. AAA needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of at least 18 pt (24 px) in regular weight, or 14 pt (about 18.7 px) in bold.
How are the suggestions chosen?
The tool keeps the hue and saturation of your colour and changes only its lightness, step by step, until the ratio meets your target – then shows the closest one in each direction.
Does it handle transparent colours?
Yes. A see-through text colour is blended with the background first, which is what readers actually see.
Is WCAG 3 (APCA) supported?
The checker uses the WCAG 2 formula, which is the current standard referred to by accessibility laws. APCA is still a draft.
Learn more
- MDN: Image file types – common image formats explained
Made and maintained by the Img Stop team.