Kostenloses Tool
Kontrastmatrix für Ihre Palette
Alle Farben auf einmal gegeneinander gerechnet: Sie sehen in einer Tabelle, welche Kombination Fließtext trägt, welche nur für große Schrift reicht und welche gar nicht geht.
Die Kontrastmatrix
Läuft auf Ihrem Gerät. Die Formel für den Kontrast steht in der WCAG – dafür braucht es keinen Dienst. Ihre Farben gehen nirgendwohin.
Ihre Farben
Zwei bis zehn Farben. Namen sind freiwillig.
Alle Kombinationen
Zeile = Schriftfarbe, Spalte = Hintergrund. In jeder Zelle steht das Kontrastverhältnis und die höchste Stufe, die es erfüllt.
- AAA ab 7,0 – Fließtext auf der strengsten Stufe
- AA ab 4,5 – Fließtext, die übliche Anforderung
- groß ab 3,0 – nur große Schrift, Symbole, Rahmen
- – unter 3,0 – für nichts Bedeutungstragendes geeignet
Zum Hintergrund
Warum eine Palette mehr ist als eine Liste
Farben werden meist einzeln ausgesucht: ein Blau fürs Logo, ein Grau für Fließtext, ein Grün für Erfolgsmeldungen. Die Frage, welche davon miteinander dürfen, stellt sich erst, wenn jemand eine Meldung baut oder einen Knopf setzt – also spät, mitten in der Umsetzung, wenn das Ändern wehtut.
Bei sechs Farben gibt es fünfzehn Paare, bei zehn schon fünfundvierzig. Das prüft niemand von Hand. Deshalb diese Tabelle: einmal am Anfang durchrechnen und wissen, welche Kombinationen zur Verfügung stehen. Erfahrungsgemäß sind das weniger, als man denkt – und fast immer fehlt ein dunklerer Ton der Hauptfarbe für Schrift.
Wie Sie die Tabelle lesen
Die Zeile ist die Schriftfarbe, die Spalte der Hintergrund. Die Tabelle ist an der Diagonalen gespiegelt – Kontrast kennt keine Richtung, Schwarz auf Weiß ist derselbe Wert wie Weiß auf Schwarz. Trotzdem stehen beide Hälften da, weil man beim Suchen selten am richtigen Ende anfängt.
Die Stufe groß bedeutet: ab 24 Pixeln, oder ab 18,66 Pixeln bei fetter Schrift. Sie gilt außerdem für alles, was Bedeutung trägt, ohne Text zu sein – Symbole, Rahmen von Eingabefeldern, Diagrammlinien, Fokusmarkierungen. Das ist ein eigenes Kriterium der WCAG, 1.4.11.
Was die Tabelle nicht beantwortet
Ob eine Kombination gut aussieht. Kontrast ist eine Untergrenze, kein Gestaltungsziel: Schwarz auf Weiß erreicht 21 zu 1 und ist für lange Texte trotzdem anstrengender als ein sehr dunkles Grau. Und sie sagt nichts über Farbfehlsichtigkeit – zwei Töne können den Kontrasttest bestehen und für jemanden mit Rot-Grün-Schwäche trotzdem ununterscheidbar sein. Deshalb gilt weiterhin: Information nie allein über Farbe.
Für ein einzelnes Paar mit Vorschau gibt es den Kontrast-Prüfer. Für die ganze Website nach WCAG 2.2 – geprüft von Hand und mit Screenreader – unser Barrierefreiheits-Audit.