Mechanik-Modul · WCAG 1.4.6 · Stufe AAA

Color Contrast Fix

Hebt automatisch zu schwache Kontraste über CSS-Variablen-Override auf AA- oder AAA-Niveau.

Was es macht

Funktion in einem Satz — und in 3 Sätzen

Wenn der Kontrast-Scanner Probleme findet, gibt es zwei Wege: manuell im CSS nachbessern (aufwendig) oder das Plugin lässt automatisch nachregeln. Color Contrast Fix erhöht zu helle Text-Farben so weit, bis der Kontrast die Ziel-Stufe erreicht.

Wichtig: Funktioniert sauber nur bei Themes, die CSS-Variablen für Farben verwenden. Bei harten HEX-Werten greift der Fix nur über Overrides — kann dann visuell sichtbar abweichen.

So implementiert das Plugin es

Technische Maßnahmen

CSS-Variable-Discovery: erkennt `--color-text`, `--text-secondary` etc. automatisch.
Luminanz-Anhebung: bei Bedarf wird der Farbwert in Richtung dunklerem Ton verschoben.
Hue-Preservation: Farbton bleibt erhalten, nur die Helligkeit ändert sich.
Fallback-Override: bei harten Farben wird ein `style`-Attribut mit höherer Spezifität gesetzt.
Visual-Diff-Preview im Backend: Vorher/Nachher-Screenshot pro betroffenem Selektor.

Im Plugin-Backend

Diese Einstellungen findest du im Modul-Tab

Ziel-Kontrast: AA (4.5:1) / AAA (7:1)
Strategie: nur CSS-Variablen / Variablen + Overrides / alles aggressiv
Hue-Drift-Limit (wie weit darf der Farbton variieren, Default 5°)
Visual-Diff-Mailbenachrichtigung an Admin: ja / nein
Whitelist (Selektoren, die nie geändert werden)

Pfad im Admin: WP-Admin → Barrierefreiheit → Module → Color Contrast Fix

Wann brauchst du das Modul?

Anwendungsfall

Empfohlen nach dem Kontrast-Scanner: Erst sehen, was kaputt ist, dann automatisch reparieren lassen. Brand-strenge Sites sollten die visuelle Vorschau-Funktion nutzen, bevor live geschaltet wird.

Verwandte Module

Das passt thematisch zusammen

Kontrast-Scanner
WCAG 1.4.3
Live-Scan im Frontend: prüft alle Text/Hintergrund-Paare gegen AA (4.5:1) oder AAA (7:1).
Sichtbarer Fokus
WCAG 2.4.11
Sorgt für einen kräftigen, immer sichtbaren Fokus-Ring auf allen fokussierbaren Elementen — mit AAA-Kontrast.

Modul für deine Seite aktivieren?

Im 15-Minuten-Erstgespräch klären wir, ob das Modul für deinen Theme- und Inhalts-Typ relevant ist — und wie die Einrichtung aussieht.

15-Min-Erstgespräch
Alle Module ansehen