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.

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.

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.

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.

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.

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.

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.

#777777 on #ffffff is about 4.4780894536:1. That is very close, but it is still below the 4.5:1 AA normal-text threshold, so the checker marks normal text as fail while large text can pass.

No. A passing ratio is important, but it does not check font size, line height, focus outlines, hover states, disabled controls, icons without text, color-only meaning, or whether the color sits on a gradient or image.

Yes. A button, tab, link, or form field can change text color, border color, background color, or outline color in each state. Test the exact colors for the real state people will see, especially focus and selected states.

You can use the ratio as a quick check, but decide whether the element is text, non-text UI, or decorative. Meaningful icons, focus outlines, and control borders often need their own contrast check against the adjacent color.

No. The tool runs in your browser tab. Your recent answers stay only on the page while you use it, and they are not sent to a server.