Text Color Contrast Checker

Ensure your text is readable by everyone. Test color combinations against WCAG accessibility standards.

Text Color Contrast Checker

Test text color contrast against backgrounds for WCAG accessibility compliance.

Text Color:

Background Color:

Font Size: 16px

Bold Text

Preview:

The quick brown fox jumps over the lazy dog.

WCAG Guidelines

AA Normal: 4.5:1 minimum for normal text
AAA Normal: 7:1 minimum for enhanced accessibility
AA Large: 3:1 for text 18px+ or 14px+ bold
AAA Large: 4.5:1 for large text

Checking Font Contrast for Accessibility

The font contrast checker calculates the contrast ratio between text and background colors. It uses the WCAG 2.1 formula based on relative luminance—measuring how much light the foreground and background colors emit.

The tool converts hex, RGB, or HSL colors to relative luminance values, then applies the contrast ratio formula: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker.

WCAG contrast requirements:

AA (normal text) - 4.5:1 minimum contrast ratio
AA (large text) - 3:1 minimum (18pt+ or 14pt bold)
AAA (normal text) - 7:1 minimum contrast ratio
AAA (large text) - 4.5:1 minimum

The checker shows pass/fail for each WCAG level and suggests adjustments if your colors don't meet requirements. It also previews how your actual text looks with the selected colors at different sizes.

When You'd Actually Use This

Meeting accessibility compliance

Your client requires WCAG AA compliance. Check all text/background combinations to ensure they meet the 4.5:1 ratio before launch.

Designing for low vision users

Your audience includes older adults or people with visual impairments. High contrast ensures they can read your content without strain.

Testing dark mode colors

Your dark mode uses gray text on dark backgrounds. Verify the contrast is sufficient—dark modes often fail WCAG because designers pick colors that look good but don't meet ratios.

Creating accessible buttons

Button text needs to stand out from the button background. Check contrast for primary, secondary, and disabled states.

Validating brand colors

Your brand uses light gray (#CCCCCC) for secondary text. The checker reveals it only achieves 2.5:1 on white—failing WCAG. Time to pick a darker gray.

Testing gradient backgrounds

Text over gradients can have varying contrast. Check the worst-case point (where text color is closest to background) to ensure readability everywhere.

What to Know Before Using

Large text has lower requirements.Text 18pt (24px) or larger, or 14pt (18.5px) bold, qualifies as "large text" with a 3:1 requirement instead of 4.5:1.

Contrast isn't everything.WCAG also requires that text can't be replaced by images (with rare exceptions). And color alone shouldn't convey information—use icons or labels too.

Anti-aliased text affects contrast.Font smoothing blends edges with the background, effectively reducing contrast at small sizes. The checker calculates theoretical contrast; real-world readability may vary.

Transparent overlays need special handling.If text sits on a semi-transparent overlay above an image, the effective background color depends on what's underneath. Check the composite color.

Pro tip: Aim for 7:1+ contrast when possible. It future-proofs your design for AAA compliance and helps users in bright sunlight or with aging eyes.

Common Questions

What's the formula for contrast ratio?

(L1 + 0.05) / (L2 + 0.05) where L1 is relative luminance of the lighter color and L2 is the darker. Luminance is calculated from linearized RGB values with weights: 0.2126×R + 0.7152×G + 0.0722×B.

Does this work for colored text on colored backgrounds?

Yes. The formula works for any color combination—white on black, yellow on blue, red on green. It's based on luminance, not just lightness.

Why does my green text fail but gray passes?

Green has lower luminance contribution (the eye is less sensitive to green light) than you'd expect. A green that looks bright may have lower luminance than a gray of similar perceived brightness.

Do images with text need contrast checking?

Yes, if the text is part of the image. However, WCAG generally discourages text in images—use real text with CSS styling instead for better accessibility.

What about text shadows?

Text shadows can improve or hurt contrast. A dark shadow behind light text on a dark background creates a buffer. But shadows shouldn't be relied upon—check contrast without them.

Is there a tool to auto-fix low contrast?

Some design tools (Figma plugins, Stark) can suggest higher-contrast alternatives. This checker shows pass/fail—you'll need to manually adjust colors to improve contrast.

Other Free Tools

Search tools

Text Color Contrast Checker