--- title: "Textbilder" url: "https://barrierefreihochzwei.de/de/wcag/1-4-5-textbilder" language: "de" description: "WCAG 1.4.5 verlangt echten Text statt Grafiken mit Schrift, wo immer die Technik es erlaubt. Hier erfährst du, welche Ausnahmen gelten und was du tun kannst." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:41:59+02:00" --- # Textbilder Warum echte Worte besser sind als Bilder mit Text. - **Erfolgskriterium:** 1.4.5 - **Prinzip:** Wahrnehmbar - **Konformitätsstufe:** Level AA - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/imag...](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html) Erfolgskriterium 1.4.5 # 1.4.5 Textbilder Level AAWahrnehmbar Warum echte Worte besser sind als Bilder mit Text. ## 1. Was ist das Ziel dieses Kriteriums? Ein schnittiges Logo mit geschwungener Schrift, eine stylische Überschrift in der Hausschrift oder ein Zitat in kunstvoller Kalligrafie – Textbilder sind überall. Aber was passiert, wenn jemand den Text vergrößern, die Farben ändern oder eine andere Schriftart verwenden muss? Bei Bildern mit Text geht das nicht. Das Ziel von Erfolgskriterium 1.4.5 ist daher klar: Verwende echten Text statt Bildern mit Text, wann immer sich die gewünschte Darstellung technisch umsetzen lässt. Denn nur echter Text lässt sich anpassen – und genau das brauchen viele Menschen, um Inhalte überhaupt lesen zu können. ## 2. Was fordert das Erfolgskriterium genau? Ganz konkret geht es darum, dass Text als echter Text dargestellt wird, nicht als Bild. Das bedeutet: Verwende HTML-Text mit CSS-Gestaltung statt Grafiken mit eingebauten Buchstaben, wann immer die gewünschte Darstellung mit den eingesetzten Technologien erreichbar ist. **Ausnahmen gelten nur in zwei Fällen:** - **Anpassbar:** Das Textbild lässt sich visuell an die Bedürfnisse der Nutzer:innen anpassen (z. B. Schriftgröße, Farben, Schriftart über Einstellungen auf der Website) - **Wesentlich:** Eine bestimmte Textdarstellung ist unverzichtbar für die vermittelte Information Als „wesentlich“ gelten zum Beispiel Logos mit Schriftzug (das sagt die Norm ausdrücklich), Schriftmuster zur Präsentation einer Schriftart oder historische Dokumente, bei denen die originale Darstellung zählt. Ein wichtiger Punkt: Text, der Teil eines Bildes mit wesentlichem anderem visuellem Inhalt ist – etwa ein Straßenschild auf einem Foto oder Beschriftungen in einem Screenshot –, gilt nicht als Textbild im Sinne dieses Kriteriums. Ein zusätzliches Textbild neben echtem Text ist dagegen keine Abkürzung: Wenn der Inhalt als echter Text darstellbar ist, sollte er es auch sein. ## 3. Warum ist das wichtig für Barrierefreiheit? Stell dir vor, du hast eine Sehschwäche und musst Text auf 200 % vergrößern, um ihn lesen zu können. Oder du brauchst bestimmte Farben für Text und Hintergrund. Bei einem Textbild? Der Text wird pixelig, die Farben bleiben, wie sie sind. Echter Text statt Textbildern schafft Barrierefreiheit, weil er: - **Menschen mit Sehbehinderungen** ermöglicht, Schriftgröße, Kontrast und Farben nach ihren Bedürfnissen anzupassen - **Menschen mit Legasthenie** hilft, gut lesbare Schriftarten und Abstände einzustellen - **Screenreader-Nutzer:innen** den Zugang erleichtert – Textbilder brauchen sonst immer einen passenden Alternativtext - **Menschen mit kognitiven Einschränkungen** durch anpassbare Darstellung das Verstehen erleichtert - **Allen** in verschiedenen Situationen hilft – von der Sonne auf dem Smartphone-Display bis zu müden Augen am Abend Und: Echter Text ist universell. Er funktioniert mit jeder assistiven Technologie und lässt sich in die Form bringen, die jemand braucht. ## 4. So setzt du das Kriterium erfolgreich um Die gute Nachricht: Mit modernen Web-Technologien lässt sich fast jede Textgestaltung auch mit echtem Text umsetzen. Hier ein paar bewährte Praxis-Tipps: **CSS statt Grafiken nutzen:** - Verwende Webfonts für besondere Schriftarten, statt sie als Bild einzubinden - Nutze CSS für Schatten, Farbverläufe, Konturen und andere Effekte - Setze auf SVG mit echtem ``-Element für grafisch anspruchsvollere Schriftzüge **Wenn du doch Textbilder brauchst:** - Prüfe, ob wirklich eine Ausnahme greift (Logo, wesentliche Darstellung) - Gib dem Bild einen Alternativtext mit demselben Text (siehe [Nicht-Text-Inhalt](https://barrierefreihochzwei.de/de/wcag/1-1-1-nicht-text-inhalt)) - Verwende hochauflösende Bilder, die auch bei Vergrößerung lesbar bleiben - Sorge für ausreichenden Kontrast im Textbild (siehe [Kontrast (Minimum)](https://barrierefreihochzwei.de/de/wcag/1-4-3-kontrast-minimum)) **Technische Umsetzung:** - Nutze `@font-face` für eigene Schriftarten - Arbeite mit CSS Grid und Flexbox für komplexe Text-Layouts - Setze CSS-Animationen statt animierter Text-GIFs ein - Verwende SVG für skalierbare Schriftgrafiken **Wann Textbilder in Ordnung sind:** - Logos und Markenzeichen (mit Alternativtext) - Screenshots, bei denen der Text Teil einer umfangreicheren Abbildung ist (mit Beschreibung) - Historische Dokumente (mit Transkription) - Künstlerische Werke, bei denen die Darstellung selbst die Botschaft ist ## 5. Warum dieses Erfolgskriterium für Unternehmen relevant ist Barrierefreie Textdarstellung ist nicht nur ethisch richtig – sie bringt handfeste Vorteile für dein Unternehmen. **1. Zielgruppe erweitern** Echte Texte statt Textbildern machen deine Inhalte für mehr Menschen nutzbar – auch für Menschen mit Sehbehinderungen, Legasthenie oder vorübergehenden Einschränkungen. Du schließt niemanden aus und erreichst mehr potenzielle Kund:innen. **2. Auffindbarkeit verbessern** Echter Text lässt sich zuverlässig durchsuchen, kopieren und übersetzen – von Menschen, von der Suchfunktion im Browser und von Suchmaschinen. Barrierefreiheit ist zwar kein direkter Rankingfaktor, aber Inhalte in echtem Text sind für Suchmaschinen eindeutiger zu erfassen als Schrift in Bildern. **3. Wartung und Kosten reduzieren** Textänderungen in HTML und CSS dauern Sekunden – neue Grafiken zu erstellen und einzubinden dauert deutlich länger. Echte Texte sind günstiger zu übersetzen, zu aktualisieren und zu pflegen. **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. Technischer Maßstab ist die EN 301 549, die für Webinhalte auf WCAG 2.1 Level AA verweist – 1.4.5 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.5 Images of Text (Level AA)** > > If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: > > - **Customizable:** The image of text can be visually customized to the user's requirements; > - **Essential:** A particular presentation of text is essential to the information being conveyed. > > **Note:** Logotypes (text that is part of a logo or brand name) are considered essential. Kurz gesagt: Wenn sich die gewünschte Darstellung technisch mit echtem Text erreichen lässt, verwende echten Text – Textbilder sind nur erlaubt, wenn sie anpassbar sind oder die Darstellung wesentlich ist, wie bei Logos. **Offizielle Erklärung beim W3C** Das W3C erklärt jedes Erfolgskriterium ausführlich – mit Absicht, Beispielen und Techniken (auf Englisch). [Understanding 1.4.5](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html) ## Weitere Kriterien aus „Wahrnehmbar“ [ 1.1.1 Level A ### Nicht-Text-Inhalt Wenn Bilder Worte brauchen. ](https://barrierefreihochzwei.de/de/wcag/1-1-1-nicht-text-inhalt) [ 1.2.1 Level A ### Nur Audio und nur Video (aufgezeichnet) Wenn Podcasts und stumme Videos eine zweite Form brauchen. ](https://barrierefreihochzwei.de/de/wcag/1-2-1-nur-audio-und-nur-video-aufgezeichnet) [ 1.2.2 Level A ### Untertitel (aufgezeichnet) Wenn Videos auch ohne Ton verständlich sein müssen. ](https://barrierefreihochzwei.de/de/wcag/1-2-2-untertitel-aufgezeichnet)