Barrierefreie Farben und Kontraste in Avada richtig einstellen
15.03.2026
Katja Hazod
Farbe ist eines der wirkungsvollsten Gestaltungsmittel im Webdesign — und einer der häufigsten Stolpersteine bei der Barrierefreiheit. Avada bietet mit seinem Global-Colors-System einen sehr eleganten Weg, Farbpaletten konsequent und WCAG-konform zu verwalten. Wie das funktioniert, zeigen wir Schritt für Schritt.
Warum Farbe und Barrierefreiheit so eng zusammenhängen
Schlechte Farbkontraste gehören laut WebAIM zu den fünf häufigsten Accessibility-Fehlern auf Websites weltweit — und das, obwohl sie technisch gesehen zu den einfachsten Problemen gehören, die man beheben kann. Das Paradoxe: Viele der Kontrast-Probleme entstehen nicht durch Nachlässigkeit, sondern durch Designentscheidungen, die optisch gut aussehen, aber für bestimmte Nutzergruppen unlesbar sind.
Betroffen sind nicht nur Menschen mit starker Sehbehinderung. Auch Menschen mit leichter Farbfehlsichtigkeit (immerhin rund 8 % aller Männer), ältere Nutzer mit nachlassender Sehschärfe oder einfach alle, die bei Sonnenlicht auf ihr Smartphone schauen, profitieren von ausreichenden Kontrasten.
Das Avada Global Colors System — der Schlüssel zu konsistenter Barrierefreiheit
Avada bietet ein zentrales Farbverwaltungssystem: die Global Colors. Hier legt man einmalig alle Farben fest, die auf der gesamten Website verwendet werden — und verknüpft sie dann im Fusion Builder mit den entsprechenden Elementen. Das hat einen entscheidenden Vorteil für die Barrierefreiheit: Wenn eine Farbe nicht konform ist und korrigiert werden muss, ändert man sie an einer einzigen Stelle — und die Korrektur wirkt sich sofort auf die gesamte Website aus.
Unsere Empfehlung: Niemals Farben direkt in einzelnen Elementen hardcoden. Immer Global Colors verwenden. Das spart nicht nur Aufwand bei Korrekturen, sondern macht die gesamte Website konsistenter und wartbarer.
Schritt für Schritt: WCAG-konforme Farbpalette in Avada anlegen
Global Colors im Avada Options Panel aufrufen
Navigieren Sie im WordPress-Backend zu Avada → Theme Options → Colors. Dort finden Sie die Global Colors-Verwaltung, in der Sie neue Farben anlegen, benennen und mit einem Hex-Wert versehen können.
Legen Sie zunächst alle Grundfarben Ihrer Website an: Primärfarbe, Sekundärfarbe, Akzentfarbe, sowie alle Texfarben und Hintergrundfarben.
Avada → Theme Options → Colors → Global Colors
Kontrastverhältnisse vor dem Festlegen prüfen
Bevor Sie eine Farbe in Avada eintragen, prüfen Sie das Kontrastverhältnis mit dem WebAIM Contrast Checker: Geben Sie die geplante Textfarbe und die Hintergrundfarbe ein und lesen Sie das Verhältnis ab.
Ziel: mindestens 4,5:1 für normalen Text, 3:1 für großen Text (ab 18pt) und UI-Komponenten wie Buttons. Wenn das Ergebnis unter dem Zielwert liegt, den Hex-Wert der dunkleren Farbe anpassen bis der Wert passt.
webaim.org/resources/contrastchecker
Farben sinnvoll benennen
Benennen Sie jede Global Color klar und beschreibend — nicht „Farbe 1″ oder „Blau“, sondern zum Beispiel „Primärfarbe Text“, „Hintergrund Hell“ oder „Akzent CTA-Button“. Das erleichtert die spätere Arbeit im Fusion Builder erheblich, besonders wenn mehrere Personen an der Website arbeiten.
Tipp: Farbgruppen anlegen — z.B. alle Textfarben, alle Hintergrundfarben, alle interaktiven Farben
Typography Global Options anpassen
Unter Avada → Theme Options → Typography legen Sie die globalen Schriftgrößen fest. Bodytext sollte mindestens 16px betragen. Verknüpfen Sie Schriftfarben direkt mit den zuvor angelegten Global Colors — dann profitieren auch Typografie-Elemente automatisch von späteren Farb-Korrekturen.
Avada → Theme Options → Typography
Button- und Formularfarben separat prüfen
Buttons und Formularelemente haben eigene Farbeinstellungen in Avada. Wichtig: Nicht nur die Hintergrundfarbe des Buttons prüfen — auch der Kontrast zwischen Button-Beschriftung und Button-Hintergrund muss mindestens 4,5:1 betragen. Gleiches gilt für Placeholder-Text in Formularfeldern (oft viel zu hell).
Avada → Theme Options → Buttons & Avada → Theme Options → Forms
Gesamte Website nach dem Launch nochmals prüfen
Auch wenn alle Global Colors korrekt eingestellt sind, kann es vereinzelte Stellen geben, an denen Farben direkt im Element überschrieben wurden. Ein abschließender Scan mit WAVE oder axe DevTools stellt sicher, dass keine Kontrast-Verstöße übrig geblieben sind.
Browser-Plugin: axe DevTools oder WAVE
Typische Kontrastwerte — gut und schlecht im Vergleich
Zur Orientierung einige häufige Farbkombinationen und ihre Kontrastverhältnisse:
| Textfarbe | Hintergrund | Verhältnis | WCAG AA |
|---|---|---|---|
| #1c1a17 | #fdfcf9 | 17,5:1 | Bestanden |
| #595959 | #ffffff | 7,0:1 | Bestanden |
| #1a4a2e | #eef4f0 | 8,2:1 | Bestanden |
| #888780 | #ffffff | 3,5:1 | Nicht bestanden |
| #BA7517 | #ffffff | 3,8:1 | Nicht bestanden |
| #854F0B | #ffffff | 6,1:1 | Bestanden |
Die letzte Zeile zeigt ein häufiges Problem: Orange- und Goldtöne — beliebt als Akzentfarben — erreichen auf weißem Hintergrund oft nicht das geforderte Kontrastverhältnis. Die Lösung ist meist eine dunklere Variante der Farbe, die das Design-Gefühl beibehält, aber konform ist.
Die häufigsten Farb-Fallen in Avada-Projekten
Placeholder-Text in Formularen
Avadas Standard-Placeholder-Farbe ist oft zu hell. Unter Theme Options → Forms die Placeholder-Farbe auf mindestens 4,5:1 Kontrast zur Feldhintergrundfarbe anheben.
Helle Texte auf Hintergrundbildern
Weißer Text auf Fotos sieht gut aus — ist aber fast nie konform, weil der Bildinhalt variiert. Lösung: Halbdurchsichtiges dunkles Overlay über dem Bild, oder einen farbigen Solid-Hintergrund statt Bild verwenden.
Deaktivierte Button-Zustände
Deaktivierte Buttons werden in WCAG von der Kontrast-Anforderung ausgenommen — aber aktive Buttons, Hover- und Fokus-Zustände müssen alle separat geprüft werden.
Farbige Badges und Tags
Kleine farbige Elemente wie Kategorie-Badges oder Status-Tags haben oft zu wenig Kontrast zwischen Text und Hintergrund. Immer den dunkelsten Farbton der Palette für Text auf hellem Hintergrund verwenden.
Fokus-Indikatoren ohne ausreichenden Kontrast
Der Fokus-Rahmen bei Tastaturnavigation muss selbst einen Kontrast von mindestens 3:1 zum umgebenden Hintergrund haben. Standard-Browser-Styles reichen dafür oft nicht aus.
Tools für die Kontrast-Prüfung
Web-Tool
WebAIM Contrast Checker
Der Klassiker. Zwei Hex-Werte eingeben, Kontrast ablesen. Zeigt auch das Ergebnis für Large Text und UI-Komponenten.
Browser-Plugin
axe DevTools
Scannt die gesamte Seite auf Kontrast-Verstöße und markiert sie direkt im Browser. Kostenlose Basisversion reicht für den Alltag.
Browser-Plugin
WAVE
Zeigt Kontrast-Fehler und viele andere Accessibility-Probleme visuell direkt auf der Seite an. Sehr schnell für einen ersten Überblick.
Design-Tool
Figma Stark Plugin
Wer in Figma designt: Das Stark-Plugin prüft Kontraste direkt im Designprozess — bevor der erste Code geschrieben wird.
Unsere Faustregel: Barrierefreiheit bei Farben beginnt im Design-Brief — nicht erst beim Entwickeln. Wer Farben schon in der Konzeptphase auf WCAG-Konformität prüft, spart sich aufwändige Korrekturen im Nachhinein.
Über MyWebsiteService
MyWebsiteService ist die Münchner Agentur von Katja Hazod — seit 2012 an der Seite von Unternehmen, NGOs und Selbständigen. Der Fokus auf barrierefreies Webdesign begann 2018 mit einer Anfrage eines Gehörlosen-Verbands. Seitdem sind wir beflügelt von der Idee, jede Website für wirklich jede Person zugänglich zu machen — mit viel Liebe, Empathie und Wertschätzung.
Unsere Werte: wertschätzend · offen · ehrlich · liebevoll
Unser Motto: Liebe. Lebe. Lache.
Häufig gestellte Fragen zum BFSG
Avada bietet die beste Kombination aus Gestaltungsfreiheit, technischer Barrierefreiheits-Grundlage, Kundenbedienbarkeit über den Fusion Builder und langfristiger Verlässlichkeit. Nach vielen Jahren Projekterfahrung hat sich Avada als die zuverlässigste Wahl erwiesen.
Theoretisch ja, aber der Aufwand ist oft größer. Viele kostenlose Themes haben keine saubere HTML-Struktur, keine ARIA-Unterstützung und werden nicht regelmäßig auf Barrierefreiheit hin weiterentwickelt. Das bedeutet mehr manuelle Nacharbeit.
Avada ist nicht das einzige barrierefreie Theme, aber eines der besten im Verhältnis aus Flexibilität, Barrierefreiheits-Grundlage und Kundenbedienbarkeit. Kein Theme ist automatisch WCAG 2.2 AA-konform — fachkundige Konfiguration und Testing sind immer notwendig.
Avada bietet keine eingebaute automatische Dark-Mode-Umschaltung. Es ist jedoch möglich, über CSS und das prefers-color-scheme Media Query einen Dark Mode zu implementieren. Für die meisten Websites empfehlen wir, stattdessen auf sehr gute Kontraste im Standard-Design zu setzen und keine Dark-Mode-Variante zu bauen.
Schnellster Weg: Hex-Werte aus Avada Global Colors kopieren und im WebAIM Contrast Checker eingeben. Für eine vollständige Prüfung der gesamten Website empfehlen wir das Browser-Plugin axe DevTools oder WAVE, die alle Kontrastverstöße auf einer Seite automatisch markieren.
WCAG 2.2 AA fordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 18pt unformatiert bzw. 14pt fett) sowie für UI-Komponenten wie Buttons und Formularrahmen. Mit dem WebAIM Contrast Checker lässt sich das schnell prüfen.
Avada Global Colors ist ein zentrales Farbverwaltungssystem im Theme Options Panel. Hier werden alle Farben einmalig definiert und stehen dann im gesamten Fusion Builder zur Verfügung. Ändert man eine Global Color, wirkt sich das sofort auf alle Stellen aus, wo diese Farbe verwendet wird.
Avada ist ein kommerzielles Theme und wird über ThemeForest verkauft. In unseren Projekten ist die Avada-Lizenz in der Regel Teil des Projektangebots — sprechen Sie uns an.
Absolut. Avada skaliert von der kleinen Vereinsseite bis zum komplexen Unternehmensauftritt. Die Einstiegshürde ist niedrig — dank vorgefertigter Demo-Layouts kann man schnell starten. Für speziellere Anforderungen bietet Avada die nötige technische Tiefe.
Ja, das ist einer der großen Vorteile von Avada. Der Fusion Builder erlaubt es, Inhalte visuell zu bearbeiten, ohne Code schreiben zu müssen. Nach einer kurzen Einweisung können Kunden Texte, Bilder, neue Seiten und viele Layouts eigenständig pflegen.
Avada liefert eine solide technische Grundlage für Barrierefreiheit — semantisches HTML, ARIA-Unterstützung und barrierefreie Komponenten sind im Theme angelegt. Eine vollständige WCAG 2.2 AA-Konformität entsteht jedoch erst durch die fachkundige Konfiguration und Umsetzung. Avada alleine reicht nicht — aber es ist ein sehr guter Ausgangspunkt.
Im Fusion Builder kann beim Heading-Element das HTML-Tag (h1 bis h6) unabhängig von der visuellen Schriftgröße eingestellt werden. Wichtig: pro Seite genau eine h1, dann logisch verschachtelte h2 und h3. Die Browser-Extension „HeadingsMap“ hilft beim schnellen Prüfen.
Gutenberg ist der native WordPress-Editor mit Block-Prinzip. Der Avada Fusion Builder bietet deutlich mehr Gestaltungsoptionen pro Element, globale Einstellungen für Farben und Schriften sowie engere Integration mit dem Avada-Theme. Für komplex gestaltete Seiten mit hohem Designanspruch bietet der Fusion Builder mehr Möglichkeiten.
Ja. Der Fusion Builder ist so aufgebaut, dass Kunden nach einer kurzen Einweisung Texte, Bilder und viele Layoutelemente selbst bearbeiten können. Wir konfigurieren Avada dabei so, dass nur die für den Kunden relevanten Bereiche editierbar sind — das verhindert versehentliche Änderungen am Design.
Der Fusion Builder liefert eine gute Grundlage: Die generierten Elemente verwenden semantisches HTML und grundlegende ARIA-Attribute. WCAG 2.2 AA-Konformität erfordert jedoch zusätzlich korrekte Konfiguration — Alt-Texte, zugängliche Formularlabels, korrekte Überschriften-Hierarchie. Diese Konfiguration ist im Fusion Builder gut möglich, passiert aber nicht automatisch.