WCAG Color Contrast Checker
Check the contrast ratio between text and background colours against WCAG AA and AAA.
Runs in your browser Your input never leaves your device.
| Normal text, AA (4.5:1) | |
|---|---|
| Normal text, AAA (7:1) | |
| Large text, AA (3:1) | |
| Large text, AAA (4.5:1) | |
| UI components and graphics (3:1) |
Large text means 24px or bigger, or 18.66px or bigger in bold. Ratios are truncated to two decimals, as WCAG does not allow rounding up to a pass.
Report a problem with this tool
About this tool
The Web Content Accessibility Guidelines (WCAG) require enough contrast between text and its background so people with low vision or poor screens can read it. Enter a text colour and a background colour in hex or rgb(), or use the pickers, and the tool calculates the contrast ratio from 1:1 (identical) to 21:1 (black on white). It shows pass or fail for AA and AAA at normal and large text sizes and for UI components and graphics, and previews your pair. If normal text fails AA it suggests the nearest text colour that passes. Ratios are truncated rather than rounded, as WCAG requires. It uses the WCAG 2 formula; the newer APCA method gives different results and is not a legal standard. Everything runs in your browser.
How to use it
- Enter or pick the text colour and the background colour.
- Read the ratio and the pass or fail rows.
- If normal text fails, use the suggested colour or darken the text.
- Check hover, focus and disabled states as well as the default one.
Common problems
- Text over an image or gradient
- Test against the worst-case part of the background, or place a solid or semi-opaque layer behind the text.
- My ratio differs from another tool
- Some tools round up or use APCA. This one uses the WCAG 2 formula and truncates to two decimals.
- Does a pass guarantee readable text?
- No. Font weight, size and screen conditions matter as well. Treat it as the minimum, not proof.