How the contrast ratio is calculated
The checker converts each sRGB channel to linear light, combines those channels into relative luminance, then compares the lighter value with the darker one. Identical colors produce 1:1. Ideal black against white produces 21:1. The calculation follows the WCAG definition rather than a simple difference between HEX numbers.
AA is not one universal threshold. Body-size text needs 4.5:1. Large text—at least 24 CSS pixels in regular weight or about 18.66 pixels in bold—can use 3:1. UI controls and graphical objects that users must perceive also generally need 3:1 against adjacent colors.
A passing ratio is necessary but does not make a design accessible by itself. Thin type, glare, low-quality displays, color-vision differences, and information conveyed only through color can still cause problems. Test the real component at zoom and provide labels, shapes, or icons where state matters.
How to use the contrast checker
- Enter the exact foreground and background used in the final component.
- Read the ratio and check the row matching the real text size or UI role.
- If body text fails 4.5:1, apply the nearby suggestion or adjust the design system token manually.
- Test hover, disabled, error, focus, and selected states—not only the default screen.
- Check that meaning remains clear without relying on red/green or any color alone.
Common thresholds in practice
| Situation or input | Result or choice | Why it matters |
|---|---|---|
| #777777 on #FFFFFF | About 4.48:1 | It narrowly misses 4.5:1 for normal AA text despite often being rounded to a pass in casual examples. |
| #000000 on #FFFFFF | 21:1 | The maximum WCAG contrast ratio. |
| Button outline on page | 3:1 target | A boundary needed to identify a control is non-text contrast, not body-text contrast. |
Practical tips for a better result
- Use the computed value without rounding up: 4.49:1 does not meet a 4.5:1 requirement.
- Check text placed over every part of a gradient or photograph, not just an average background color.
- Placeholder text is still information users may need; do not make it faint by default.
- Focus indicators need enough contrast both against the component and the adjacent page area.
What this tool cannot know
A useful result includes knowing the limits of the calculation.
- This checker evaluates two opaque sRGB colors. Transparency, blending, gradients, and images require the final rendered colors.
- WCAG ratios do not simulate individual forms of color-vision deficiency or low vision.
- Passing automated math does not replace testing the actual content with people and assistive technology.
Frequently asked questions
What is a good contrast ratio for body text?
WCAG 2.2 AA requires at least 4.5:1 for normal-size text. AAA uses 7:1. Large text can pass AA at 3:1, but body copy is usually normal-size.
Why does #777777 on white fail here?
Using the WCAG luminance calculation it is about 4.478:1, below 4.5:1. Thresholds must not be rounded up to declare a pass.
Does passing AA mean my whole page is accessible?
No. It confirms only the measured color pair and threshold. Typography, keyboard access, semantics, zoom, focus, labels, and not relying on color alone also matter.