ConvertToToolsOnline
Design & accessibility

WCAG Contrast Checker

Test text and background colors, check WCAG AA and AAA contrast thresholds, preview your color combination, and discover alternatives that are easier to read. Calculations run directly in your browser.

Choose your colors

Enter a HEX color or use the color picker. Changes update the contrast checks and preview automatically.

Try a preset

Select a sample combination to see the results.

Ready to check your color combination.

Contrast results

Threshold checks use the full calculated ratio, not the rounded number displayed on screen.

Contrast ratio
14.68:1
Maximum possible ratio: 21:1

WCAG AA · Normal text Minimum contrast: 4.5:1
PASS
WCAG AA · Large text Minimum contrast: 3:1
PASS
WCAG AAA · Normal text Minimum contrast: 7:1
PASS
WCAG AAA · Large text Minimum contrast: 4.5:1
PASS
Non-text UI contrast reference 3:1 reference for relevant UI components and graphics
PASS
Passing these contrast checks does not, by itself, prove that a whole website conforms to WCAG. Other accessibility requirements must also be evaluated.

Live text preview

See how your selected colors look on sample content.

Sample page

Make your website easier to read

Good contrast helps more visitors read your content comfortably. Check body text, navigation, form labels, and other important text.

This smaller text is included to help you review the selected colors.

The preview demonstrates a solid foreground color on a solid background. It does not evaluate gradients, images behind text, transparency, or every possible element on your website.

Improve your contrast

These suggestions keep your background fixed and adjust the foreground color toward black or white to find a nearby color that meets the selected threshold when possible.

Suggestions will appear when the color values are valid.

CSS color variables

Copy these values into your stylesheet and adapt the variable names to your project. 

:root {
  --text-color: #1F2937;
  --background-color: #FFFFFF;
}

How to use the WCAG Contrast Checker

  1. Enter the text color and background color as HEX values, such as #1F2937 and #FFFFFF.
  2. Alternatively, open either color picker to select a color visually.
  3. Read the calculated contrast ratio and check each AA and AAA status.
  4. Review the live preview and use the suggestions if you need a more readable color.
  5. Copy the CSS variables or download a text report for reference.

What is a contrast ratio?

A contrast ratio measures the difference in relative luminance between two colors. A ratio of 1:1 means the colors have the same luminance; black against white produces the maximum ratio of 21:1.

Hue alone does not determine contrast. Two colors may look different while still having similar luminance, which can make text difficult to read for some people.

WCAG AA and AAA contrast thresholds

For text, WCAG 2.2 Success Criterion 1.4.3 generally uses a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at Level AA. Large text is generally at least 18-point regular text or 14-point bold text.

Level AAA under Success Criterion 1.4.6 generally requires 7:1 for normal text and 4.5:1 for large text. These criteria have specific exceptions, so the calculator should be used as a practical check, not as a complete accessibility audit.

Relevant official guidance: W3C guidance for WCAG 2.2 contrast minimum .

Frequently asked questions

What is a good contrast ratio for normal text?

A ratio of at least 4.5:1 is the general WCAG AA minimum for normal text. A higher ratio, such as 7:1, meets the standard AAA threshold for normal text.

Can a color combination pass for large text but fail for normal text?

Yes. For example, a ratio of 3.5:1 meets the 3:1 AA threshold for large text but does not meet the 4.5:1 AA threshold for normal text.

Does this tool check my entire website?

No. It checks one solid foreground and background color combination at a time. A complete accessibility review also considers page structure, keyboard access, form labels, focus indicators, images, and other requirements.

Are my color values uploaded?

No upload is needed for the calculator. The contrast calculation and suggestions are performed locally in your browser.

Why do two visually different colors sometimes fail?

Contrast is calculated from relative luminance rather than hue difference alone. Colors with different hues may have similar luminance and insufficient contrast.

How the contrast ratio is calculated

Each sRGB color channel is converted to linear light. Relative luminance is then calculated using the standard weighted combination of red, green, and blue channels.

If L1 is the lighter color's relative luminance and L2 is the darker color's relative luminance, the ratio is:

(L1 + 0.05) / (L2 + 0.05)

The checker compares the unrounded result with each threshold, so a value just below 4.5:1 is not treated as passing merely because a displayed number looks rounded.