Skip to content

Mechanics module · WCAG 1.4.6 · Level AAA

Color Contrast Fix

Automatically raises insufficient contrast to AA or AAA level via CSS variable override.

What it does

Function in one sentence — and in three sentences

If the contrast scanner detects problems, there are two options: manually correct it in the CSS (time-consuming) or let the plugin adjust automatically. Color Contrast Fix increases overly bright text colors until the contrast reaches the target level.

Important: This only works reliably with themes that use CSS variables for colors. With hard HEX values, the fix only works via overrides—which can result in a visually noticeable difference.

This is how the plugin implements it.

Technical measures

  • CSS Variable Discovery: automatically recognizes `--color-text`, `--text-secondary` etc.
  • Luminance increase: if necessary, the color value is shifted towards a darker tone.
  • Hue PreservationThe color tone remains the same, only the brightness changes.
  • Fallback override: For hard colors, a `style` attribute with higher specificity is set.
  • Visual diff preview In the backend: Before/after screenshot for each affected selector.
In the plugin backend

You can find these settings in the module tab.

  • Target contrast: AA (4.5:1) / AAA (7:1)
  • Strategy: only CSS variables / variables + overrides / everything aggressive
  • Hue drift limit (how far the color tone may vary, default 5°)
  • Visual diff email notification to admin: yes / no
  • Whitelist (selectors that are never changed)

Path in Admin: WP-Admin → Accessibility → Modules → Color Contrast Fix

When do you need the module?

Use case

Recommended after With the contrast scanner: First see what's broken, then let it be repaired automatically. Brand-conscious sites should use the visual preview function before going live.

Related modules

That fits together thematically.

  • Contrast scanner

    WCAG 1.4.3

    Live scan in the frontend: checks all text/background pairs against AA (4.5:1) or AAA (7:1).

  • Visible focus

    WCAG 2.4.11

    Provides a strong, always visible focus ring on all focusable elements — with AAA contrast.

Activate the module for your site?

In the initial 15-minute consultation, we will clarify whether the module is relevant for your theme and content type — and what the setup looks like.

15-minute initial consultation
View all modules