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 einfach älteren Nutzern ist schwacher Kontrast nicht nur ärgerlich – er macht Inhalte schlichtweg unlesbar.
Das Ziel von Erfolgskriterium 1.4.3 der WCAG ist daher klar: Jeder Text auf deiner Website braucht ausreichend Kontrast zu seinem Hintergrund. Das bedeutet, die Helligkeit zwischen Schrift und Untergrund muss stark genug sein, damit alle Menschen – unabhängig von ihrer Sehkraft – die Inhalte problemlos lesen können.
Was fordert das Erfolgskriterium genau?
Die Regeln sind mathematisch präzise, aber praktisch gut umsetzbar:
Für normalen Text (unter 18 Punkt oder 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): Hier reicht ein Kontrastverhältnis von 3:1.
Das gilt für alle Texte und Textbilder, die Informationen vermitteln – inklusive Platzhaltertext, Hover-Texte und Fokus-Inhalte.
Ausnahmen gelten für:
- Inaktive Bedienelemente (z. B. deaktivierte Buttons)
- Rein dekorative Texte ohne Informationswert
- Logos und Markennamen
- Text, der Teil eines Bildes mit anderen visuellen Inhalten ist
Wichtig: Die Kontrastwerte sind Schwellenwerte – 4,49:1 erfüllt das Kriterium noch nicht, erst ab 4,5:1 ist es bestanden.
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 täglich Millionen von Menschen – nicht nur solchen mit diagnostizierten Sehproblemen.
Ausreichender Kontrast schafft Barrierefreiheit, weil er:
- Menschen mit Sehbehinderungen oder Farbsehschwächen das Lesen ermöglicht
- Älteren Nutzern hilft, die häufig Kontrastempfindlichkeit verlieren
- Allen in ungünstigen Lichtverhältnissen nützt – ob im sonnigen Café oder bei schwachem Bildschirmlicht
- Stress reduziert und die Lesbarkeit für alle verbessert
- Menschen mit kognitiven Einschränkungen beim Textverständnis unterstützt
Und das Beste: Guter Kontrast hilft nicht nur Menschen mit Einschränkungen, sondern macht Inhalte für alle angenehmer lesbar.
So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Kontrast lässt sich messen und optimieren – mit den richtigen Tools und etwas Know-how wird’s zum Kinderspiel.
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 unterschiedlich sind
- Achte besonders auf Links, Buttons und interaktive Elemente
- Teste verschiedene Bildschirmeinstellungen – was auf deinem High-End-Monitor gut aussieht, kann woanders verschwinden
Praktische Tools zum Messen:
- Browser-Erweiterungen wie „Colour Contrast Analyser“ für schnelle Checks
- Online-Tools wie WebAIM’s Contrast Checker oder Adobe Color
- Entwicklertools in Chrome oder Firefox haben inzwischen Kontrast-Checker integriert
- Für Profis: Tools wie Stark oder Colour Oracle für umfassende Tests
Technische Umsetzung:
- In CSS: Verwende eindeutige Farbwerte und teste Kombinationen vorab
- Bei Textbildern: Achte auf ausreichende Auflösung und klare Farbabgrenzung
- Responsive Design: Prüfe Kontraste auf verschiedenen Geräten und Bildschirmgrößen
Häufige Fehler vermeiden:
- Niemals nur Vordergrund- oder nur Hintergrundfarbe definieren
- Hintergrundbilder können Textkontrast zerstören – immer mit Fallback-Farben arbeiten
- Transparenzen und Verläufe erschweren die Kontrastberechnung
Warum dieses Erfolgskriterium für Unternehmen relevant ist
Guter Kontrast ist keine Design-Einschränkung – er ist ein Wettbewerbsvorteil, der sich direkt auf dein Business auswirkt.
1. Zielgruppe massiv erweitern
Über 285 Millionen Menschen weltweit haben eine Sehbehinderung, dazu kommen Millionen mit Farbsehschwächen und altersbedingt nachlassender Sehkraft. Mit gutem Kontrast erreichst du all diese Menschen – und verhinderst, dass sie zur Konkurrenz wechseln.
2. Conversion-Rate steigern
Schlechter Kontrast führt nachweislich zu höheren Abbruchraten. Wenn Nutzer deine Call-to-Action-Buttons nicht lesen können oder Formulare schwer erkennbar sind, verlierst du Umsatz. Studien zeigen: Bessere Lesbarkeit kann Conversion-Raten um bis zu 30% steigern.
3. Suchmaschinenoptimierung verbessern
Google bevorzugt barrierefreie Websites – auch Kontrast ist mittlerweile ein Ranking-Faktor. Core Web Vitals berücksichtigen User Experience, und dazu gehört definitiv die Lesbarkeit deiner Inhalte.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Das EU-Barrierefreiheitsstärkungsgesetz macht digitale Barrierefreiheit in vielen Bereichen zur Pflicht – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
Das Erfolgskriterium im Wortlaut der W3
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.