1. Sie sind hier:
  2. Home
    3. |
  3. Know How
    4. |
  4. Farbkontraste

Farbkontraste der Website prüfen

Letzte Änderung:

Um was geht's?

Der Kontrast einer Website (vor allem zwischen Text- und Hintergrundfarben) spielt für die Barrierefreiheit eine sehr große Rolle. Die Web Content Accessibility Guidelines (WCAG) 2.1, die aktuell als weltweiter Standard für barrierearme Website angesehen werden, machen hierzu folgende Vorgaben:

  • bei einer Textgröße von bis zu 18 Pixeln muss der Kontrastwert bei 4,5:1 (für Level AA) bzw. 7:1 (für Level AAA) liegen
  • bei einer Textgröße von mehr als 18 Pixeln muss der Kontrastwert bei 3:1 (für Level AA) bzw. 4,5:1 (für Level AAA) liegen

Die WCAG definiert eigene Berechnungsmethoden zum Kontrastverhältnis.

Wie ermittelt man den Farbkontrast zwischen Schrift- und Hintergrundfarbe?

Farbkontrast mit den Chrome Entwicklertools
Farbkontrast ermitteln

Um auf einfache Weise das Konrastverhältnis von Schrift- und Hintergrundsarbe auf einer Website zu überprüfen, gehen Sie wie folgt vor:

  • markieren Sie im Chrome Browser einen beliebigen Text
  • wählen Sie nun im Kontextmenü den Punkt "untersuchen"
  • klicken Sie auf die angezeigte Farbbox im Tab "Style"
  • hier wird nun das Kontrastverhälnis angezeigt und eine Auswertung ob Level AA oder sogar AAA erreicht wird
  • In diesem Fall ist es nicht barrierefrei 
  • suchen Sie nach einem geeigneten Farbwert und ändern Sie diesen in Ihrer TYPO3-Installation

Den Farbwert können Sie in der Regel in einer (zentralen) CSS-Datei ändern. Detaillierte TYPOSCRIPT-Kenntnisse sind dafür nicht erforderlich

 

Video: Farbkontrast über die Chrome Entwicklertools ermitteln

So ermitteln Sie den Kontrast von Schrift- und Hintergrundfarbe mit den Chrome Entwicklertools