About this tool
Color contrast checker, explained
Check whether two colors are readable together. Enter a text color and a background in hex, rgb or hsl to get their contrast ratio, a pass or fail for each WCAG level, and the closest colors that would pass.
How to use it
- 1Set the Text color with the picker or by typing a value such as #777777 or rgb(119, 119, 119), or start from a common pair such as Gray on white or Dark mode.
- 2Set the Background the same way. Use Swap to switch the two.
- 3Read the Contrast ratio and the five results: AA and AAA for normal and large text, and AA for UI components. The sample shows the pair at six text sizes and on an outlined button.
- 4If the pair fails, pick one of the Closest colors that pass and click Use. Then check How it looks with color blindness, and use Share link to send the pair.
How it works
How the contrast ratio is calculated
The checker follows the WCAG 2 definition. Each color is converted to its relative luminance: the red, green and blue channels are linearized, then weighted by how bright they appear to the eye (green counts most, blue least). The ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05), which runs from 1:1 for identical colors to 21:1 for black on white.
The thresholds are 4.5:1 for AA normal text, 3:1 for AA large text, 3:1 for user interface components and graphics, 7:1 for AAA normal text and 4.5:1 for AAA large text. Large text means at least 24 px, or 18.66 px in bold, which is how the sample marks each size.
The pass or fail is decided on the exact ratio, never on a rounded one, and the displayed ratio is rounded down. Gray #777777 on white has a ratio of 4.478:1, shown as 4.47:1, and fails AA for normal text even though it would round up to 4.5. Colors can be typed as 3 or 6 digit hex, rgb() or hsl().
The suggestions keep the hue and saturation of a color and move only its lightness, lighter or darker, until the ratio reaches 4.5:1 or 7:1 against the other color. A change of more than 35 points of lightness is not offered, since that is a different color rather than a fix. For #777777 on white, the closest text color for AA is #767676, and for AAA it is #595959.
The color blindness previews apply the simulation of Machado, Oliveira and Fernandes (2009) for protanopia, deuteranopia and tritanopia, plus a view with no color, and show the ratio of each simulated pair. Everything runs in your browser.
When to use it
Ways people use it
Choosing text colors
Test a gray for body text or a brand color for links before it goes into the design system.
Buttons and labels
Check the text on a colored button against the button's own color, not the page background, and the button's border against the page for the 3:1 UI rule.
Accessibility reviews
Go through the color pairs of a page and note which ones fail AA, with the exact ratio and a share link for each pair to report.
Text over brand colors
Decide whether a pastel or bright brand color needs dark text or white text on top of it.
FAQ
Questions people ask
What is a good color contrast ratio?
WCAG AA, the level most accessibility policies refer to, asks for at least 4.5:1 for normal text and 3:1 for large text. AAA raises that to 7:1 and 4.5:1. Higher ratios are easier to read for everyone, especially on a phone outdoors.
What counts as large text in WCAG?
Large text is at least 18 point, about 24 CSS pixels, at regular weight, or at least 14 point, about 18.66 CSS pixels, in bold. Below that, the stricter normal text thresholds apply.
Does #777777 pass on a white background?
No. Its ratio against white is about 4.48:1, just under the 4.5:1 required for AA normal text. It passes for large text and UI components. The checker suggests #767676, one step darker, which reaches 4.5:1.
How do I fix a color that fails contrast?
Darken the text or lighten the background (or the reverse on a dark design) until the ratio clears the threshold. Small changes in lightness usually do it while keeping the same hue, which is exactly what the Closest colors that pass section computes.
Do contrast rules apply to icons and buttons?
Yes. Since WCAG 2.1, user interface components and meaningful graphics, such as icons, input borders and focus indicators, need a contrast of at least 3:1 against what is next to them. The checker shows this as the UI components result.