Color Contrast Checker
Enter a text and background color to get the WCAG contrast ratio and an instant AA or AAA pass or fail. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text and UI parts need 3:1. If your colors fail, the checker suggests the nearest passing color in the same hue.
Advertisement
How to check color contrast
- Enter the text color and the background color, or pick them. Paste hex codes straight from your CSS or design tool.
- Read the ratio and the five WCAG results. Body text must pass AA normal (4.5:1).
- Click a suggested fix if it fails. It keeps your hue and changes only lightness.
- Check the color-blind preview and, for a design system, paste your whole palette.
- Copy the link to share the exact pair with your designer or client.
WCAG contrast requirements
| What | Level | Minimum | Success criterion |
|---|---|---|---|
| normal text | AA | 4.5:1 | 1.4.3 |
| large text | AA | 3:1 | 1.4.3 |
| normal text | AAA | 7:1 | 1.4.6 |
| large text | AAA | 4.5:1 | 1.4.6 |
| UI components and graphics | AA | 3:1 | 1.4.11 |
Large text is at least 24px (18pt) regular or 18.66px (14pt) bold. Text in logos, disabled controls and pure decoration is exempt.
Advertisement
Grey text on white: which shades pass?
| Text color | Ratio | AA normal | AA large and UI | AAA normal |
|---|---|---|---|---|
| #000000 | 21.00:1 | Pass | Pass | Pass |
| #333333 | 12.63:1 | Pass | Pass | Pass |
| #595959 | 7.00:1 | Pass | Pass | Pass |
| #666666 | 5.74:1 | Pass | Pass | Fail |
| #757575 | 4.60:1 | Pass | Pass | Fail |
| #767676 | 4.54:1 | Pass | Pass | Fail |
| #777777 | 4.47:1 | Fail | Pass | Fail |
| #808080 | 3.94:1 | Fail | Pass | Fail |
| #949494 | 3.03:1 | Fail | Pass | Fail |
| #999999 | 2.84:1 | Fail | Fail | Fail |
| #aaaaaa | 2.32:1 | Fail | Fail | Fail |
The contrast formula
Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B, where each channel is first linearised: c / 12.92 if c ≤ 0.04045, otherwise ((c + 0.055) / 1.055)^2.4, with c from 0 to 1. Contrast ratio = (L lighter + 0.05) / (L darker + 0.05).
Note: WCAG 3 is still a draft and proposes a different method (APCA). WCAG 2.2, used here, is the current W3C Recommendation and the standard most accessibility laws and audits refer to.
Sources
Frequently asked questions
What contrast ratio do I need to pass WCAG?
WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text, buttons, form borders, icons and charts. Level AAA needs 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px (18pt), or at least 18.66px (14pt) in bold. Logos and disabled controls are exempt.
What is the lightest grey text I can use on white?
#767676 at 4.54:1 is the lightest grey that passes AA for normal text on white, and #595959 (7.00:1) is the lightest for AAA. Anything lighter, such as #777777 at 4.47:1, fails AA for normal text.
How is the contrast ratio calculated?
Each color is converted to relative luminance: the sRGB values are linearised and weighted 0.2126 red, 0.7152 green and 0.0722 blue. The ratio is (lighter + 0.05) divided by (darker + 0.05), from 1:1 (same color) to 21:1 (black on white). This checker truncates the result to two decimals instead of rounding, so 4.499:1 shows 4.49 and fails, as WCAG intends.
My brand color fails. How do I fix it without changing the brand?
Use the suggested fix. It keeps the hue and saturation and changes only lightness until the pair passes, so a light blue such as #5b9bd5 on white becomes #317abe (4.50:1) for AA text. You can also keep the brand color for large headings, buttons and icons, which only need 3:1.
Does contrast matter for SEO?
Indirectly. Lighthouse flags low-contrast text in its Accessibility score, and text people cannot read hurts engagement on mobile, especially outdoors in bright light. Google Search does not rank pages on a contrast score, but accessible pages are easier to use for everyone, including older readers.
How do people with color blindness see my colors?
The table simulates the three full forms of color blindness (protanopia, deuteranopia and tritanopia) with the Machado 2009 model. Contrast between light and dark mostly survives, but pairs that differ only in hue, such as red text on green, can lose most of their contrast. Never use color alone to carry meaning.
Does it support transparency and CSS color names?
Yes. Enter hex (#rgb, #rrggbb or #rrggbbaa), rgb(), rgba(), hsl() or any of the 148 CSS color names such as rebeccapurple. Semi-transparent text is blended over the background first, which is how the browser shows it. A transparent background is blended over white.
Share this contrast checker
Advertisement