Website Accessibility Checker
Scan a public web page for WCAG 2.2 Level A and AA issues that automated testing can detect.
Free tool · WCAG 2.2 AA and AAA
Color Contrast Checker
Check whether your text and background colours meet WCAG 2.2 contrast requirements. Preview your colours, get instant results, and find better alternatives.
- Instant results
- WCAG 2.2 AA and AAA checks
- Runs in your browser
Choose colours
Enter a HEX value such as #1A1A1A or #FFF, or use the colour picker.
Preview
A visual aid only. The result comes from the calculation.
Contrast result
Contrast ratio 17.40:1 Pass
Meets WCAG AAA for normal and large text.
- WCAG AA – Normal text (needs 4.5:1) Pass
- WCAG AA – Large text (needs 3:1) Pass
- WCAG AAA – Normal text (needs 7:1) Pass
- WCAG AAA – Large text (needs 4.5:1) Pass
- WCAG AA – UI components and graphics (needs 3:1) Pass
Suggested colours
Try these text colours on your current background. Select a colour to apply it.
Every suggestion is checked with the same calculation and meets at least AA for normal text. The first ones keep the hue of your colour. Review a suggestion against your design before using it.
Compare more text colours
Check multiple text colours against your current background colour.
| Colour | Hex value | Contrast ratio | AA (Normal) | AA (Large) | AAA (Normal) | AAA (Large) | Actions |
|---|
No colours to compare. Use “Add colour” to add one.
Understanding the results
Why contrast matters
Text and colours need enough contrast to be readable for people with low vision or colour vision deficiencies, and for anyone using a screen in bright light. WCAG 2.2 sets minimum ratios for text (4.5:1 for normal text and 3:1 for large text) and 3:1 for non-text components and graphics.
- Normal text: 4.5:1 (AA)For most body text, links and interface text.
- Large text: 3:1 (AA)For text that is 18pt (24px), or 14pt (about 18.7px) bold, and above.
- Non-text: 3:1 (AA)For UI components, icons, borders and graphics.
- AAA: 7:1 (stricter)Higher contrast for better readability, especially for people with low vision. Large text needs 4.5:1.
Know the limits
What a two-colour check can’t tell you
This tool checks one solid text colour against one solid background. It doesn't review gradients, images or semi-transparent layers. Some text may still be hard to read because of font choice, size, line height or surrounding content, and passing this check doesn't mean a page meets WCAG. For a more complete review, use the Website Accessibility Checker to test whole pages.
Frequently asked questions
-
How is the contrast ratio calculated?
With the WCAG 2.2 formula: each colour's relative luminance is calculated from its sRGB values, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). Ratios range from 1:1 to 21:1. The ratio is shown to two decimal places, but pass or fail is decided on the exact value.
-
What counts as large text?
Text that is at least 18 point (24px) in a regular weight, or at least 14 point (about 18.7px) in bold. Large text needs 3:1 for AA and 4.5:1 for AAA.
-
Do icons and buttons need contrast too?
Yes. WCAG 2.2 success criterion 1.4.11 asks for 3:1 for the parts of controls and graphics that people need to see, such as input borders, focus indicators and chart lines. There is no AAA level for non-text contrast.
-
Can I check text on an image or gradient?
Not reliably with two colours. Check the lightest and darkest parts of the background behind the text, or add a solid backing. Transparent colours aren't supported, because the visible colour depends on what's underneath.
-
Are my colours sent anywhere?
No. Everything is calculated in your browser. Nothing you enter is sent to AccessMate or stored.
Related tools
PDF Accessibility Checker
Check a PDF for tagging, title, language, alternative text, headings, tables, links and forms. Your file is checked in your browser and never uploaded.
Accessibility Statement Generator
Answer three short steps to create an honest accessibility statement you can publish. Built in your browser; nothing is sent to us.
