Quick start
- Enter the foreground text, icon, label, or button-copy color as #RGB or #RRGGBB.
- 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 know whether the real foreground/background pair clears WCAG contrast thresholds.
- 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.
- Quickly reject low-contrast combinations during design work.
What this tool helps with
The Color Contrast Checker helps you test a text color against the exact background behind it before a button, label, nav link, or body-text style becomes hard to read.
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). 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.
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.
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 references explain the WCAG contrast thresholds, relative luminance formula, large-text exception, and why contrast is only one accessibility check.
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, AA normal fail but large text passes
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). 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: the foreground hex color for the text, icon, label, or button copy you want people to read. Background color: 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. Also review actual font size and weight, focus states, hover states, selected states, icons, disabled controls, color-blind 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 Calculator Simplify aspect ratios and scale width or height while keeping proportions.
- CSS Clamp Calculator Generate CSS clamp formulas for fluid font sizes, spacing, and responsive layout values.
- Monitor PPI Calculator Calculate 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 Tools Browse the full category for related tools that help with the same job.
- All free tools Search the complete Access Free Tools library by task, category, or tool name.
- All tool and utility guides Find more plain-language examples, logic notes, mistakes, and result explanations.
- Free tool resources Start 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.