Color contrast for accessibility: WCAG ratios explained

What is a color contrast ratio?

A contrast ratio compares how light or dark two colors are. It runs from 1:1, where both colors are the same, up to 21:1, which is black on white. The higher the number, the more the text stands out.

The ratio is based on relative luminance: how bright each color looks to the human eye. Hue alone doesn't count. Red and green look very different to most people, but pure red on pure green is under 3:1, so it fails for text.

Good contrast matters most for people with low vision, people with color blindness and older adults, whose eyes often become less sensitive to contrast. It also helps anyone reading a phone in bright sun. Yet low contrast text is the most common problem on the web: WebAIM's 2026 study found it on 83.9% of the top one million home pages.

What contrast ratio does WCAG require?

The text rules are success criteria 1.4.3 (AA) and 1.4.6 (AAA). The 3:1 rule for controls and graphics is 1.4.11 Non-text Contrast (AA). Most sites aim for Level AA, which is the level many laws and policies refer to.

A few rules people often miss:

• Ratios aren't rounded, so 4.49:1 fails the 4.5:1 rule. Gray #777777 on white is 4.47:1 and fails, while the slightly darker #767676 is 4.54:1 and passes.
• Placeholder text and text that appears on hover or focus must meet the minimum too.
• Logos, brand names, disabled controls and purely decorative text have no contrast requirement.
• Text on images counts. It must meet the ratio against the part of the image behind it.

What counts as large text?

In WCAG, large text is at least 18 point, or at least 14 point if it's bold. On the web, 18 point is 24 CSS pixels and 14 point is about 18.7 CSS pixels. So a 24px heading only needs 3:1, and so does 19px bold text. Normal-weight text at 20px still needs 4.5:1.

Be careful with thin and decorative fonts. A light font weight can be hard to read even at a large size, so give it more contrast than the minimum.

How do you check color contrast?

1. Use our free contrast checker. Enter the text and background colors to see the ratio and whether it passes AA and AAA.
2. In Chrome or Edge, open the developer tools, inspect a piece of text and click its color swatch. The color picker shows the contrast ratio.
3. Check every state: normal, hover, focus, visited links and error messages.
4. For text on photos or gradients, test against the part of the background that is closest in lightness to the text.
5. If your site has a dark mode, check it as well.
6. Look at form field borders, icons and focus rings, not just text.

Automated tools can test most solid colors, but they can't always judge text on images or gradients. Look at those yourself.

How do you fix low color contrast?

• Make the text darker or the background lighter, or the reverse on dark designs. Changing lightness helps far more than changing hue.
• Keep bright brand colors for large shapes and large text, and use a darker shade of the same color for small text.
• When text sits on a photo, put a solid or semi-transparent panel behind it.
• Give form fields a border that reaches 3:1, not a faint gray line.
• Design a focus style with at least 3:1 against the colors around it.
• Don't rely on color alone. Underline links in text, and add icons or words to error and success messages.
• Save your tested color pairs in your design system, so new pages start out right.

Fixing contrast in your design is the only way to fix it for everyone. Visitors who need more can also change it themselves. Browsers and operating systems have high contrast and dark modes, and Octo Assist offers Smart contrast, which turns only hard-to-read text black or white. These help individual visitors, but they don't replace good colors in your code.