Wofür braucht man Kontrast Checker?

Tools zum Testen von FarbKontrasten

• Kontrast-Checker als Progamm für den PC

  Der »Color Contrast Analyser« ist eine Anwendung 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.

  Color Contrast Analyser downloaden
  

• Contrast-Grid

  Du 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.

  Zur Website von Contrast-Grid
  

• Kontrast-Checker von WebAIM im Browser

  Auf der Webseite von WebAIM findest du einen Kontrast-Checker.  Dort kannst du einfach die Hex-Werte deiner Vorder- und Hintergrundfarben angeben und der Kontrast wird berechnet.

  Zum Kontast-Checker von WebAIM
  

• Figma-Kontrast-Checker

  Für alle Designer*innen: Figma hat mittlerweile einen Kontrast-Checker integriert. Beim Auswahl der Farben werden direkt die Kontrastverhältnisse angezeigt!

  Bei Figma anmelden
  

• Figma-Plug-In: Contrast

  Was viele Kontrast-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. 

  Zum Contast Plug-in
  

• sitebrunch Accessibility

  Du willst die Kontraste auf deiner Website automatisiert testen? Unser sitebrunch Accessibility-Tool scannt deine Website automatisch und zeigt dir alle Kontrastprobleme auf! Mach dir einen kostenlosen Account und starte los!

  Zum sitebrunch Accessibility-Center
  

Häufige Fragen zu Kontrasten

Welche Kontast-Anforderungen gelten für Texte?

Für Texte gelten nach der WCAG Level AA folgende Anforderungen: 

• 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

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. 

Welche Kontast-Anforderungen gelten für Bedienelemente?

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 teste ich Kontraste am einfachsten?

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 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.