Werbefarben- und CTA-Kontrast-Simulator für Webseiten und Anzeigen
Farben prägen den ersten Eindruck oft noch, bevor ein Wort gelesen wird. Sie können Vertrauen schaffen, Aufmerksamkeit lenken und eine Marke unverwechselbar machen – oder wichtige Inhalte ungewollt schwer lesbar werden lassen.
Mit dem Markenfarben-Kontrast-Checker prüfen Sie deshalb nicht nur einzelne Farbkombinationen, sondern erleben direkt, wie Ihre Farben auf Webseiten, Anzeigen, CTA-Buttons und anderen Werbemitteln wirken. So entsteht aus einer schönen Farbpalette ein visuell überzeugendes und zugleich gut zugängliches Markenerlebnis:
Interaktives Tool für Markenfarben und Werbemittel
Markenfarben-Kontrast-Checker: Farben, Texte und CTA-Buttons testen
Prüfen Sie bis zu sechs Markenfarben gleichzeitig. Der Kontrast-Checker berechnet die Kontrastverhältnisse Ihrer Farbkombinationen, bewertet ihre Eignung für Texte und Bedienelemente und zeigt die Farben direkt in typischen Marketing- und Webseiten-Beispielen.
Anders als ein einfacher Farbkontrast-Rechner untersucht dieses Tool eine vollständige Farbpalette. Dadurch erkennen Sie, welche Farben sich als Hintergrund, Fließtext, Überschrift, Link, CTA-Button, Buttontext, Rahmenfarbe oder dekorativer Akzent eignen.
- Bis zu sechs Markenfarben in einer Kontrastmatrix vergleichen
- WCAG-Kontrastwerte für normalen und großen Text prüfen
- CTA-Buttons und relevante grafische Bedienelemente bewerten
- Landingpage, Anzeige, Newsletter, Angebotsbox und Flyer simulieren
- Kritische Farbkombinationen und geeignete Alternativen erkennen
- Helligkeitsunterschiede zusätzlich in einer Graustufenansicht prüfen
So funktioniert der Markenfarben-Check
- Markenfarben eintragen: Geben Sie die Hex-Werte Ihrer Primär-, Sekundär-, Akzent-, Hintergrund- und Textfarben ein oder wählen Sie die Farben mit den Farbfeldern aus.
- Beispielinhalte anpassen: Ergänzen Sie eine Überschrift, einen kurzen Werbetext und die gewünschte Beschriftung des CTA-Buttons.
- Ergebnisse vergleichen: Prüfen Sie die Kontrastmatrix, die empfohlenen Farbrollen, die Marketingvorschauen und mögliche barriereärmere Farbvarianten.
Markenfarben und Beispielinhalte eingeben
Verwenden Sie sechsstellige Hex-Farbwerte im Format #4054B2. Die Beispielpalette ist bereits vollständig ausgefüllt und kann direkt getestet oder ersetzt werden.
Ergebnisübersicht der Beispielpalette
Die folgenden Werte zeigen die statisch hinterlegte Auswertung der Beispielpalette. Bei aktivierter Interaktivität werden alle Werte nach jeder gültigen Farbeingabe aktualisiert.
Geprüfte Rollen-Kombinationen
Vordergrund- und Hintergrundkombinationen ohne identische Farbpaare.
Für normalen Text geeignet
Kombinationen mit mindestens 4,5:1 Kontrast.
Für großen Text oder UI geeignet
Kombinationen mit mindestens 3:1 Kontrast.
AAA für normalen Text
Kombinationen mit mindestens 7:1 Kontrast.
Kritische Kombinationen
Kombinationen mit weniger als 3:1 Kontrast.
Farbkontrast-Matrix der gesamten Markenpalette
Die Zeilen zeigen die Vordergrund- oder Textfarbe. Die Spalten zeigen die jeweilige Hintergrundfarbe. Das Kontrastverhältnis ist in beiden Richtungen identisch, die praktische Verwendung kann sich jedoch unterscheiden: Eine Farbe kann beispielsweise als Fläche geeignet sein, aber nicht als kleiner Text.
- AAA normal: mindestens 7:1
- AA normal: mindestens 4,5:1
- Nur groß/UI: mindestens 3:1, aber weniger als 4,5:1
- Nicht geeignet: weniger als 3:1
| Vordergrund | Primärfarbe | Sekundärfarbe | Akzentfarbe | Heller Hintergrund | Dunkler Hintergrund | Textfarbe |
|---|---|---|---|---|---|---|
| Primärfarbe | 1,00:1 Gleiche Farbe | Nicht geeignet | Nicht geeignet | AA normal | Nicht geeignet | Nicht geeignet |
| Sekundärfarbe | Nicht geeignet | 1,00:1 Gleiche Farbe | Nicht geeignet | Nur groß/UI | Nur groß/UI | Nur groß/UI |
| Akzentfarbe | Nicht geeignet | Nicht geeignet | 1,00:1 Gleiche Farbe | Nur groß/UI | Nur groß/UI | Nur groß/UI |
| Heller Hintergrund | AA normal | Nur groß/UI | Nur groß/UI | 1,00:1 Gleiche Farbe | AAA normal | AAA normal |
| Dunkler Hintergrund | Nicht geeignet | Nur groß/UI | Nur groß/UI | AAA normal | 1,00:1 Gleiche Farbe | Nicht geeignet |
| Textfarbe | Nicht geeignet | Nur groß/UI | Nur groß/UI | AAA normal | Nicht geeignet | 1,00:1 Gleiche Farbe |
Die Kennzeichnung „Nur groß/UI“ bedeutet nicht automatisch, dass jede Benutzeroberflächen-Komponente geeignet ist. Zusätzlich müssen die angrenzende Fläche, der Zustand des Elements und seine Funktion geprüft werden.
Ergebnis der gezielten Kombination
Vorschau der gewählten Kombination
Kostenlos beraten lassen
Kontrastverhältnis:
Der ausgewählte weiße Text auf der Primärfarbe erreicht 6,71:1.
- WCAG AA für normalen Text: bestanden
- WCAG AAA für normalen Text: nicht bestanden
- WCAG AA für großen Text: bestanden
- Orientierungswert für relevante UI-Elemente: bestanden
Diese Kombination eignet sich für normalen Buttontext. Für sehr hohe Kontrastanforderungen der Stufe AAA wäre ein dunklerer Hintergrund erforderlich.
Helligkeitsabstände der Markenfarben
Große Helligkeitsunterschiede erleichtern die Bildung kontrastreicher Farbkombinationen. Farben mit ähnlicher relativer Helligkeit können trotz unterschiedlicher Farbtöne schwer voneinander zu unterscheiden sein.
Empfohlene Rollen für die Beispielpalette
Primärfarbe
- Überschriften und Links auf hellem Hintergrund
- CTA-Fläche mit weißer Beschriftung
- Deutliche Rahmen und aktive Bedienelemente
Sekundärfarbe
- Dekorative Akzente und größere Textelemente
- Flächen, deren Beschriftung separat geprüft wird
- Nicht für kleinen weißen Fließ- oder Buttontext empfohlen
Akzentfarbe
- Große Überschriften und grafische Hervorhebungen
- Rahmen, Symbole und UI-Komponenten auf Weiß
- Für kleinen weißen Buttontext leicht abdunkeln
Heller Hintergrund
- Seiten-, Karten- und Formularhintergrund
- Text und Symbole auf dunklen Flächen
- Buttontext auf der Primärfarbe
Dunkler Hintergrund
- Dunkle Webseitenabschnitte und Newsletter-Kopfbereiche
- Sehr kontrastreiche Kombination mit Weiß
- Nicht zusammen mit der ähnlich dunklen Textfarbe verwenden
Textfarbe
- Fließtext und kleinere Informationen auf Weiß
- Überschriften auf sehr hellen Flächen
- Nicht als Text auf dem dunklen Hintergrund einsetzen
Live-Marketingvorschauen mit Ihren Markenfarben
Die Vorschauen zeigen typische Einsatzsituationen. Sie ersetzen keinen vollständigen Design- oder Usability-Test, machen problematische Kombinationen aber unmittelbar sichtbar.
Marketing, das messbar wirkt
Mehr Aufmerksamkeit für Ihr Unternehmen
Entwickeln Sie eine klare Werbebotschaft und erreichen Sie Ihre Zielgruppe mit einer überzeugenden Kampagne.
Kostenlos beraten lassenAnzeige
Mehr Aufmerksamkeit für Ihr Unternehmen
Entwickeln Sie eine klare Werbebotschaft und erreichen Sie Ihre Zielgruppe mit einer überzeugenden Kampagne.
Kostenlos beraten lassenStarter-Paket
ab 39 €
- Klare Werbebotschaft
- Strukturierter Kampagnenstart
- Nachvollziehbare Ergebnisse
Frühlingsaktion
Mehr Aufmerksamkeit für Ihr Unternehmen
Entwickeln Sie eine klare Werbebotschaft und erreichen Sie Ihre Zielgruppe mit einer überzeugenden Kampagne.
ab 39 €
Ergänzende Graustufen- und Helligkeitskontrolle
Die Graustufenansicht zeigt, ob sich Flächen und Bedienelemente auch durch ihre Helligkeit voneinander abheben. Sie ist eine ergänzende Orientierung und keine medizinisch genaue Simulation bestimmter Formen von Farbfehlsichtigkeit.
CTA-Button-Check der Beispielpalette
Bei einem CTA müssen mindestens zwei Beziehungen betrachtet werden: der Kontrast der Buttonbeschriftung zur Buttonfläche und gegebenenfalls die Erkennbarkeit der Buttonfläche gegenüber ihrer Umgebung.
Primärfarbener CTA auf Weiß
Angebot anfordern- Weißer Text auf Primärfarbe
- – AA für normalen Text
- Primärfarbe gegenüber Weiß
- – deutlich erkennbare Fläche
Diese Beispielkombination eignet sich für einen normalen CTA-Button.
Akzentfarbener CTA auf Weiß
Angebot anfordern- Weißer Text auf Akzentfarbe
- – knapp unter AA für normalen Text
- Akzentfarbe gegenüber Weiß
- – für relevante UI-Grenzen ausreichend
Die Buttonfläche ist erkennbar, der kleine weiße Buttontext sollte jedoch durch eine leicht dunklere Akzentfarbe verbessert werden.
Sekundärfarbener CTA auf Weiß
Angebot anfordern- Weißer Text auf Sekundärfarbe
- – nicht ausreichend für normalen Text
- Sekundärfarbe gegenüber Weiß
- – als erkennbare Fläche grundsätzlich nutzbar
Verwenden Sie die Farbe bevorzugt dekorativ, für großen Text oder in einer abgedunkelten Variante.
Vorgeschlagene kontrastreichere Farbvarianten
Das Tool kann eine Farbe schrittweise aufhellen oder abdunkeln, bis der gewünschte Mindestkontrast erreicht wird. Farbton und Sättigung sollen dabei möglichst nah an der Ausgangsfarbe bleiben.
Sekundärfarbe auf Weiß
Original:
Kontrast:
Vorschlag:
Kontrast:
Die leicht dunklere Variante erreicht den AA-Mindestwert für normalen weißen Text.
Akzentfarbe auf Weiß
Original:
Kontrast:
Vorschlag:
Kontrast:
Bereits eine geringe Abdunklung kann die Kombination über den AA-Grenzwert bringen.
Primärfarbe auf dunklem Hintergrund
Original:
Kontrast:
Vorschlag:
Kontrast:
Auf einem dunklen Hintergrund muss die Primärfarbe deutlich aufgehellt werden, um normalen Text ausreichend abzuheben.
Beste und kritische Kombinationen
Besonders kontrastreiche Farbpaare
- Dunkler Hintergrund und heller Hintergrund: 17,74:1
- Textfarbe und heller Hintergrund: 14,68:1
- Primärfarbe und heller Hintergrund: 6,71:1
- Akzentfarbe und heller Hintergrund: 4,41:1, nur für großen Text oder geeignete UI-Anwendungen
Besonders kritische Farbpaare
- Sekundärfarbe und Akzentfarbe: 1,09:1
- Dunkler Hintergrund und Textfarbe: 1,21:1
- Primärfarbe und Akzentfarbe: 1,52:1
- Primärfarbe und Sekundärfarbe: 1,65:1
Kontrastwerte richtig interpretieren
Normaler Text
Für normalen Fließtext, Formularbeschriftungen, Navigation, Buttontexte und kleinere Hinweise ist ein Kontrast von mindestens 4,5:1 die zentrale Orientierung für WCAG AA.
Großer Text
Große oder ausreichend fett gesetzte Überschriften können bereits ab 3:1 den AA-Mindestwert erreichen. Die Textgröße muss dabei tatsächlich groß genug sein.
CTA-Buttons
Der Text auf dem Button ist nach den Textkriterien zu prüfen. Die Erkennbarkeit der Buttonfläche oder ihres Rahmens kann zusätzlich unter die Anforderungen an nicht textliche Kontraste fallen.
Logos und dekorative Elemente
Für rein dekorative Flächen und bestimmte Bestandteile von Logos gelten die Text-Kontrastanforderungen nicht in gleicher Weise. Sobald Farbe jedoch Informationen oder Bedienbarkeit vermittelt, reicht eine rein dekorative Bewertung nicht aus.
Links im Fließtext
Ein Link sollte nicht nur durch seine Farbe erkennbar sein. Eine Unterstreichung oder ein anderes zusätzliches Merkmal verbessert die Unterscheidbarkeit und Bedienbarkeit.
Keine vollständige WCAG-Prüfung
Der Farbkontrast ist nur ein Teil der Barrierefreiheit. Auch Tastaturbedienung, Fokusmarkierungen, Alternativtexte, Formulare, Fehlermeldungen, Struktur und verständliche Inhalte müssen separat geprüft werden.
Beispielauswertung einer Markenpalette
Ein Unternehmen verwendet Dunkelblau als Primärfarbe, Magenta als Sekundärfarbe, Blau als Akzentfarbe, Weiß als hellen Hintergrund und zwei dunkle Farbtöne für Text und dunkle Flächen.
Die Analyse zeigt, dass Dunkelblau auf Weiß einen guten Kontrast für normalen Text erreicht. Weiß auf Dunkelblau eignet sich ebenfalls für normale Texte und CTA-Beschriftungen. Magenta und das hellere Blau liegen mit weißem Text dagegen knapp unter dem AA-Mindestwert für normalen Text. Sie können weiterhin als dekorative Akzente oder für große Schrift verwendet werden. Für kleinere Buttontexte empfiehlt sich eine leicht dunklere Variante.
Gleichzeitig wird sichtbar, dass die beiden dunklen Farbtöne untereinander kaum unterscheidbar sind. Die normale Textfarbe sollte daher nicht auf dem dunklen Hintergrund eingesetzt werden. Weiß erzeugt dort den wesentlich besseren Kontrast.
Häufige Fragen zum Markenfarben-Kontrast-Checker
Was ist ein Farbkontrastverhältnis?
Das Farbkontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei Farben. Der Wert reicht von 1:1 bei identischen Helligkeiten bis zu 21:1 bei Schwarz und Weiß.
Was bedeuten WCAG AA und AAA?
AA beschreibt das übliche Konformitätsniveau vieler Barrierefreiheitsanforderungen. AAA enthält weitergehende Anforderungen. Für normalen Text gelten beim Kontrast grundsätzlich 4,5:1 für AA und 7:1 für AAA.
Reicht ein Kontrast von 3:1 für einen CTA-Button?
Nicht automatisch. Ein Wert von 3:1 kann für große Texte oder relevante grafische Grenzen ausreichen. Kleiner Buttontext benötigt für AA grundsätzlich mindestens 4,5:1 zur Buttonfläche.
Warum werden Buttontext und Buttonfläche getrennt geprüft?
Die Beschriftung muss gegenüber der Buttonfläche lesbar sein. Zusätzlich kann die Buttonfläche selbst gegenüber dem umgebenden Hintergrund erkennbar sein müssen. Beide Beziehungen können unterschiedliche Kontrastwerte haben.
Sind Logos ebenfalls an die normalen Textwerte gebunden?
Text, der Bestandteil eines Logos oder Markennamens ist, ist von der Mindestkontrastanforderung für normalen Text ausgenommen. Für Navigation, Buttons, Überschriften und andere funktionale Inhalte gilt diese Ausnahme nicht.
Ist die Graustufenansicht eine Simulation von Farbenblindheit?
Nein. Sie zeigt lediglich Helligkeitsunterschiede ohne Farbinformationen. Sie ist eine hilfreiche Zusatzkontrolle, bildet aber keine bestimmte Sehbeeinträchtigung medizinisch genau ab.
Werden meine Markenfarben gespeichert oder übertragen?
Nein. Das Tool ist für eine vollständig lokale Verarbeitung im Browser vorgesehen. Es benötigt weder einen Datei-Upload noch externe Bibliotheken, externe APIs oder eine Übertragung der eingegebenen Farbwerte.
Ersetzt das Tool eine vollständige Barrierefreiheitsprüfung?
Nein. Der Checker unterstützt die Prüfung von Farbkontrasten und visuellen Rollen. Eine vollständige Prüfung muss zusätzlich Struktur, Tastaturbedienung, Fokus, Formulare, Alternativtexte, Sprache und weitere WCAG-Kriterien berücksichtigen.
Datenschutz und lokale Verarbeitung
Für die Nutzung sind keine Registrierung, kein Benutzerkonto und kein Datei-Upload erforderlich. Die eingegebenen Farbcodes und Beispieltexte werden ausschließlich zur Darstellung und Berechnung innerhalb des Browsers verwendet.
Das Tool ist ohne externe Bibliotheken, Analyse-Schnittstellen oder externe Datenabfragen konzipiert. Beim Zurücksetzen oder Verlassen der Seite werden die eingegebenen Werte nicht durch das Tool dauerhaft gespeichert.
Grundlagen der Kontrastbewertung
Die Bewertung orientiert sich an den Web Content Accessibility Guidelines 2.2 des World Wide Web Consortiums. Maßgeblich sind insbesondere die Kriterien zu Textkontrast und nicht textlichem Kontrast.
Die Ergebnisse dienen als technische und gestalterische Orientierung. Sie stellen keine Zertifizierung und keine verbindliche rechtliche Prüfung der vollständigen Barrierefreiheit einer Webseite oder Werbemaßnahme dar.
Mehr Tools & Rechner:
- Werbeplan-Ersteller & Kampagnenplaner
- Werbebrief & Postwurfsendungen Erfolgs-Prognose Rechner
- ROI-Rechner Tool
- AD-Spend Rechner
- Marketingbudget-Rechner
- E-Mail-Marketing-ROI-Kalkulator
- Newsletter Vorlagen-Generator
- Kunden-Persona Generator
- Vermarktung QR-Code-Tool
- Kundenorientierung-Check für Unternehmen
- Rabattaktions- & Deckungsbeitrag-Rechner
- Messe-, Promotion- & Aktions-ROI-Rechner
- Customer-Journey-Map-Generator & Touchpoint-Planer
- Preiselastizität Rechner: Preisänderung, Absatz & Gewinn simulieren
Übersicht:
Fachartikel
Verzeichnis
Über uns
Kooperationspartner zu Werbeagenturen, Medienagenturen und Marketing-Profis. Verleger von Fachpresse in Print und Online verschiedener Branchen und Themengebiete. Gründer & Unternehmer diverser Firmen inkl. Leitung des Vertriebs und externer Tätigkeiten als Head of Marketing. Ferya Gülcan, Founder Internetmedien-Agentur.
- Corporate Fashion zur Stärkung der Markenidentität - 7. August 2025
- Wann und wie bieten Unternehmen echten Service? 3. Teil - 5. Juli 2025
- Wann und wie bieten Unternehmen echten Service? 2. Teil - 7. Juni 2025