Color Contrast Checker & Remediation Guide

By Desisle — SaaS UI/UX Design Agency Version: 2.0 | Last Updated: April 2026 License: Free to use and share with attribution to Desisle (desisle.com)

About Color Contrast

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.

Part 1: WCAG Contrast Ratio Requirements

WCAG AA (the standard most sites target)

WCAG AAA (enhanced — aspirational)

What doesn't require contrast compliance?

• Logos and brand names (WCAG exception)
• Disabled / inactive UI components (visually muted is the point)
• Decorative images (no information conveyed)
• Incidental text (text in photos, background images)

Part 2: How Contrast Is Measured

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.

Part 3: How to Test Color Contrast

Method 1: WebAIM Contrast Checker (Free)

webaim.org/resources/contrastchecker

Enter foreground and background hex codes. Get:

• Exact contrast ratio
• Pass/Fail for AA Normal, AA Large, AAA Normal, AAA Large
• Visual preview

Best for: Quick one-off checks, documenting specific color pair results.

Method 2: Chrome DevTools (Built-in)

Open any page, right-click an element, select "Inspect," then:

1. Select the text element
2. In the Styles panel, find the color property
3. Click the color swatch
4. The contrast ratio is displayed below the color picker
5. You can drag within the picker to see which colors would pass

Best for: Debugging live sites, finding acceptable alternative colors.

Method 3: Figma Plugins

Stark (stark.co) and Contrast are popular Figma plugins for:

• Testing any selected layer against its background
• Highlighting failing elements across an entire design file
• Simulating color blindness

Best for: Designers working in Figma before handoff.

Method 4: Automated Testing Tools

• axe DevTools (browser extension): Flags contrast failures across an entire page
• Lighthouse (in Chrome DevTools): Includes contrast in accessibility audits
• WAVE (webaim.org/tools/wave): Visual overlay showing contrast issues

Best for: Auditing entire pages or sites at once.

Method 5: Design System Tools

• Leonardo (leonardocolor.io): Generate contrast-safe color palettes from scratch
• Who Can Use (whocanuse.com): Shows contrast results and simulates how color combinations appear to users with various visual impairments

Part 4: Common Contrast Failures

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.

Part 5: Contrast-Safe Color Palette Starter

A complete palette where common combinations pass WCAG AA:

Neutrals (gray scale)

Usage guidelines:

• gray-500 or darker for text on white backgrounds (passes AA normal text)
• gray-400 or darker for large text on white (passes AA large text)
• gray-400 or darker for UI components (borders) — still check specific cases
• gray-200 or lighter for backgrounds that host dark text

Primary (blue)

Usage: primary-600 for text on white, primary-700 for smaller text

Semantic colors

Error (red):

• error-600 (#DC2626) on white = 4.83:1 ✓ AA — use for error text
• error-500 (#EF4444) on white = 3.76:1 ✓ AA Large only — use for large text or with icons

Success (green):

• success-600 (#16A34A) on white = 3.39:1 ✓ AA Large — needs careful use
• success-700 (#15803D) on white = 4.87:1 ✓ AA — prefer for body text

Warning (amber):

• warning-600 (#D97706) on white = 3.27:1 ✓ AA Large only
• warning-700 (#B45309) on white = 4.53:1 ✓ AA — prefer for body text

Info (cyan):

• info-600 (#0284C7) on white = 4.36:1 ✓ AA Large
• info-700 (#0369A1) on white = 5.48:1 ✓ AA

Part 6: Remediation Techniques

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.

Part 7: Color Blindness Considerations

Approximately 8% of men and 0.5% of women have some form of color vision deficiency.

Common types:

• Deuteranopia/Deuteranomaly (red-green): Most common type
• Protanopia/Protanomaly (red-green): Similar to deuteranopia
• Tritanopia/Tritanomaly (blue-yellow): Less common
• Achromatopsia (total color blindness): Rare

Design implications:

Problematic color combinations

• Red + Green (hardest for red-green color blindness)
• Blue + Purple (hard to distinguish)
• Green + Brown (look similar)
• Light Blue + Grey (low differentiation)

Best practices

1. Never use color as the sole indicator. Pair with icons, labels, patterns, or shapes.
2. Test with simulators (e.g., Stark, Color Oracle, Chrome DevTools color vision deficiency emulator)
3. Use color-blind-safe palettes:

• ColorBrewer (colorbrewer2.org) for data visualization
• Viridis, Cividis, Magma for sequential data
• Paul Tol's palettes for categorical data

Test your design

Simulate color blindness using:

• Chrome DevTools → Rendering → Emulate vision deficiencies
• Stark plugin in Figma
• Color Oracle (free desktop app)

Part 8: Audit Checklist

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

Part 9: Tools Summary

For designers (during design)

1. Stark plugin (Figma/Sketch) — design-time contrast testing
2. Contrast plugin (Figma) — quick contrast checks
3. Leonardo (leonardocolor.io) — generate contrast-safe palettes
4. Coolors (coolors.co) — palette generator with contrast features

For developers (during build)

1. Chrome DevTools — built-in contrast checker
2. axe DevTools (browser extension) — automated contrast testing
3. Stylelint a11y plugin — catches contrast issues during development

For auditors (during review)

1. WebAIM Contrast Checker — manual check for specific pairs
2. WAVE (webaim.org/tools/wave) — whole-page audit
3. Lighthouse (Chrome DevTools) — automated audit including contrast
4. Accessibility Insights (Microsoft) — comprehensive testing tool

Sources and References

• 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.