Free tool
Color contrast checker for WCAG AA and AAA
Try an example
Preview
Large bold heading
Normal text: the quick brown fox jumps over the lazy dog.
A text linkButton
Contrast ratio
4.83:1
Good· Passes AA for all text
| Use | Level | Needs | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | Pass |
| Normal text | AAA | 7:1 | Fail |
| Large text | AA | 3:1 | Pass |
| Large text | AAA | 4.5:1 | Pass |
| Icons, borders and form fields | AA | 3:1 | Pass |
Large text means at least 24px, or 18.66px (14pt) when bold. Nothing you type leaves your browser.
The rules
What contrast ratio do you need?
WCAG 2.2 sets minimum ratios by what the color is used for. AA is the level most laws and policies point to.
Normal text
Body text, labels and links
- AA
- 4.5:1
- AAA
- 7:1
Large text
24px, or 18.66px when bold
- AA
- 3:1
- AAA
- 4.5:1
Icons and controls
Icons, form borders, focus outlines
- AA
- 3:1
- AAA
- –
Logos and decoration
Brand logos, purely decorative text
- AA
- None
- AAA
- –
How it works
How is the contrast ratio worked out?
The formula
(L1 + 0.05) ÷ (L2 + 0.05)
L1 is the relative luminance of the lighter color and L2 of the darker one, from 0 for black to 1 for white.
Never rounded up
A ratio of 4.49:1 fails a 4.5:1 rule, even though it looks close. This checker cuts the number off at two decimals, the same way.
Still hard to read?
Visitors can turn on smart contrast in the Octo Assist panel. It fixes only the text that is too faint. Fixing your colors at the source is still best.
FAQ
Contrast questions
Quick answers about ratios, brand colors and this tool.
Still have a question?
We read every message and reply as soon as we can.
support@example.comContact usWhat is a good contrast ratio for text?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG level AA. For level AAA, aim for 7:1 for normal text and 4.5:1 for large text. Higher is easier to read for more people.
Does contrast matter for buttons and icons?
Yes. WCAG asks for at least 3:1 between the parts of a control you need to see (like a form field's border or an icon) and the colors next to them.
Why does my brand color fail?
Mid-tone colors such as bright orange, light green or sky blue often fall between 2:1 and 4:1 against white. Use a darker shade for text and links, and keep the bright color for large areas, backgrounds or decoration.
Does the checker store my colors?
No. The ratio is worked out in your browser. Nothing you type is sent anywhere.
Keep learning
Give every visitor the tools they need
Create an account, add your website and preview the widget in minutes.