1.4.1 Benutzung von Farbe

Was bedeutet das?

Wenn ein Feld nur durch einen roten Rahmen als fehlerhaft markiert ist oder Links im Fließtext nur durch ihre Farbe auffallen, sehen viele Menschen den Unterschied nicht. Ergänzen Sie deshalb ein zweites Merkmal: Text, ein Symbol, eine Unterstreichung, ein Muster.

Farbe selbst ist erlaubt und sinnvoll, sie darf nur nicht allein stehen. Das betrifft auch Diagramme, Verfügbarkeitsanzeigen („grün = lieferbar“) und Kalender. Wie stark sich Farben im Kontrast unterscheiden müssen, regeln die Kriterien 1.4.3 und 1.4.11.

Wem hilft das?

• Menschen mit Farbsehschwäche, zum Beispiel Rot-Grün-Schwäche
• Menschen mit Sehbehinderung oder geringer Kontrastwahrnehmung
• Menschen, die Bildschirme mit Graustufen, Blaulichtfilter oder in hellem Sonnenlicht nutzen

Typische Fehler

• Links im Fließtext ohne Unterstreichung, nur in anderer Farbe
• Pflichtfelder oder Fehler nur rot markiert, ohne Text oder Symbol
• Diagramme, deren Linien oder Flächen sich nur durch die Farbe unterscheiden
• Lieferstatus nur als grüner oder roter Punkt

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.

Prüffrage: Ist Farbe irgendwo das einzige Mittel, um Information zu zeigen (Links im Text, Pflichtfelder, Fehler, Diagramme)?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<style>.error input { border-color: #c00; }</style>
<div class="error">
  <label for="m">E-Mail</label>
  <input id="m" type="email">
</div>

<label for="m">E-Mail</label>
<input id="m" type="email" aria-invalid="true" aria-describedby="m-err">
<p id="m-err">Fehler: Bitte geben Sie eine E-Mail-Adresse
  mit @ ein.</p>
<style>p a { text-decoration: underline; }</style>

Der Fehler steht als Text am Feld, und Links im Fließtext sind unterstrichen; beides funktioniert auch ohne Farbwahrnehmung.

Praxistipps

• Prüfen Sie Ihre Seite einmal in Graustufen: Ist dann noch alles verständlich?

Ratgeber und Muster dazu

• Kontraste, die jeder lesen kannBlasse graue Schrift sieht elegant aus, ist aber für viele Menschen schwer zu lesen, bei Sonne auf dem Smartphone für alle. Hier stehen die Werte, die WCAG 2.2 verlangt, und wie Sie sie dauerhaft im Design verankern.
• TabsEin Bereich von mehreren, Wechsel mit den Pfeiltasten.
• Fehlermeldungen, die helfen statt verwirrenFehler als Text, verknüpft, mit Lösung und Fehlerübersicht.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.4.1 Use of Color

Passendes Tool: Kontrast-Checker