AccessibilityMedium

Color contrast issues

Text elements on your site have insufficient contrast with their background. This does not meet WCAG 2.1 criteria (minimum 4.5:1 ratio for normal text).

Why it matters

Insufficient contrast makes text difficult or impossible to read for people with low vision or color blindness. This affects about 8% of men and 0.5% of women.

How to fix

  1. 1

    Identify issues with Lighthouse

    Chrome DevTools → Lighthouse → Accessibility category → "Contrast" audit. Failing elements are listed with their current ratio and the minimum required ratio.

  2. 2

    Check contrast ratios

    Minimum WCAG AA ratio: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ normal). Use the WebAIM Contrast Checker tool (webaim.org/resources/contrastchecker/).

  3. 3

    Fix colors in the theme

    css
    /* Example: light grey text on white background (BAD)
   Ratio: 2.8:1 - non-compliant */
p { color: #aaaaaa; }

/* Fix: darker grey
   Ratio: 7.2:1 - WCAG AA and AAA compliant */
p { color: #545454; }
  4. 4

    In the WordPress Customizer

    Appearance → Customize → Colors. Modify text and background colors. Some modern themes display a warning if contrast is insufficient.

Related articles

AccessibilityMissing or incorrectly associated form labelsAccessibilityKeyboard navigation impossible or dysfunctionalAccessibilityIncorrect H1-H6 heading structure

Ready to fix this issue on your site?

Audit my site for free →