Sign up to save your podcasts
Or
Share Farben und Kontraste in der Web-Barrierefreiheit
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Farben und Kontraste in der Web-Barrierefreiheit
Farben und Kontraste sind zwei entscheidende Elemente im Design von Inhalten und User Interfaces. Schauen wir uns einmal an, worauf man dabei in der Barrierefreiheit achten sollte.
Farben und Kontraste sind besonders wichtig für zwei Gruppen:
Sehbehinderte können schlechte Kontraste nicht erkennen und haben Probleme mit der Unterscheidung von Farben.
Farbenblinde können Farben nicht unterscheiden. Häufig sind das rot und grün, selten gelb und blau, ganz selten gar keine Farben.
Die Mindest-Kontraste müssen erfüllt werden für alle Elemente außer:
Schmuck-Elemente, dazu zählen Logos und Banner
Inaktive Elemente einer Benutzer-Oberfläche
Für alle anderen Elemente, insbesondere Text, Bedien-Elemente, Infografiken und auch Platzhalter-text in Formularen oder Text, der mit Maus oder Tastatur fokussiert wird, gilt, dass die Mindest-Kontraste erfüllt sein müssen.
Diese betragen nach der WCAG 2.1 AA 4,5:1 für normalen Text oder 3:1 für Bedien-Elemente und großen Text. Für die WCAG 2.1 AAA werden höhere Kontraste vorgeschrieben. Diese wird aber in der Regel nicht für einen gesamten Web-Auftritt angestrebt.
Farben dürfen nicht als einziges Merkmal zur Kommunikation eingesetzt werden. Wird zum Beispiel ein aktives Element durch Farbe kenntlich gemacht, soll ein weiteres Element verwendet werden, das nicht Farbe bzw. ein Helligkeits-Unterschied ist. Prüfen Sie, ob etwas nur über Farbe oder Farbänderung kommuniziert wird. Prüfen Sie insbesondere Links, aktivierbare Elemente und Informationsgrafiken.
Beim Kontrast gehen Sie ähnlich vor. Prüfen Sie zunächst, ob die Kontraste offensichtlich ausreichend sind. Sind Sie bei einem Bereich unsicher, verwenden Sie die unten genannten Prüftools. Vergessen Sie bitte nicht, auch Elemente mit Maus- oder Tastatur-Fokus zu prüfen. Auch der TastaturFokus selbst sollte ausreichend Kontrast bieten.
Anforderungen
Success Criterion 1.4.1 Use of Color
Success Criterion 1.4.3 Contrast (Minimum
Success Criterion 1.4.11 Non-Text Contrast
Testen
Für das Prüfen von Farben ist eine Kombination aus qualitativer Analyse und einem Tool sinnvoll, welche Inhalte in Graustufen darstellen kann.
Für die Analyse von Kontrasten gibt es verschiedene Werkzeuge. Zum einen gibt es automatische Prüftools wie etwa WebAIM WAVE.
Ein nützliches Werkzeug ist auch der Colour Contrast Checker. Das ist ein kostenloses Desktop-Programm für Mac und PC.
Daneben gibt es viele Tools für den Browser, mit welchem Sie Farbwerte ermitteln können. Diese können Sie dann über einen Online-Kontrast-Rechner überprüfen.
View all episodes
By netz-barrierefrei.deFarben und Kontraste sind zwei entscheidende Elemente im Design von Inhalten und User Interfaces. Schauen wir uns einmal an, worauf man dabei in der Barrierefreiheit achten sollte.
Farben und Kontraste sind besonders wichtig für zwei Gruppen:
Sehbehinderte können schlechte Kontraste nicht erkennen und haben Probleme mit der Unterscheidung von Farben.
Farbenblinde können Farben nicht unterscheiden. Häufig sind das rot und grün, selten gelb und blau, ganz selten gar keine Farben.
Die Mindest-Kontraste müssen erfüllt werden für alle Elemente außer:
Schmuck-Elemente, dazu zählen Logos und Banner
Inaktive Elemente einer Benutzer-Oberfläche
Für alle anderen Elemente, insbesondere Text, Bedien-Elemente, Infografiken und auch Platzhalter-text in Formularen oder Text, der mit Maus oder Tastatur fokussiert wird, gilt, dass die Mindest-Kontraste erfüllt sein müssen.
Diese betragen nach der WCAG 2.1 AA 4,5:1 für normalen Text oder 3:1 für Bedien-Elemente und großen Text. Für die WCAG 2.1 AAA werden höhere Kontraste vorgeschrieben. Diese wird aber in der Regel nicht für einen gesamten Web-Auftritt angestrebt.
Farben dürfen nicht als einziges Merkmal zur Kommunikation eingesetzt werden. Wird zum Beispiel ein aktives Element durch Farbe kenntlich gemacht, soll ein weiteres Element verwendet werden, das nicht Farbe bzw. ein Helligkeits-Unterschied ist. Prüfen Sie, ob etwas nur über Farbe oder Farbänderung kommuniziert wird. Prüfen Sie insbesondere Links, aktivierbare Elemente und Informationsgrafiken.
Beim Kontrast gehen Sie ähnlich vor. Prüfen Sie zunächst, ob die Kontraste offensichtlich ausreichend sind. Sind Sie bei einem Bereich unsicher, verwenden Sie die unten genannten Prüftools. Vergessen Sie bitte nicht, auch Elemente mit Maus- oder Tastatur-Fokus zu prüfen. Auch der TastaturFokus selbst sollte ausreichend Kontrast bieten.
Anforderungen
Success Criterion 1.4.1 Use of Color
Success Criterion 1.4.3 Contrast (Minimum
Success Criterion 1.4.11 Non-Text Contrast
Testen
Für das Prüfen von Farben ist eine Kombination aus qualitativer Analyse und einem Tool sinnvoll, welche Inhalte in Graustufen darstellen kann.
Für die Analyse von Kontrasten gibt es verschiedene Werkzeuge. Zum einen gibt es automatische Prüftools wie etwa WebAIM WAVE.
Ein nützliches Werkzeug ist auch der Colour Contrast Checker. Das ist ein kostenloses Desktop-Programm für Mac und PC.
Daneben gibt es viele Tools für den Browser, mit welchem Sie Farbwerte ermitteln können. Diese können Sie dann über einen Online-Kontrast-Rechner überprüfen.