WCAG Contrast Ratio Checker for Text and UI Colors
A contrast ratio compares the relative luminance of foreground and background colors. Enter both colors, review the ratio, and compare it with the WCAG success criterion that applies to the text or interface component you are testing.
How to check a WCAG contrast ratio
A contrast ratio compares the relative luminance of foreground and background colors. Enter both colors, review the ratio, and compare it with the WCAG success criterion that applies to the text or interface component you are testing.
How is a WCAG contrast ratio calculated?
The ratio compares the lighter and darker relative luminance values with the formula(L1 + 0.05) / (L2 + 0.05). Relative luminance represents perceived brightness after RGB channels are converted to linear-light values. The result starts at 1:1 for identical colors and rises as the luminance difference increases.
The number is a test result, not a complete accessibility judgment. A pair can pass for large text and fail for normal text. Hover, focus, disabled, visited, and error states need separate checks.
How do you use this contrast checker?
Test the rendered foreground and background pair for each meaningful interface state.
Enter the foreground color used by the text, icon, or control.
Enter the background color directly behind it.
Record the reported ratio.
Identify the content type, text size, weight, or interface role.
Compare the result with the applicable WCAG requirement.
Repeat the test for every meaningful state and background.
What contrast ratios does WCAG require?
WCAG 2.2 uses different requirements for normal text, large text, and non-text interface components. Under Success Criterion 1.4.3, normal text generally needs at least 4.5:1, while large-scale text generally needs at least 3:1. Success Criterion 1.4.11 covers visual information needed to identify interface components and graphical objects, with a 3:1 minimum in the situations described by that criterion.
Text size and weight affect which threshold applies, not the color ratio itself. A large heading may qualify for the large-text threshold while a nearby caption in the same colors does not. Check the final rendered interface, not only a color swatch.
What checks should follow contrast testing?
Contrast is one part of an accessibility review. Check keyboard focus, visible focus indicators, text resizing, zoom, reading order, labels, error messages, and whether meaning is conveyed by more than color.
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.
Contrast ratio compares the brightness of text and its background. It runs from 1 to 1, no contrast, up to 21 to 1, black on white. WCAG 2.1 sets minimums so people with low vision, or anyone squinting in the sun, can read your page.
Enter two colors and this tool gives the ratio, AA and AAA badges and a live text preview.
Numbers worth remembering
Pure gray #767676 on white scores 4.54 to 1. It's about the lightest gray that passes AA for body text. Nudge it to #777777 and you get 4.48, a fail by a hair. That's why design files that look fine can still miss the line.
#595959 on white lands at 7 to 1, which is AAA territory. Mid gray #999999 sits near 2.8 and fails everything except decorative use. Keep these four values in your head and you'll catch most problems before you open the tool.
Icons and input borders only need 3 to 1, so a thin gray border on a white field often passes at #949494 and fails at #aaaaaa.
The usual failure
Light gray text on white. It looks elegant in a design file and fails in practice. Roughly one in twelve men has some form of color vision deficiency, and everyone struggles on a dim phone outdoors. Contrast helps all users.
A passing ratio doesn't make thin, tiny text readable. Size and weight still count.
Backgrounds that aren't flat
For text over a gradient or photo, test the worst spot, the area where text and background are closest in brightness. Or add a solid overlay behind the text.
Accessible suggestions
If a pair fails, the tool suggests nearby HEX values that pass. They keep your hue close, so the design still feels the same. Check before you ship, not after a complaint. Your colors stay in your browser.
Beyond the number
Passing the ratio is a floor, not a guarantee. Thin fonts, small sizes, patterned backgrounds and text over photos can all hurt readability even at a passing ratio. Test on a real phone in daylight.
Don't rely on color alone to carry meaning. Pair red error text with an icon or a label so people with color vision differences get the message.
Fixing a failing pair, step by step
Start with the text color, not the background. Darken it a few steps and test again. Brand backgrounds are harder to change than a gray used for captions.
If the text is white on a brand color that fails, try darkening the brand color for buttons only. Many teams keep a lighter tint for large shapes and a darker shade for anything that carries words.
Check every state, too. Hover, disabled, focus and error colors are tested separately, and the disabled state is the one most often skipped. Disabled controls are exempt from the rule, but placeholder text isn't.