Das Plugin verbessert automatisch schwache Farb-Kontraste auf AA- oder AAA-Niveau. Es benutzt spezielle CSS-Variablen. Diese heißen Override.
Finden wir Probleme, kannst du zwei Dinge tun. Du kannst das Problem per Hand ändern. Das braucht viel Zeit. Oder du nutzt das Plugin, das die Kontraste automatisch verbessert. Es macht helle Farben dunkler, bis die richtigen Kontraste erreicht sind. Dafür nutzt das Plugin CSS-Variablen. Mit feststehenden Farbwerten, genannt HEX-Werte, ist das schwieriger. Dann sieht es manchmal anders aus.
Gehe zu den Einstellungen im Admin-Bereich. Klicke auf WP-Admin, dann auf Barrierefreiheit. Danach auf Module und schließlich auf Color Contrast Fix.
Nutze zuerst den Kontrast-Scanner. Schau dir die Probleme an, dann repariert das Plugin automatisch. Wenn das Aussehen wichtig ist, teste alle Änderungen zuerst. Nutze die visuelle Vorschau-Funktion, bevor die Seite live geht.
In einem 15-Minuten-Gespräch prüfen wir das Modul. Wir schauen, ob es für dein Design und deine Inhalte passt. Wir erklären auch, wie du es einrichten kannst.
Color Contrast Fix
Hebt automatisch zu schwache Kontraste über CSS-Variablen-Override auf AA- oder AAA-Niveau.
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.
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.
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
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.
Das passt thematisch zusammen
Kontrast-Scanner
WCAG 1.4.3Live-Scan im Frontend: prüft alle Text/Hintergrund-Paare gegen AA (4.5:1) oder AAA (7:1).
Sichtbarer Fokus
WCAG 2.4.11Sorgt 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.
