How to Check Whether Your Website Text Has Enough Contrast

That pale gray text might look sleek on your screen. But if it blends into the background, it can be a pain for other people to read.

Quick answer: Put your text color and background color into the WebAIM Contrast Checker, then check the contrast ratio and the result for your text size. If it fails, adjust a color and test again.

For this guide, we tested two gray text colors against white in the desktop checker. We did not audit an entire website or test every combination of text size and background.

Enter the two colors

1. Open the Contrast Checker. In Foreground, enter your text color as a hexadecimal value. For a practice example, enter 999999.
2. In Background, enter FFFFFF for white. The checker updates its ratio and pass/fail results.
3. Check the result under Normal Text or Large Text, as appropriate for the actual text you are designing.

With #999999 text on #FFFFFF, the checker showed 2.84:1 and a fail for normal text at WCAG AA. Replace the foreground value with 595959 and it showed 7:1, passing the normal-text AA check in our test. You can adjust the lightness slider or enter another color, then recheck the result.

What the numbers mean

For WCAG Level AA, the minimum is generally 4.5:1 for normal text and 3:1 for large text, with exceptions such as incidental text and logos. The W3C’s contrast guidance explains the requirement and exceptions. WebAIM defines large text as at least 18 points, or 14 points when bold—typically 24 CSS pixels or about 18.66 CSS pixels bold.

Use the actual colors and size from your design, not just the examples here. The checker also reports AAA and UI component results, which answer different questions. A pass for one color pair does not mean the whole website meets WCAG or is accessible to everyone.

Check the real design before you publish

• Measure the right pair. Use the text color and the background directly behind it. For transparency, gradients, or photos, the effective background can change across the text; check the lowest-contrast area and the rendered result.
• Check every important state. Links, buttons, hover and focus states may use different colors. Don’t rely on color alone to identify a link; WebAIM offers a separate link contrast checker.
• Use the permalink. Select the checker’s permalink to preserve the tested pair for a teammate. Reopen it and confirm the values before sharing.
• Review the page itself. The tool checks a color pair, not keyboard access, screen-reader behavior, layout, or every part of the page. Use it as one step in a broader accessibility review.

If you’re also choosing web technologies for that project, our guide to checking browser support with Can I Use covers a separate compatibility check.