What is a good contrast ratio for accessibility?

WCAG Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal standard for most jurisdictions. AAA is a higher bar used by accessibility-focused organizations.

Does contrast ratio apply to images and icons?

WCAG contrast requirements apply to text and user interface components like buttons, form borders, and focus indicators. Images and decorative icons are exempt, but icons that convey meaning (like a submit button icon with no text) must meet 3:1 contrast against their background.

How do I check contrast for text on a gradient background?

Measure contrast at the point where the gradient is lightest (or darkest, depending on text color). If the ratio passes at the worst-case spot, it passes everywhere. If it fails, either adjust the gradient range or add a solid background overlay behind the text.

Can I use light gray text if the contrast ratio passes?

Yes, as long as the ratio meets the WCAG threshold for your text size. However, passing the minimum does not guarantee readability in all conditions. Bright sunlight, glossy screens, and user vision impairments can reduce perceived contrast. Aim higher than the minimum when possible.

Do contrast requirements change if I use bold or italic text?

WCAG defines "large text" as 18px bold or 24px regular. Text that meets this definition only needs a 3:1 ratio for Level AA instead of 4.5:1. Italic styling does not lower the threshold—use size and weight as the criteria.

What contrast ratio do focus indicators need to meet?

WCAG 2.2 (current standard in 2026) requires a 3:1 contrast ratio between the focus indicator and both the background and the adjacent content. This ensures keyboard users can see where focus is, regardless of surrounding colors.

WCAG Contrast Ratio Checker

This tool calculates the contrast ratio between any two colors and tells you whether the combination passes WCAG 2.1 accessibility standards at AA and AAA levels. Enter a text color and a background color in any format (hex, RGB, HSL), and the tool shows the ratio, the pass/fail status for normal text, large text, and UI components, and a live preview of how the text looks against the background. Everything runs in your browser. No data is transmitted.

How does the WCAG AA Contrast Checker work step by step?

Contrast ratio calculation starts with relative luminance, a measure of how bright a color appears to the human eye. The WCAG formula adjusts for how our eyes perceive different wavelengths—we see green as brighter than blue at the same RGB value. The tool converts your input colors to sRGB, applies gamma correction to each channel (linearizing the RGB values), then calculates luminance using weighted coefficients: 0.2126 for red, 0.7152 for green, and 0.0722 for blue.

What does a typical WCAG AA Contrast Checker result look like?

Body copy at #777777 on #FFFFFF scores about 4.48:1, which is just under WCAG AA for normal text. The tool suggests a darker foreground hex such as #767676 to reach 4.5:1.

Frequently asked questions

What is a good contrast ratio for accessibility?
WCAG Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal standard for most jurisdictions. AAA is a higher bar used by accessibility-focused organizations.
Does contrast ratio apply to images and icons?
WCAG contrast requirements apply to text and user interface components like buttons, form borders, and focus indicators. Images and decorative icons are exempt, but icons that convey meaning (like a submit button icon with no text) must meet 3:1 contrast against their background.
How do I check contrast for text on a gradient background?
Measure contrast at the point where the gradient is lightest (or darkest, depending on text color). If the ratio passes at the worst-case spot, it passes everywhere. If it fails, either adjust the gradient range or add a solid background overlay behind the text.
Can I use light gray text if the contrast ratio passes?
Yes, as long as the ratio meets the WCAG threshold for your text size. However, passing the minimum does not guarantee readability in all conditions. Bright sunlight, glossy screens, and user vision impairments can reduce perceived contrast. Aim higher than the minimum when possible.
Do contrast requirements change if I use bold or italic text?
WCAG defines "large text" as 18px bold or 24px regular. Text that meets this definition only needs a 3:1 ratio for Level AA instead of 4.5:1. Italic styling does not lower the threshold—use size and weight as the criteria.
What contrast ratio do focus indicators need to meet?
WCAG 2.2 (current standard in 2026) requires a 3:1 contrast ratio between the focus indicator and both the background and the adjacent content. This ensures keyboard users can see where focus is, regardless of surrounding colors.