Kontrast-Checker: Prüfe Farben auf Barrierefreiheit
Verschiedene hilfreiche Werkzeuge, um die Farbkontraste von Designs und Websites auf Barrierefreiheit zu prüfen.
Wofür braucht man FarbKontrast-Checker?
Nach den Web Content Accessibility Guidelines müssen Texte und Grafiken von Webseiten gewisse Farbkontraste einhalten, um barrierefrei (für alle Menschen lesbar) zu sein.
Für Texte gelten nach der WCAG Level AA folgende Kontrast-Anforderungen:
- Texte, die kleiner als 24 Pixel sind, müssen einen Kontrast von 4,5:1 einhalten
- Texte, die 24 Pixel oder größer sind, brauchen einen Kontrast von 3:1
- Texte, die 18,5 Pixel oder größer und fett sind, brauchen ebenfalls einen Kontrast von 3:1
Mehr zu den Anforderungen an die Farbkontraste findest du im WCAG-Kriterium 1.4.3 Kontraste von Texten.
Jetzt stellt sich die Frage: Woher solltest du wissen, dass deine Texte diese Farbkontraste auch erfüllen?
Dafür gibt es die Kontrastrechner, die dir helfen, während des Designprozesses und auf Websites, die Kontraste schnell und einfach zu prüfen.
Tools zum Prüfen von FarbKontrasten
Kontrast-Checker als Progamm für den PC
Color Contrast Analyser downloadenDer »Color Contrast Analyser« ist eine Kontrast-Checker-App für Windows und macOS. Besonders praktisch ist, dass sich das Fenster des Tools über jede andere Anwendung legen lässt. Es spielt keine Rolle, ob Sie Farben im Browser, in Figma oder in Canva testen möchten, das Arbeiten bleibt flexibel.
Contrast-Grid
Zur Website von Contrast-GridDu hast viele Farben und weißt nicht, ob sie vom Kontrast zusammenpassen? Dann hilft dir Contrast-Grid. Mit diesem Tool kannst du dir eine Matrix deiner Farben erstellen und prüfen und dokumentieren, welche miteinander kombinierbar sind.
Kontrast-Checker von WebAIM im Browser
Zum Kontast-Checker von WebAIMAuf der Webseite von WebAIM findest du einen Farbkontrast-Checker. Dort kannst du einfach die Hex-Werte deiner Vorder- und Hintergrundfarben angeben und der Kontrast wird berechnet.
Barrierefreie Farbkontraste in Figma
Bei Figma anmeldenFür alle Designer*innen: Figma hat mittlerweile einen Kontrast-Checker integriert. Bei der Auswahl der Farben werden direkt die Kontrastverhältnisse angezeigt!
Figma-Plug-In: Contrast
Zum Contast Plug-inWas viele Farbkontrast-Checker nicht können: Gegen mehrfarbige Hintergründe testen. Das passiert zum Beispiel, wenn Texte auf Bildern liegen. Hier hilft das Plug-in »Contrast« für Figma. Dieses Plug-in testet Kontraste gegen 32 Pixel im Hintergrund.
sitebrunch Accessibility
Zum sitebrunch Accessibility-CenterDu willst die Kontraste auf deiner Website automatisiert testen? Unser sitebrunch-Accessibility-Tool scannt deine Website automatisch und zeigt dir alle Probleme mit Farbkontrasten auf! Mach dir einen kostenlosen Account und starte los!
FAQ: barrierefreie Farbkontraste
- Texe die kleiner als 24 Pixel sind müssen einen Kontrast von 4,5:1 einhalten
- Texte, die 24 Pixel oder größer sind, brauchen einen Kontrast von 3:1
- Texte, die 18,5 Pixel oder größer und fett sind, brauchen ebenfalls einen Kontrast von 3:1
Wann sind die Farbkontraste von Texten barrierefrei?
Für Texte gelten nach der WCAG Level AA folgende Anforderungen:
Muss ich meine Markenfarben anpassen?
Wenn deine Markenfarben nicht die Kontrastanforderungen erfüllen, solltest du sie anpassen. Es ist keine Pflicht das zu tun, da es auch möglich ist, einen Kontrast-Umschalter einzubauen, um die Kontraste zu erhöhen.
Damit wird das Problem aber nur teilweise behoben, da es dann nur für die Website und nicht für deine ganze Außenkommunikation und zum Beispiel PDFs funktioniert.
Müssen Bedienelemente auch Farbkontraste einhalten um barrierefrei zu sein?
Alle Bedienelemente müssen einen Kontrast von 3:1 zum Hintergrund einhalten.
Das gilt zum Beispiel für klickbare Icons oder Eingabefelder.
Mehr dazu im WCAG-Kriterium 1.4.11 Nicht-Text-Kontrast.
Wie prüfe ich schnell udn eifnach Farbkonstraste auf Barrierefreiheit?
Die Kontraste nach der WCAG testest du am einfachsten mit einem automatisierten Scan, den du über deine Website laufen lässt. Diesen kannst du zum Beispiel in der kostenlosen Version von unserem sitebrunch Accessibility Tool durchführen.
Welche Farben passen von den Kontasten her gut zusammen?
Wenn du herausfinden willst, ob und wie Farben gut zusammenpassen, ist das beste Tool dafür Contrast-Grid. Dieses Tool kombiniert alle deine Farben in einer Matrix und zeigt dir, welche die WCAG-Anforderungen bestehen und welche durchfallen. Das kann auch sehr bei der Dokumentation von deinem Desing helfen.
Wie funktioniert die Kontrastberechnung?
Das Kontrastverhältnis wird nach der WCAG so berechnet:
(L1 + 0.05) / (L2 + 0.05)
Dabei ist L1 die relative Leuchtdichte der helleren Farbe, und L2 die relative Leuchtdichte der dunkleren Farbe.
Mehr dazu findest du auf der Seite der WCAG zum Kontrastverhältnis.
Du willst die Tools in Aktion sehen?
In unseren YouTube-Videos und YouTube-Shorts stellen wir immer wieder verschiedene Tools vor und geben praktische Anleitungen zur Umsetzung digitaler Barrierefreiheit.
