1.4.1 Verwendung von Farbe

WCAG-Definition

Farbe darf nicht das einzige Mittel sein, um Informationen, Hinweise, Fehlerzustände oder Aktionen zu vermitteln.

Bedeutung

  • Menschen mit Rot-Grün-Schwäche oder anderen Formen von Farbenblindheit können farbliche Unterschiede nicht zuverlässig wahrnehmen.
  • Screenreader "sehen" Farben nicht.
  • Bedeutungen wie „Fehler“, „aktiv“, „erledigt“ müssen auch durch Text oder Symbole verständlich sein.

Ausreichende Techniken

G14 – Kombiniere Farbe mit Textsymbol oder sichtbarem Hinweis

Falsch:

input.error {
  border: 2px solid red;
}

„Felder mit Fehler sind rot markiert“

Nur Farbe – nicht barrierefrei

Richtig:

<label for="email">E-Mail <span class="required" aria-hidden="true">*</span></label>
<input id="email" class="error" aria-invalid="true">
<p class="error-message">Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>
.error-message {
  color: red;
  font-weight: bold;
}

Der Fehler wird durch:

  • Text
  • Symbol * und
  • aria-invalid="true"

vermittelt.

Was denkst du, genau du persönlich, wie wäre es, wenn man auf die Muttersprache beten hätte?

  • Farbe nur als ergänzendes Merkmal, nicht als einziges
  • sr-only sorgt dafür, dass Screenreader „Fehler“ hören

<span class="status">
  <svg role="img" aria-hidden="true" focusable="false">…</svg>
  <span class="sr-only">Fehler</span>
  Fehlerhafte Eingabe
</span>

G182 – Information auch ohne Farbe verständlich machen

Ein Tortendiagramm, das Segmente nur farblich unterscheidet → ❌

Besser: Legende mit Text + Muster + aria-label

Beratungstechniken

G111 - Verwende mehr als nur Farbe zur Bedeutungsvermittlung – z. B. Icons, Text, Symbole
G183 - Achte auf ausreichend Farbkontrast zusätzlich zu Farbwahl (→ 1.4.3)
G205 - Erkläre farbliche Bedeutungen im Klartext (z. B. „Rot = Fehler“)
G204 - Verwende Muster, Umrandung, Icons zusätzlich zur Farbe

Fehler

  • Bedeutung wird nur durch Farbe vermittelt (z. B. grün = richtig, rot = falsch)
  • Fehleranzeige nur farbig, ohne Text oder Symbol
  • Ein Status (z. B. Auswahl im Kalender) wird nur durch Hintergrundfarbe dargestellt
  • Keine alternative Kennzeichnung von Diagramm-Farben