1.4.4 Text vergrößern: Wenn Klein zu klein ist (AA)

Was ist das Ziel dieses Kriteriums?

Stell dir vor, du sitzt in einem Restaurant und versuchst die Speisekarte zu lesen – aber die Schrift ist so winzig, dass du deine Augen zusammenkneifen musst wie beim Blick in die Sonne. Genau so fühlen sich viele Menschen beim Surfen im Web, wenn Texte zu klein sind.

Menschen mit Sehbeeinträchtigungen, ältere Nutzer oder auch einfach jeder, der müde ist oder ein kleines Display nutzt, brauchen oft größere Schrift zum komfortablen Lesen. Das Ziel von Erfolgskriterium 1.4.4 der WCAG ist daher klar: Alle Texte müssen sich ohne spezielle Software mindestens auf 200% ihrer ursprünglichen Größe vergrößern lassen – und dabei dürfen weder Inhalte noch Funktionen verloren gehen.

Kurz gesagt: Was klein zu lesen ist, muss groß lesbar werden können.

Was fordert das Erfolgskriterium genau?

Das Level AA-Kriterium ist technisch sehr konkret formuliert:

Texte müssen ohne assistive Technologie um bis zu 200% vergrößerbar sein, ohne dass dabei Inhalt oder Funktionalität verloren geht. Das bedeutet:

  • Alle Texte – inklusive Beschriftungen von Schaltflächen, Labels und Menüeinträge – müssen sich verdoppeln lassen
  • Die Vergrößerung soll über Standard-Browser-Funktionen funktionieren (Zoom, Textgrößenänderung)
  • Inhalte dürfen dabei nicht abgeschnitten, verdeckt oder unbrauchbar werden
  • Navigation und alle Funktionen müssen weiterhin zugänglich bleiben

 

Ausnahmen gelten für:

  • Untertitel (Captions) – da diese oft fest in Videos eingebettet sind
  • Bilder mit Text – diese können technisch bedingt nicht sauber skaliert werden

Wichtig: Das Kriterium bezieht sich auf die visuelle Darstellung. Nutzer sollen die Texte mit Standard-Browser-Tools vergrößern können, ohne dass spezielle Software wie Bildschirmlupen nötig wird.

Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du willst online etwas bestellen, aber die Produktbeschreibungen sind so klein gedruckt, dass du sie kaum entziffern kannst. Frustrierend, oder? Für Menschen mit Sehbeeinträchtigungen ist das Alltag.

Vergrößerbare Texte schaffen Barrierefreiheit, weil sie:

  • Menschen mit Sehbeeinträchtigungen das Lesen ermöglichen, ohne dass sie spezielle Software installieren müssen
  • Älteren Nutzern helfen, die oft kleinere Schriften schwerer erkennen können
  • Mobile Nutzer unterstützen, die bei hellem Sonnenlicht oder in ungünstigen Situationen größere Texte benötigen
  • Menschen mit kognitiven Einschränkungen das Verstehen erleichtern, da größere Texte oft besser erfassbar sind
  • Nutzer in stressigen Situationen helfen – etwa bei wichtigen Formularen oder komplexen Inhalten

Und das Beste: Vergrößerbare Texte funktionieren universell. Sie nutzen Standard-Browser-Technologie, sind also mit jedem Gerät und jeder Plattform kompatibel.

So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Text-Skalierung ist meist technisch einfach umsetzbar und bringt oft sogar Vorteile für die allgemeine Nutzerfreundlichkeit. Hier ein paar bewährte Praxis-Tipps:

 

Grundregeln für skalierbare Texte:

  • Verwende relative Einheiten (em, rem, %) statt fester Pixel-Werte für Schriftgrößen
  • Gestalte flexible Layouts, die sich an vergrößerte Texte anpassen können
  • Vermeide feste Container-Breiten, die bei größeren Texten zu Abschneidungen führen
  • Teste regelmäßig bei 200% Zoom – sowohl den Browser-Zoom als auch die Textvergrößerung

 

Technische Umsetzung:

  • CSS: Nutze font-size: 1.2em oder font-size: 120% statt font-size: 16px
  • Layout: Arbeite mit flexiblen Containern (flexbox, grid) statt starren Tabellen
  • Responsive Design: Berücksichtige größere Texte bereits in deinem responsiven Konzept
  • Testing: Prüfe bei verschiedenen Zoom-Stufen in Chrome, Firefox und Safari

 

Häufige Fallstricke vermeiden:

  • Icons mit Text sollten sich zusammen vergrößern oder separate Beschriftungen haben
  • Overlay-Fenster und Tooltips müssen bei vergrößerten Texten noch vollständig sichtbar sein
  • Navigation darf bei größeren Texten nicht unbrauchbar werden
  • Formular-Labels und -Buttons müssen mit dem Text wachsen

 

Tools zum Testen:

  • Browser-Zoom (Strg/Cmd + Plus)
  • Browser-Einstellungen für Schriftgrößen
  • Accessibility-Extensions wie WAVE oder axe DevTools

 

Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 1.4.4 gilt: Barrierefreiheit ist kein Zusatzaufwand – sondern ein echter Business-Vorteil, der sich direkt auf deine Conversion und Kundenzufriedenheit auswirkt.

 

1. Zielgruppe erweitern

Etwa 253 Millionen Menschen weltweit haben eine Sehbeeinträchtigung. Dazu kommen ältere Nutzer (über 50% der Internetnutzer sind über 40) und Menschen in schwierigen Nutzungssituationen. Mit skalierbaren Texten machst du deine Inhalte für deutlich mehr Menschen komfortabel nutzbar.

 

2. Conversion-Rate steigern

Wenn Nutzer deine Texte besser lesen können, verstehen sie auch besser, was du anbietest. Größere, gut lesbare Texte reduzieren Abbrüche und erhöhen die Wahrscheinlichkeit, dass Nutzer Aktionen durchführen – vom Newsletter-Signup bis zum Kaufabschluss.

 

3. Mobile Experience verbessern

Skalierbare Texte funktionieren automatisch besser auf verschiedenen Bildschirmgrößen und bei unterschiedlichen Lichtverhältnissen. Das verbessert die mobile Nutzererfahrung erheblich – und Mobile macht heute oft über 50% des Traffics aus.

Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.

 

Das Erfolgskriterium im Wortlaut der W3

Success Criterion 1.4.4 Resize Text
(Level AA)

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality

Link zum konkreten Erfolgskriterium

.h3, h3 { font-size:24px; }