Kontrast prüfen: Logo und Schrift auf Farbe
Markenfarben sind oft dunkel, Hintergründe auch. Hier siehst du in einer Sekunde, ob Schrift und Logo auf einer Fläche tragen.
Läuft im Browser · kostenlos · nichts wird hochgeladen
Schritt 1 von 3
Was möchtest du prüfen?
Beides misst den Kontrast zwischen zwei Farben – beim Logo siehst du es zusätzlich auf der Fläche.
Welcher Kontrast wofür reicht
| Einsatz | Norm | Mindestverhältnis | Gilt für |
|---|---|---|---|
| Fließtext | WCAG AA | 4,5 : 1 | normale Schrift bis etwa 18 px |
| Große Schrift, Logo, Symbole | WCAG AA | 3 : 1 | ab 24 px bzw. 19 px fett, Grafiken und Bedienelemente |
| Fließtext, erhöhte Anforderung | WCAG AAA | 7 : 1 | lange Texte, barrierearme Angebote |
Aus der Praxis
Ein Kontrastverhältnis von 4,5 : 1 für Fließtext und 3 : 1 für große Schrift, Logos und Symbole – das sind die Werte der WCAG, und sie sind kein Luxus. Unter 3 : 1 verschwindet ein Logo auf dem Smartphone im Sonnenlicht, unter 4,5 : 1 strengt jeder Absatz an.
Warum wir Farben nicht ersetzen, sondern aufhellen
Auf dieser Website nimmt jede Case Study die Farbe des Projekts an. Navy auf Navy kam dabei vor. Statt die Markenfarbe zu tauschen, hellt die Website sie im selben Farbton auf, bis der Kontrast reicht – die Marke bleibt erkennbar, der Text lesbar. Genau das macht der Vorschlag hier: gleiche Farbe, mehr Helligkeit, bis 3 : 1 erreicht ist.
Logos auf Flächen
Ein Logo wirkt auf Weiß anders als auf der Markenfarbe. Lade dein Logo als SVG oder PNG, färbe es in der Vordergrundfarbe ein und sieh, ob es auf der Fläche trägt. Für dunkle Flächen braucht fast jede Marke eine helle Logo-Variante – das ist kein Fehler, sondern Teil eines sauberen Markensystems.
Was die Zahlen bedeuten
Das Verhältnis vergleicht die Leuchtdichte beider Farben: 1 : 1 ist gleich hell, 21 : 1 ist Schwarz auf Weiß. AA ist der übliche Standard für Websites, AAA die strengere Stufe für lange Texte und barrierearme Angebote.
Häufige Fragen
- Welcher Kontrast ist für Text auf einer Website vorgeschrieben?
- Nach WCAG 2 (Stufe AA) braucht Fließtext ein Kontrastverhältnis von mindestens 4,5 : 1 zum Hintergrund, große Schrift ab 24 Pixel bzw. 19 Pixel fett mindestens 3 : 1. Dieselben 3 : 1 gelten für Logos, Symbole und Bedienelemente. Die strengere Stufe AAA verlangt 7 : 1 für Fließtext.
- Was tun, wenn die Markenfarbe zu wenig Kontrast hat?
- Wenn eine Markenfarbe auf einer Fläche nicht trägt, hilft meist eine hellere oder dunklere Variante im selben Farbton statt einer anderen Farbe – die Marke bleibt erkennbar. Dieses Werkzeug schlägt genau diese Variante vor. Für dunkle Flächen gehört außerdem eine helle Logo-Version ins Markensystem.
- Wie wird das Kontrastverhältnis berechnet?
- Das Kontrastverhältnis ergibt sich aus der relativen Leuchtdichte beider Farben nach der Formel der WCAG: (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die hellere Farbe ist. Das Ergebnis liegt zwischen 1 : 1 (gleich hell) und 21 : 1 (Schwarz auf Weiß).
Du willst ein Markensystem, das auf jeder Fläche trägt? So läuft Artwork & Key Visual bei der REALDOT Werbeagentur.