Quick start
- Pick or enter the foreground text, icon, label, or button-copy color as #RGB or #RRGGBB.
- Pick or enter the background color directly behind that foreground color, not a nearby surface color.
- Press Check contrast to calculate the ratio.
- Repeat the check for hover, focus, selected, disabled, dark-theme, and light-theme states.
Best uses
Use this guide when you are choosing text, button, label, navigation, or icon colors and need to test the real pair or repair a small AA contrast miss.
- Check text color against a page background before publishing.
- Compare brand colors against WCAG AA and AAA thresholds.
- Test button, label, and navigation color pairs.
- Repair a near-miss text color without guessing at random hex values.
What this tool helps with
The Color Contrast Checker helps you test a text color against the exact background behind it, preview swatches, and find a nearby AA-passing foreground before you ship a button, label, nav link, or body-text style.
Match each input label on the tool to the exact foreground text color and background color as #RGB or #RRGGBB hex values, taken from the state and surface you plan to ship.
The logic in plain language
In plain language: The checker normalizes #RGB or #RRGGBB hex colors, converts each sRGB channel to linear light, calculates relative luminance, then uses the WCAG contrast formula: (lighter luminance + 0.05) / (darker luminance + 0.05). When normal text fails AA, it also samples small RGB moves toward black and white and returns the shortest passing foreground change. The examples on the page are there so you can compare your inputs with a filled-out example before copying the answer.
For example, #777777 on #ffffff is about 4.4780894536:1. That is close, but it is still below the 4.5:1 AA normal-text threshold, so normal text fails while large AA text can pass.
How to read the answer
Read the ratio and all four pass/fail lines together. AA normal text, AA large text, AAA normal text, and AAA large text answer different design questions.
- The contrast ratio compares the lighter relative luminance with the darker relative luminance after WCAG adds 0.05 to both sides.
- AA normal text passes at 4.5:1 or higher.
- AA large text passes at 3:1 or higher.
- AAA normal text passes at 7:1 or higher, while AAA large text passes at 4.5:1 or higher.
- When AA normal text fails, Nearby AA text color shows a small foreground adjustment that reaches at least 4.5:1 against the same background.
Common mistakes to avoid
Most contrast mistakes come from testing the wrong surface or treating one passing ratio as approval for every state.
- Do not check only the default state; hover, focus, disabled, selected, and dark-mode states matter too.
- Do not test text on white if the real component sits on a tinted card, image, gradient, or translucent overlay.
- Do not rely on color alone to communicate state.
- Do not assume a passing contrast ratio fixes font size, line height, focus outlines, icon meaning, or keyboard usability.
- Do not treat the nearby AA suggestion as approval for a brand palette or the whole component.
Fix a failed text color without guessing
If normal text fails AA, read the Nearby AA text color line. For #777777 on #ffffff, the result suggests #767676. That one-step darker gray reaches the 4.5:1 line while keeping the white background fixed.
The suggestion tests small RGB moves toward black and white, then returns the passing option with the shortest RGB distance from your text color. W3C defines the contrast target, but it does not approve this suggested color or your finished component.
- Copy the suggested hex value into the real text style and test the component again.
- Repeat the check for hover, focus, selected, and theme states.
- Check meaningful icons, control boundaries, and focus indicators against the relevant adjacent color under the non-text contrast rule.
One near-miss example
Try #777777 as the text color and #ffffff as the background. The checker returns 4.4780894536:1, which looks almost like an AA normal-text pass but is still below 4.5:1.
That tiny gap matters because WCAG contrast thresholds are pass/fail lines. You can darken the text slightly, lighten the background, increase the text size enough for the large-text rule, or choose a stronger brand shade.
- #101828 on #ffffff is 17.7465943159:1 and passes AA and AAA normal text.
- #667085 on #f9fafb is 4.7604112926:1, so AA normal text passes but AAA normal text fails.
- #777777 on #ffffff is 4.4780894536:1, so normal AA fails even though large text can pass.
What the formula is checking
The checker first expands valid short hex colors, then converts each red, green, and blue channel from sRGB into linear-light values. Those channel values produce relative luminance for the foreground and background.
The final WCAG ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05). The result has no unit; it is usually written as something like 4.5:1 or 7:1.
- Use the specified background that appears behind the text in normal use.
- Anti-aliasing, font weight, and thin strokes can make text feel lighter than the math suggests.
- A contrast checker does not decide whether color is the only cue, so still add labels, icons, borders, or state text where needed.
Research and references
These W3C references explain WCAG 2.2 text thresholds, relative luminance, the large-text exception, and the separate non-text contrast rule for meaningful interface visuals.
Worked examples for Color Contrast Checker
17.7465943159:1, AA and AAA normal pass
4.7604112926:1, AA normal pass and AAA normal fail
4.4780894536:1, with #767676 suggested for AA normal text
FAQ in plain language
When should I use the Color Contrast Checker?
Use it when your task matches one of these common needs: Check text color against a page background before publishing. Compare brand colors against WCAG AA and AAA thresholds. It works best when you already know the exact foreground text color and background color as #RGB or #RRGGBB hex values.
What is the Color Contrast Checker doing with my inputs?
In plain language: The checker normalizes #RGB or #RRGGBB hex colors, converts each sRGB channel to linear light, calculates relative luminance, then uses the WCAG contrast formula: (lighter luminance + 0.05) / (darker luminance + 0.05). When normal text fails AA, it also samples small RGB moves toward black and white and returns the shortest passing foreground change. The examples on the page are there so you can compare your inputs with a filled-out example before copying the answer.
What do the main Color Contrast Checker inputs mean?
Text color: pick a swatch or paste the foreground hex color for the text, icon, label, or button copy you want people to read. Background color: pick or paste the exact hex color directly behind that foreground color, not a nearby surface color. Contrast ratio: the lighter relative luminance divided by the darker relative luminance after WCAG adds 0.05 to both sides. AA normal text: passes when the ratio is at least 4.5:1 for typical body text. AA large text: passes when the ratio is at least 3:1 for large or bold text that meets the WCAG large-text size rule.
How should I read the Color Contrast Checker answer?
Read the headline answer, then check the supporting lines and examples to understand how the calculator got there. If one input changes, rerun the tool and compare the new answer instead of guessing.
What should I double-check before trusting the answer?
Contrast ratio is one accessibility check. The suggested color changes only the foreground and is not a W3C-approved palette choice. Also review actual font size and weight, focus states, selected states, meaningful icons, color-only cues, and the real page background. Also check the actual font size, font weight, state, theme, and page background because a color pair can pass in one component and fail in another.
What contrast ratio do I need for WCAG AA?
For most normal text, WCAG AA needs at least 4.5:1. Large text can pass AA at 3:1. If the result is close to the line, test the real font size, weight, and state before approving the color pair.
What contrast ratio do I need for WCAG AAA?
WCAG AAA is stricter: 7:1 for normal text and 4.5:1 for large text. AAA can be hard to meet with some brand palettes, so use it as a stronger readability target when the design can support it.
Related tools
- Aspect Ratio CalculatorSimplify aspect ratios and scale width or height while keeping proportions.
- CSS Clamp CalculatorGenerate CSS clamp formulas for fluid font sizes, spacing, and responsive layout values.
- Monitor PPI CalculatorCalculate pixels per inch from screen resolution and diagonal size.
Keep exploring
If this guide is close but not exact, these links keep you near the same kind of problem.
- Image ToolsBrowse the full category for related tools that help with the same job.
- All free toolsSearch the complete Access Free Tools library by task, category, or tool name.
- All tool and utility guidesFind more plain-language examples, logic notes, mistakes, and result explanations.
- Free tool resourcesStart here when you are not sure which tool page fits.
Privacy and copying results
Recent answers stay visible only while you work in the current browser tab. They are not sent to a server.
Use Copy answer when you want to save the inputs and result in notes, homework, a message, or a project list. Check the units, labels, and limits before copying.