How to Check Color Contrast for Accessibility (WCAG Guide)

If your site or app uses custom text and background colors, you need to check color contrast for accessibility. Low contrast makes content hard or impossible to read for people with low vision, dyslexia, or in bright light. This guide covers WCAG ratios, which pairs to test, and how to use an accessibility contrast checker so your design stays readable and compliant.

Why Color Contrast Matters for Accessibility

Color contrast is the difference in luminance between text (or UI elements) and their background. When it’s too low, users strain to read or miss content. WCAG (Web Content Accessibility Guidelines) sets minimum ratios so most people can read without magnification or assistive tech. In many jurisdictions, meeting WCAG is a legal or policy requirement; even when it isn’t, good contrast improves readability for everyone.

WCAG Contrast Ratios: AA vs AAA

Level AA (most common): normal text needs at least 4.5:1 contrast; large text (18pt+ or 14pt+ bold) needs 3:1. Level AAA is stricter: 7:1 for normal text, 4.5:1 for large. Ratios come from relative luminance (RGB-based). You don’t need to calculate—an accessibility contrast checker does it and shows pass/fail for AA and AAA.

Which Text–Background Pairs to Check

Check every place text sits on a background: body copy, headings, links, button labels, form labels, placeholders, captions. Test hover and focus states if they change color. With multiple backgrounds (e.g. cards), test text on each. Decorative elements don’t need to meet text contrast; text inside logos or graphics does. Document passing pairs so your team reuses them in code and design.

Example: Pass vs Fail

Light gray on white often fails: #9ca3af on white is ~2.9:1 (below 4.5:1). Darker gray passes: #4b5563 on white is ~5.7:1 (AA pass).

Use a contrast checker with your hex codes to confirm. Building a palette? Create colors in a palette generator, then run each text/background pair through the contrast checker before locking your design system.

How to Use a Contrast Checker

Enter foreground (text) and background colors; most tools accept hex. The checker shows the ratio and pass/fail for WCAG AA and AAA. Swap foreground and background for inverted schemes (e.g. light text on dark). Test the same combinations users see—including overlays and light/dark themes—and run every new pair through an accessibility contrast checker before you ship.

Tips for Keeping Contrast Compliant

• Define a small set of approved text/background pairs in your style guide and stick to them.
• When adding a new brand or UI color, run it against your neutrals (e.g. white, off-white, dark gray) in a contrast checker before using it for text.
• Don’t rely on color alone for meaning (e.g. “red = error”). Use text, icons, or pattern as well so colorblind users aren’t excluded.
• If a design fails, darken the text or lighten the background (or vice versa) until the ratio meets 4.5:1 for normal text.

Next Steps

List every text–background pair in your product and check each with a contrast checker. Fix failures. For new palettes, use a color palette generator, then validate contrast for body text, headings, and buttons. Document passing pairs so future designs stay accessible by default.

Frequently Asked Questions