Kontrast prüfen. Und gleich die passende Farbe finden.
Geben Sie Text- und Hintergrundfarbe ein. Sie sehen sofort, ob die Kombination die WCAG erfüllt. Wenn nicht, schlagen wir den nächstliegenden Farbton vor, der besteht: gleicher Farbton, nur heller oder dunkler.
Ihre Eingaben bleiben in Ihrem Browser. Wir speichern und übertragen nichts.
Kontrastverhältnis 7,01:1
- Text AA 1.4.3mindestens 4,50:1 besteht
- Große Schrift AA 1.4.3mindestens 3,00:1 besteht
- Bedienelemente und Grafiken 1.4.11mindestens 3,00:1 besteht
- Text AAA 1.4.6mindestens 7,00:1 besteht
- Große Schrift AAA 1.4.6mindestens 4,50:1 besteht
Vorschläge, die bestehen
Gleicher Farbton, nur die Helligkeit geändert. Klicken Sie auf einen Vorschlag, um ihn zu übernehmen.
- für Text (4,5:1)
#5559637,01:1besteht - für große Schrift und Bedienelemente (3:1)
#5559637,01:1besteht - für AAA (7:1)
#5559637,01:1besteht
Ganze Palette prüfen
Fügen Sie Ihre Markenfarben ein, durch Komma oder Zeilenumbruch getrennt (höchstens 12). Die Matrix zeigt, welche Paare Sie für Text verwenden dürfen.
#16181d | #ffffff | #c41e2a | #ffce00 | #8a6100 | #f4f1ea | |
|---|---|---|---|---|---|---|
#16181d | 17,75:1 AA | 3,01:1 AA+ | 11,90:1 AA | 3,20:1 AA+ | 15,74:1 AA | |
#ffffff | 17,75:1 AA | 5,88:1 AA | 1,49:1 – | 5,54:1 AA | 1,12:1 – | |
#c41e2a | 3,01:1 AA+ | 5,88:1 AA | 3,94:1 AA+ | 1,06:1 – | 5,22:1 AA | |
#ffce00 | 11,90:1 AA | 1,49:1 – | 3,94:1 AA+ | 3,71:1 AA+ | 1,32:1 – | |
#8a6100 | 3,20:1 AA+ | 5,54:1 AA | 1,06:1 – | 3,71:1 AA+ | 4,91:1 AA | |
#f4f1ea | 15,74:1 AA | 1,12:1 – | 5,22:1 AA | 1,32:1 – | 4,91:1 AA |
AA = für Text geeignet (ab 4,5:1) · AA+ = nur für große Schrift und Bedienelemente (ab 3:1) · – = nicht geeignet
Gut zu wissen
Große Schrift heißt nach WCAG: ab 24 px oder ab 18,66 px fett (18 bzw. 14 Punkt). Bedienelemente und Grafiken (Kriterium 1.4.11 Nicht-Text-Kontrast) brauchen 3:1 zur Umgebung, zum Beispiel Rahmen von Eingabefeldern und Symbole.
Wir runden das Verhältnis nie auf. 4,49:1 ist nicht 4,5:1.
Weiter mit
Bin ich betroffen?
Fünf Fragen zum Barrierefreiheitsstärkungsgesetz. Am Ende steht eine klare Einschätzung mit nächsten Schritten, zum Ausdrucken oder als PDF.
Erklärung zur Barrierefreiheit erstellen
Felder ausfüllen, Vorschau ansehen, als HTML oder Text kopieren. Aufgebaut nach Anlage 3 BFSG und der EU-Mustererklärung.
Tastatur-Test
Ohne Maus durch die Seite: Fokus sichtbar, Reihenfolge logisch, keine Falle. Mit Übungsfeld, Fokus-Spur und Fünf-Minuten-Anleitung.
Checklisten für Ihr Team
Je eine Liste für Design, Entwicklung, Redaktion und Einkauf. Fortschritt bleibt in Ihrem Browser gespeichert, druckbar.