memes.ai

Free tools

Free text and background contrast checker

Enter a text color and a background color to see their contrast ratio and a live preview. Select the text category that matches your design. The report compares the full calculation with AA and AAA text-contrast thresholds; its displayed ratio is rounded.

For: Creators choosing text and background colors for web graphics, captions and promotional cards. Use it to: Calculate an opaque sRGB color pair's contrast ratio and compare it with the relevant WCAG text thresholds.

Screenshot of the working contrast checker comparing purple #4f46e5 with white #ffffff. It reports 6.288:1, meeting the normal-text AA contrast threshold and falling below AAA.

Text and background contrast

Use three- or six-digit opaque sRGB hex colors. Choose normal or large text based on the actual size of your design.

Large text means at least 18 pt (24 CSS px), or at least 14 pt (about 18.67 CSS px) when bold. Select the category that matches your actual design.

A clear message starts with readable text.

Contrast comparison

Text: #000000
Background: #ffffff
Contrast ratio: 21.000:1
Text category: normal
WCAG AA contrast threshold 4.5:1: meets
WCAG AAA contrast threshold 7:1: meets

Threshold comparisons use the unrounded ratio. This checks opaque sRGB colors only; it does not establish full accessibility.

Your entered text and selected files stay in your browser.

Check the colors that touch

  • Enter the foreground text color and the background immediately behind that text.
  • Choose normal text unless your actual text qualifies as large.
  • Review both the live preview and the numerical comparison.
  • Copy or download the report to keep the color pair with your creative brief.

Text contrast thresholds

WCAG's minimum text contrast is 4.5:1 for normal text and 3:1 for large text. The enhanced thresholds are 7:1 for normal text and 4.5:1 for large text. Large text is at least 18 points (24 CSS pixels), or at least 14 points (about 18.67 CSS pixels) when bold.

These comparisons concern contrast. They do not establish that a graphic or website meets all accessibility requirements. WCAG also defines applicability and exceptions; follow the linked source when assessing a complete design.

Examples you can reproduce

  • Black (#000000) on white (#ffffff) has a 21:1 contrast ratio.
  • Gray (#777777) on white displays 4.478:1 here. It falls below the normal-text 4.5:1 threshold; the calculation is not rounded up to a passing value.
  • The screenshot's purple (#4f46e5) on white displays 6.288:1. It meets the normal-text AA contrast threshold and falls below the normal-text AAA threshold.

What the calculation covers

The checker converts sRGB channels to linear values, calculates relative luminance, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. Threshold decisions use the unrounded ratio.

Only opaque hex color pairs are supported. Transparency, gradients, photographs, display conditions and font rendering can affect the actual result. Sample the background behind the text and review the finished design in context.

Keep exploring

Related ideas

Sources

Want to create a version for your brand?

Try your idea in Memes.ai Studio after you have the caption or image you need.

Explore Memes.ai Studio