Color Contrast Checker (WCAG)
Check the contrast ratio between text and background colors against WCAG AA and AAA, for normal text, large text and UI components, with suggested fixes.
Loading Contrast Checker…
Your files never leave your device
About this tool
Low contrast text is one of the most common accessibility problems on the web, and it hurts everyone reading on a phone in sunlight. This color contrast checker calculates the contrast ratio between a text color and a background color and tells you whether it passes the WCAG 2 guidelines. If it fails, it suggests the closest colors that pass, so you can fix it without changing your design.
How to check contrast
- Enter the text color and the background color, or pick them visually.
- Read the contrast ratio and the pass or fail result for each level.
- Look at the live preview with normal text, large headings and small print.
- If a level fails, use a suggested fix, or swap the two colors to test the reverse.
- Copy the CSS for the passing combination.
WCAG contrast requirements
| Element | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| UI components and icons | 3:1 | not defined |
AA is the level most laws and accessibility policies refer to. AAA is stricter and recommended for long reading text. Bold text of about 18px also counts as large text.
How the ratio is calculated
The checker converts both colors to relative luminance, a measure of perceived brightness, and divides the lighter one plus 0.05 by the darker one plus 0.05. The result goes from 1:1 (no contrast, the same color) to 21:1 (black on white).
Tips for accessible colors
- Gray text on white is the usual culprit: #767676 is about the lightest gray that still passes AA for normal text on white.
- Check every state: placeholders, disabled buttons, links, hover colors and text on images.
- Do not rely on color alone to show meaning, such as red for errors; add an icon or text.
- Test brand colors early, since bright yellows and light blues often fail as text colors.
Frequently asked questions
What contrast ratio is required for WCAG AA?
At least 4.5:1 for normal text and 3:1 for large text and for UI components such as buttons, form borders and icons.
What counts as large text?
Text of at least 24px, or bold text of at least about 18.66px (14 point). Large text needs a ratio of 3:1 for AA and 4.5:1 for AAA.
What is the difference between AA and AAA?
AA is the standard level referenced by most accessibility laws. AAA is stricter, 7:1 for normal text, and is recommended for long passages of text.
What is the highest possible contrast ratio?
21:1, which is black text on a white background or the reverse.
My brand color fails. What can I do?
Use a suggested fix, which keeps the hue but adjusts lightness until it passes, or use the brand color for large headings and backgrounds rather than body text.
Does it check text on images?
No. It checks two solid colors. For text on photos, test the color against the lightest and darkest parts of the image behind the text.