Color Contrast Checker

How to use the color contrast checker

1. Type the Text color and Background color as hex values such as #1a73e8, or pick them with the color swatches.
2. The sample box shows your pair, and the large number is the contrast ratio from 1 : 1 (no contrast) to 21 : 1 (black on white).
3. Read the table. Each row says whether the pair passes WCAG AA or AAA for normal text, large text, or interface parts.
4. If normal text fails AA, the page offers the nearest text color that reaches 4.5 : 1. Press Use this text color to try it or Copy hex.
5. Press Swap colors to test the reverse pair, and Copy results to share the numbers with your team.

Formula

This is the WCAG 2.x relative luminance and contrast ratio definition. Pass thresholds are compared with the exact ratio, not a rounded one.

Gray text on white

What the WCAG levels require

The Web Content Accessibility Guidelines set minimum contrast between text and its background. Level AA requires 4.5 : 1 for normal text and 3 : 1 for large text. Level AAA asks for 7 : 1 for normal text and 4.5 : 1 for large text. Large text means at least 18 point (24 CSS pixels), or 14 point (about 18.7 pixels) when bold. User interface components and meaningful graphics, such as input borders and icons, need 3 : 1 against neighboring colors under WCAG 2.1 and 2.2.

Contrast ratios are not a perfect measure of readability, and WCAG 3 may use different math. They are still the standard most legal and procurement checks refer to. Passing is a minimum, not a guarantee that everyone can read the text comfortably.

Why the ratio is shown cut off, not rounded

The ratio is shown with two decimals, cut off instead of rounded up. A true ratio of 4.499 must not display as 4.50 and appear to pass, because the rule is a threshold on the exact number. A pass or fail result here is always decided from the unrounded value, so what you see never claims more than the pair delivers.

The suggested color

When normal text fails AA, the tool mixes your text color toward black or white, whichever works against the background, and finds the closest shade that reaches 4.5 : 1. The hue stays about the same. It checks the final eight-bit color, so what you copy really passes. If no shade of your text color can reach 4.5 : 1, the page says so and you need to change the background.

What it does not check

The checker handles two solid colors. It does not account for transparency, gradients, images behind text, font weight and thin strokes, dark mode switches, or color vision differences. Always test the finished page too. Input is read in your browser and nothing is sent anywhere.

Assumptions and limits

• Colors are 8-bit sRGB, entered as #rgb, #rrggbb or rgb(r, g, b). Named colors and transparency are not supported.
• Contrast is the WCAG 2.x ratio. It does not use the newer APCA method.
• Large text is 18 point or larger, or 14 point or larger when bold.
• The UI parts row uses the 3 : 1 threshold for components and graphics.
• The suggestion keeps the same general hue by mixing toward black or white, so the result can look less saturated.

Formulas reviewed October 10, 2026. See the calculation methodology for how SumPanda rounds, tests and sources its formulas.

Frequently asked questions