1.4.3 Kontrast (Minimum)

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du scrollst durch eine Website und musst die Augen zusammenkneifen, um den grauen Text auf hellgrauem Hintergrund zu entziffern. Frustrierend, oder? Für Menschen mit Sehbeeinträchtigungen, Farbsehschwächen oder für viele ältere Menschen ist schwacher Kontrast nicht nur ärgerlich – er macht Inhalte schlicht unlesbar.

Das Ziel von Erfolgskriterium 1.4.3 ist daher klar: Jeder Text auf deiner Website braucht ausreichend Kontrast zu seinem Hintergrund. Der Helligkeitsunterschied zwischen Schrift und Untergrund muss groß genug sein, damit möglichst alle Menschen die Inhalte ohne Hilfsmittel lesen können.

2. Was fordert das Erfolgskriterium genau?

Die Regeln sind mathematisch präzise, aber praktisch gut umsetzbar:

Für normalen Text (unter 18 Punkt bzw. unter 14 Punkt fett): Das Kontrastverhältnis zwischen Text und Hintergrund muss mindestens 4,5:1 betragen.

Für großen Text (ab 18 Punkt oder ab 14 Punkt fett, im Web etwa 24 px bzw. rund 18,7 px fett): Hier reicht ein Kontrastverhältnis von 3:1.

Das gilt für alle Texte und Textbilder, die Informationen vermitteln – auch für Platzhaltertext in Formularfeldern und für Text in Zuständen wie Hover oder Fokus.

Ausnahmen gelten für:

• Text in inaktiven Bedienelementen (z. B. deaktivierte Buttons)
• Rein dekorativen Text ohne Informationswert
• Text, der für niemanden sichtbar ist
• Text, der Teil eines Bildes mit wesentlichem anderem visuellem Inhalt ist (z. B. ein Schild auf einem Foto)
• Logos und Markennamen

Wichtig: Die Kontrastwerte sind harte Schwellenwerte – 4,49:1 erfüllt das Kriterium nicht, erst ab 4,5:1 ist es bestanden. Für Bedienelemente und Grafiken gilt ergänzend Nicht-Text-Kontrast, die strengere AAA-Stufe ist Kontrast (erhöht).

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du musst ein wichtiges Formular ausfüllen, aber die Schrift verschwimmt förmlich im Hintergrund. So geht es vielen Menschen – nicht nur solchen mit diagnostizierten Sehproblemen.

Ausreichender Kontrast schafft Barrierefreiheit, weil er:

• Menschen mit Sehbehinderungen oder Farbsehschwächen das Lesen ermöglicht
• Älteren Menschen hilft, deren Kontrastempfindlichkeit mit dem Alter oft nachlässt
• Allen in ungünstigen Lichtverhältnissen nützt – ob im sonnigen Café oder bei gedimmtem Bildschirm
• Die Leseanstrengung reduziert und die Lesbarkeit für alle verbessert
• Menschen mit kognitiven Einschränkungen beim Lesen entlastet

Und das Beste: Guter Kontrast hilft nicht nur Menschen mit Einschränkungen, sondern macht Inhalte für alle angenehmer lesbar.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Kontrast lässt sich exakt messen – mit den richtigen Werkzeugen und etwas Know-how ist er kein Hexenwerk.

Grundregeln für besseren Kontrast:

• Verwende dunkle Schrift auf hellem Hintergrund oder umgekehrt – Mittelgrau auf Mittelgrau ist tabu
• Vermeide bunte Schrift auf buntem Hintergrund, selbst wenn die Farben sehr unterschiedlich wirken
• Achte besonders auf Links, Buttons, Platzhaltertext und Hinweistexte
• Verlass dich nicht auf dein Auge oder deinen Monitor – miss nach

Praktische Werkzeuge zum Messen:

• Der kostenlose Colour Contrast Analyser (Desktop-App) mit Pipette für schnelle Checks
• Online-Tools wie der WebAIM Contrast Checker
• Die Entwicklertools in Chrome, Edge und Firefox zeigen das Kontrastverhältnis direkt an
• Design-Plugins wie Stark prüfen Kontraste schon in Figma und Co.

Technische Umsetzung:

• In CSS: Lege Text- und Hintergrundfarben als geprüfte Paare in deinem Designsystem fest
• Bei Textbildern: Achte auf ausreichende Auflösung und klare Farbabgrenzung
• Prüfe auch Varianten wie Dark Mode, Hover- und Fokuszustände

Häufige Fehler vermeiden:

• Niemals nur Vordergrund- oder nur Hintergrundfarbe definieren – sonst können Nutzereinstellungen unlesbare Kombinationen erzeugen
• Text auf Hintergrundbildern braucht eine Abdunklung oder eine Hintergrundfarbe als Fallback
• Transparenzen und Verläufe erschweren die Messung – prüfe die ungünstigste Stelle

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Guter Kontrast ist keine Design-Einschränkung – er ist ein Qualitätsmerkmal, das sich direkt auf dein Geschäft auswirkt.

1. Zielgruppe erweitern Laut WHO leben weltweit rund 1,3 Milliarden Menschen mit einer erheblichen Behinderung, dazu kommen Menschen mit Farbsehschwächen und altersbedingt nachlassender Sehkraft. Mit gutem Kontrast erreichst du sie – statt sie an die Konkurrenz zu verlieren.

2. Häufigsten Fehler vermeiden Die jährliche WebAIM-Million-Analyse der meistbesuchten Startseiten zeigt seit Jahren: Zu geringer Textkontrast ist der häufigste automatisch erkennbare Barrierefreiheitsfehler. Wer hier sauber arbeitet, hebt sich ab – und Kontrastfehler lassen sich vergleichsweise leicht finden und beheben.

3. Conversion schützen Wenn Nutzer:innen deine Buttons, Preise oder Formularhinweise nicht lesen können, brechen sie eher ab. Gut lesbarer Text ist die Grundlage dafür, dass Menschen verstehen, was du anbietest.

Und nicht zuletzt: rechtliche Anforderungen. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Produkte und Dienstleistungen für Verbraucher:innen, etwa Online-Shops und Bankdienstleistungen. Technischer Maßstab ist die EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist – 1.4.3 gehört dazu. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht verpflichtet. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no contrast requirement.

Kurz gesagt: Text und Textbilder brauchen mindestens 4,5:1 Kontrast, großer Text mindestens 3:1 – ausgenommen sind inaktive, dekorative, unsichtbare und beiläufige Texte sowie Logos.