Zum Inhalt springen

Ratgeber

Barrierefreies Webdesign: Gestaltung, die niemanden ausschließt

Barrierefreiheit entscheidet sich nicht erst im Code, sondern schon im Design: bei der Farbwahl, den Kontrasten, der Typografie und dem Umgang mit Bildern. Diese Seite zeigt die konkreten Gestaltungsregeln, mit den belegten WCAG-Kontrastwerten, und wie Sie prüfen, ob Ihr Design sie einhält.

Kostenlos testen → Zum Full Audit
4,5:1 Kontrast für normalen Text
3:1 für großen Text
Quelle: WCAG 2.1 AA
Farbe nie als einziger Träger
Grundsatz

Schön und barrierefrei ist kein Widerspruch

Barrierefreies Webdesign heißt nicht graue Kästen und Systemschrift. Es heißt: bewusste Gestaltungsentscheidungen, die niemanden aussperren. Die meisten Regeln dahinter sind messbar, allen voran der Farbkontrast, und lassen sich in jedes Design-System einbauen, ohne dessen Charakter zu opfern. Diese Seite behandelt die vier Gestaltungsfelder Farbe, Kontrast, Bild und Typografie. Was eine barrierefreie Website darüber hinaus ausmacht, von Tastaturbedienung bis Formular, zeigt der Guide Barrierefreie Website.

Kontraste

Die belegten Werte: 4,5:1 und 3:1

Die WCAG 2.1 verlangen im Erfolgskriterium 1.4.3 (Stufe AA) ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text und Hintergrund. Für großen Text, ab 18 Punkt oder ab 14 Punkt in fett, genügen 3:1. Quelle: W3C, Web Content Accessibility Guidelines 2.1, Erfolgskriterium 1.4.3 "Kontrast (Minimum)". Diese Werte gelten unverändert auch in WCAG 2.2 und sind damit der Maßstab, den das BFSG über WCAG 2.1 AA einfordert.

Das Kontrastverhältnis setzt die Helligkeit der Textfarbe ins Verhältnis zur Helligkeit des Hintergrunds. Reines Schwarz auf Weiß erreicht 21:1, identische Farben 1:1. Der häufigste Verstoss im Webdesign ist zart-grauer Text auf weißem oder hellgrauem Grund: elegant im Designer-Monitor, unlesbar in der Mittagssonne und für Menschen mit Sehschwäche ganz.

Bestanden

Heller Text auf dunklem Grund mit deutlichem Helligkeitsabstand: gut lesbar, auch bei Sehschwäche und schwierigem Licht.

Zu schwach

Text, der sich kaum vom Hintergrund abhebt, wie dieser Absatz: genau das melden Kontrast-Prüfungen als Verstoss.

Zum Stichwort Kontrastrechner: Ein Kontrastrechner setzt zwei Farben ins Verhältnis und vergleicht das Ergebnis mit den WCAG-Schwellen, ein frei verfügbares Werkzeug dafür ist der WebAIM Contrast Checker. Für einzelne Farbpaare reicht das völlig. Für die ganze Website rechnet das JERVIS Barrierefreiheits-Modul die Kontraste automatisiert auf jeder Seite durch, im JERVIS Audit für jede einzelne Seite der Website samt Fundstelle und Empfehlung.
Farben

Farbe gestalten, ohne sie zum einzigen Träger zu machen

Farbe lenkt, gruppiert, betont: ein zentrales Gestaltungsmittel, und das soll sie bleiben. Die Regel der WCAG lautet nicht "weniger Farbe", sondern: Farbe darf nie der einzige Träger einer Information sein. Sonst geht die Information für Menschen mit eingeschränktem Farbsehen verloren:

• Pflichtfelder: nicht nur rot einfärben, sondern zusätzlich mit Text oder Symbol kennzeichnen.
• Statusanzeigen: grün und rot allein reichen nicht, ein Häkchen oder ein Wort dazu macht den Status für alle lesbar.
• Links im Fließtext: nicht nur farblich absetzen, sondern zusätzlich unterstreichen, so wie auf dieser Seite.
• Diagramme: Flächen zusätzlich beschriften oder mit Mustern unterscheiden, statt allein auf die Farblegende zu bauen.
Praxis-Tipp: Definieren Sie die geprüften Farbpaare direkt im Design-System, etwa als feste Kombinationen von Text- und Hintergrund-Token. Dann kann keine spätere Seite versehentlich eine unlesbare Kombination erzeugen.
Bilder

Bilder: beschreiben, was zu sehen ist

Jedes informative Bild braucht einen Alt-Text, den der Screenreader vorlesen kann. Die Gestaltungsfragen dahinter sind schnell beantwortet:

Informative Bilder

Der Alt-Text beschreibt knapp, was zu sehen ist und welche Funktion das Bild hat. "Vierköpfiges Team im Büro" statt "IMG_2043.jpg".

Dekorative Bilder

Rein schmückende Bilder bekommen ein leeres alt-Attribut (alt=""), damit der Screenreader sie überspringt, statt Dateinamen vorzulesen.

Text in Bildern

Wichtiger Text gehört nicht in Bilder. Was als Pixel gerendert ist, lässt sich weder vorlesen noch skalieren noch durchsuchen. Ausnahme sind Logos.

Funktionale Grafiken

Ein verlinktes Icon beschreibt im Alt-Text das Ziel, nicht das Aussehen: "Zur Startseite" statt "Haus-Symbol".

<!-- Informatives Bild --> <img src="team.avif" alt="Vierköpfiges Team im Büro"> <!-- Dekoratives Bild: leeres alt, Screenreader überspringt es --> <img src="muster.svg" alt="">

Wie JERVIS Alt-Texte, Bildformate und ImageObject-Schema prüft, zeigt der Bild-SEO-Guide: Barrierefreiheit und Bild-Sichtbarkeit teilen sich hier dieselbe Hausaufgabe.

Typografie

Typografie: lesbar für alle, skalierbar für jeden

✓ Zoom nie sperren: Nutzer müssen die Seite vergrößern können. Eine Zoom-Sperre im Viewport-Meta-Tag (user-scalable=no oder maximum-scale=1) stuft JERVIS als kritischen Befund ein, sie ist einer der beiden BFSG-Pflichtchecks.
✓ Relative Einheiten: Schriftgrößen in rem statt festen Pixeln respektieren die Browser-Einstellung der Nutzer, die ihre Standardschrift vergrößert haben.
✓ Zeilenlänge und Abstand: begrenzte Zeilenlänge und großzügiger Zeilenabstand halten längere Texte lesbar, gerade bei Sehschwäche oder Konzentrationsschwierigkeiten.
✓ Klare Schriftschnitte: Sehr dünne Schnitte auf dunklem Grund verlieren schnell an Kontrast. Der gemessene Kontrastwert gilt immer für die konkrete Kombination aus Schrift, Größe und Hintergrund.
✓ Fokus sichtbar gestalten: Der Tastaturfokus ist Teil des Designs. Ein klarer Fokusring in Markenfarbe sieht besser aus als der Browser-Standard und führt Tastaturnutzer sicher durch die Seite.
Bewegung

Animationen: wirkungsvoll, aber reduzierbar

Animationen können führen und Freude machen, für manche Nutzer sind sie aber eine Belastung. Das CSS-Media-Feature prefers-reduced-motion erkennt, wenn jemand in seinem System reduzierte Bewegung eingestellt hat, und erlaubt es, Animationen dann abzuschalten. Diese Seite selbst tut genau das. Automatisch startende Audio-Inhalte ohne Pause-Möglichkeit gelten als Barriere und werden vom JERVIS Barrierefreiheits-Modul gemeldet.

@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }
Prüfung

So prüfen Sie Ihr Design

  • 1

    Im Design-System

    Farbpaare beim Entwurf mit einem Kontrastrechner gegen die WCAG-Schwellen prüfen, bevor sie in Produktion gehen.

  • 2

    Auf der Website

    Der kostenlose Website-Check prüft Kontraste, Alt-Texte und weitere Kriterien automatisiert auf bis zu 6 Seiten, am Desktop- und am Mobile-Viewport.

  • 3

    In der Tiefe

    Der JERVIS Audit prüft alle Seiten mit allen 12 Analyse-Modulen, samt Fundstelle und Empfehlung je Verstoss. Die Kosten zeigt die Preisübersicht.

Grenze der Automatik: Automatische Prüfung deckt nur einen Teil der WCAG-Kriterien ab. Ob ein Alt-Text sinnvoll formuliert oder ein Layout auch inhaltlich verständlich ist, bleibt eine menschliche Bewertung. Mehr dazu im Guide Barrierefreiheit testen.
FAQ

Häufige Fragen zum barrierefreien Webdesign

Welcher Kontrast ist für barrierefreie Websites vorgeschrieben?
Die WCAG 2.1 verlangen im Erfolgskriterium 1.4.3 (Stufe AA) ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Für großen Text, ab 18 Punkt oder ab 14 Punkt in fett, genügen 3:1. Diese Werte stehen so im Standard des W3C und gelten unverändert auch in WCAG 2.2.
Wie prüfe ich den Farbkontrast meiner Website?
Ein Kontrastrechner setzt Text- und Hintergrundfarbe ins Verhältnis und vergleicht das Ergebnis mit den WCAG-Schwellen, ein frei verfügbares Werkzeug dafür ist der WebAIM Contrast Checker. Für einzelne Farbpaare reicht das. Für die ganze Website prüft das JERVIS Barrierefreiheits-Modul die Kontraste automatisiert auf jeder Seite, am Desktop- und am Mobile-Viewport.
Darf ich Farbe als Gestaltungsmittel nutzen?
Ja, nur nie als einziges Mittel. Wenn eine Information ausschließlich über Farbe transportiert wird, etwa ein rot markiertes Pflichtfeld ohne Text oder ein grüner Punkt für verfügbar, geht sie für Menschen mit eingeschränktem Farbsehen verloren. Die WCAG fordern deshalb, dass Farbe nie der einzige Träger einer Information ist: ergänzen Sie Text, Symbole oder Muster.
Was macht einen guten Alt-Text aus?
Ein guter Alt-Text beschreibt knapp, was auf dem Bild zu sehen ist und welche Funktion es erfüllt. Rein dekorative Bilder bekommen ein leeres alt-Attribut, damit der Screenreader sie überspringt. Wichtiger Text gehört nicht in Bilder: Was als Bild gerendert ist, kann weder vorgelesen noch skaliert noch durchsucht werden.
Welche Typografie ist barrierefrei?
Lesbare Schriftgrößen, ausreichender Zeilenabstand, begrenzte Zeilenlänge und klare Schriftschnitte. Entscheidend ist außerdem, dass Nutzer die Schrift vergrößern können: Eine Zoom-Sperre im Viewport-Meta-Tag stuft JERVIS als kritischen Befund ein. Schriftgrößen in relativen Einheiten wie rem respektieren die Browser-Einstellungen der Nutzer.
Wie geht barrierefreies Design mit Animationen um?
Bewegung sollte reduzierbar sein: Das CSS-Media-Feature prefers-reduced-motion erkennt, wenn Nutzer in ihrem System reduzierte Bewegung eingestellt haben, und erlaubt es, Animationen dann abzuschalten. Automatisch abspielende Audio-Inhalte ohne Pause-Möglichkeit gelten als Barriere und werden vom JERVIS Barrierefreiheits-Modul gemeldet.

Verwandte Themen: Den Standard hinter den Kontrastwerten erklärt das WCAG-Glossar. Das große Ganze zeigt der Guide Barrierefreie Website, die kritischste Einzelstelle der Guide Barrierefreie Formulare. Alt-Texte und Bildformate vertieft der Bild-SEO-Guide. Stand: Juli 2026, Kontrastwerte gemäß WCAG 2.1 (W3C).

Hält Ihr Design die Kontrastwerte ein?

Der kostenlose Website-Check prüft Kontraste, Alt-Texte und weitere Design-Kriterien automatisiert, mit Fundstelle und Empfehlung.

Kostenlosen Check starten → Zum JERVIS Audit
Design und Technik aus einer Hand: JERVIS Site PROTECT →
Kosten vorab klären: Preise und Leistungsumfang →