Color Contrast Checker & Remediation Guide

Color contrast is the most commonly failed accessibility criterion — and the most frequently targeted in ADA lawsuits. Fortunately, it's one of the easiest to audit and fix.

This guide covers:

• WCAG contrast ratio requirements
• How contrast is measured
• How to test color contrast
• Common failure patterns and their fixes
• A contrast-safe color palette starter
• Remediation techniques

Who this is for: Designers, developers, and accessibility specialists ensuring text and UI elements meet WCAG AA contrast standards.

The contrast ratio formula

Contrast is measured as a ratio between the relative luminance of two colors:

Formula: (L1 + 0.05) / (L2 + 0.05)

Where:

• L1 = relative luminance of the lighter color
• L2 = relative luminance of the darker color

Ratios range from 1:1 (no contrast) to 21:1 (maximum — black on white)

Reference points

• 1:1 — No contrast (same color)
• 3:1 — Minimum for large text and UI (AA)
• 4.5:1 — Minimum for normal text (AA)
• 7:1 — Minimum for normal text (AAA)
• 21:1 — Maximum (pure black on pure white)

What counts as "large text"?

• 18 CSS pixels (1.125rem) or larger for regular weight
• 14 CSS pixels (0.875rem) or larger for bold weight (700+)

These thresholds reflect readability research — larger/bolder text is easier to read at lower contrast.

Failure 1: Light gray text on white

Common violations:

• #999999 on #FFFFFF = 2.85:1 (fails AA — needs 4.5:1)
• #888888 on #FFFFFF = 3.54:1 (fails AA for normal text)
• #777777 on #FFFFFF = 4.48:1 (borderline fails AA)

Fix: Darken the text.

• #666666 on #FFFFFF = 5.74:1 (passes AA)
• #595959 on #FFFFFF = 7:1 (passes AAA)

Failure 2: Light gray placeholder text

Fail: Placeholder text at #CCCCCC on #FFFFFF = 1.61:1 (far below AA)

Fix: Use darker placeholder color.

• #757575 on #FFFFFF = 4.54:1 (barely passes AA)
• Better: Design your UI so users don't need to rely on placeholder text for understanding

Failure 3: White text on light colored buttons

Fail: White text (#FFFFFF) on light blue button (#93C5FD) = 1.67:1 (fails all levels)

Fix:

• Darken the button: White on #2563EB = 6.15:1 (passes AA)
• Change text color: Dark blue text on light blue button

Failure 4: White text on yellow/amber

Fail: White on yellow/amber almost always fails (1.5-2:1 typical)

Fix: Use dark text (near-black) on yellow backgrounds.

• #000000 on #FBBF24 = 13.08:1 (passes all)

Failure 5: Colored links on colored backgrounds

Fail: Blue link (#3B82F6) on light blue background (#DBEAFE) = 2.95:1 (fails AA)

Fix: Use underlined + higher contrast link color, or darken the text.

Failure 6: Semitransparent text over images

Fail: Any text over a busy image likely fails contrast. Contrast depends on the specific pixels behind the text.

Fix:

• Add a dark overlay between image and text (e.g., 40-60% black)
• Use a solid background for the text area
• Test with the actual image in place

Failure 7: Low-contrast icons and UI borders

Form field borders at #E5E7EB on #FFFFFF = 1.28:1 (fails AA's 3:1 for UI components)

Fix: Use #9CA3AF for borders = 2.62:1 (still borderline, but more visible). Better: #6B7280 on #FFFFFF = 4.71:1 (passes all UI requirements).

Failure 8: Focus indicators too subtle

Some browsers' default focus rings are blue at 1px — often fails 3:1 contrast against various backgrounds.

Fix: Custom focus rings that meet 3:1 contrast, typically 2px wide, with high-contrast colors.

Technique 1: Darken the foreground

Most common fix. Darken text by moving one step darker in your color scale.

• Fail: gray-400 text → Pass: gray-500 or gray-600

Technique 2: Lighten the background

Sometimes easier than darkening text (especially for branded colors).

• Fail: Blue text on similar blue bg → Pass: Blue text on white bg

Technique 3: Increase font size or weight

Large text (18px+ regular or 14px+ bold) only needs 3:1, which is easier to achieve.

• Fail: 14px regular at 3.8:1 → Pass: 16px bold at 3.8:1 (large text threshold)

Technique 4: Add a solid background to text over images

If text sits on a photo or gradient:

• Add a semi-transparent dark overlay (40-60% black)
• Add a solid background color behind the text
• Use a darker photo filter

Technique 5: Add non-color indicators

If darkening would ruin design intent, ensure information isn't conveyed by color alone:

• Add icons to error messages (not just red border)
• Underline links (not just blue color)
• Use patterns (stripes, dots) in addition to color in charts

Technique 6: Revise brand colors

If a critical brand color consistently fails, propose a brand color update. Many brands have updated logos/colors specifically for accessibility (e.g., Coca-Cola, Microsoft).

Technique 7: Provide a high-contrast mode

If brand/design constraints make compliance difficult, offer a user-selectable high-contrast theme.

Walk through your product and check:

Text contrast:

• All body text passes 4.5:1 on its background
• All large text passes 3:1 on its background
• Headings pass appropriate contrast
• Labels and form fields pass 4.5:1
• Placeholder text passes 4.5:1 (or it's not critical for understanding)
• Error messages pass 4.5:1
• Success messages pass 4.5:1

UI contrast:

• Button backgrounds vs. page backgrounds: 3:1
• Button text vs. button backgrounds: 4.5:1
• Form field borders: 3:1 against background
• Focus indicators: 3:1 against surrounding
• Icons in navigation: 3:1 against background
• Chart elements (bars, lines): 3:1 against background

Non-color indicators:

• Error states have icons + text (not just red color)
• Links are underlined (or have 3:1 contrast against body text)
• Required fields marked with asterisk or text (not just color)
• Status badges have icons/text (not just color)

Dark mode (if applicable):

• All above tests pass in dark mode
• Text on dark backgrounds meets contrast
• Desaturated colors still meet contrast

Color blindness:

• Tested with deuteranopia simulation
• Tested with protanopia simulation
• Tested with achromatopsia simulation (greyscale)
• Information still conveyed when color is removed

• WCAG 2.1 Success Criterion 1.4.3: Contrast (Minimum) — W3C
• WCAG 2.1 Success Criterion 1.4.11: Non-text Contrast — W3C
• WebAIM (webaim.org) — accessibility research and tools
• Deque — accessibility guidance
• IBM Carbon Design System — color system documentation
• Material Design 3 — accessibility guidelines

Created by Desisle — SaaS UI/UX Design Agency desisle.com | hello@desisle.com Free to use and share with attribution.

For a full accessibility audit including contrast and other WCAG criteria, contact us at hello@desisle.com.