WCAG & BFSG · WCAG-Referenz: Wahrnehmbar

WCAG 1.4.5: Bilder von Text

Von Jakob Sommer Zuletzt geändert am 27. Juli 2026

WCAG 1.4.5 verlangt, dass Informationen als echter Text ausgegeben werden und nicht als Text, der in eine Grafik gerendert wurde – überall dort, wo die eingesetzte Technik dieselbe Darstellung auch mit echtem Text erreichen kann. Es gibt genau zwei Ausnahmen: Der Bildtext ist vom Nutzer anpassbar, oder die konkrete Darstellung ist unentbehrlich, wozu die Norm Wortbildmarken und Logos ausdrücklich zählt.

(Englisch: Images of Text. Der BIK-BITV-Test prüft dasselbe unter dem Namen „Schriftgrafiken“.)

Stufe	Prinzip	Teil der WCAG seit	Rechtlich verbindlich?
AA	Wahrnehmbar	2.0 (2008)	Ja – über EN 301 549 in BFSG & BITV

Das Wichtigste in Kürze

Gemeint sind Rastergrafiken – JPEG, PNG, GIF, WebP –, in die Schrift hineingerendert wurde. Nicht gemeint ist Text, der zufällig auf einem Foto auftaucht.
Zwei Ausnahmen nennt der Normtext: anpassbar (der Nutzer kann Schrift, Farbe und Größe des Bildtextes verändern) und unentbehrlich – dazu zählen Logos und Wortbildmarken ausdrücklich.
SVG-Text ist keine Schriftgrafik. Er skaliert verlustfrei, ist markierbar, durchsuchbar und übersetzbar – und fällt damit nicht unter das Kriterium.
Der häufigste Verstoß sind Aktionsbanner und Angebotskacheln, bei denen Preis, Termin und Bedingungen nur als Pixel existieren.
Ein Alt-Text heilt den Verstoß nicht. Er erfüllt 1.1.1, lässt sich aber nicht vergrößern, umfärben oder mit eigener Schriftart lesen.
Der BITV-Test bewertet Schriftgrafiken auf Bedienelementen härter: Beschriftungen von Schaltflächen als Grafik gelten dort als nicht voll erfüllt.
Auf Stufe AAA verschärft 1.4.9 dieselbe Regel: Dort entfällt die Ausnahme für rein gestalterische Gründe, es bleiben nur unentbehrliche Fälle.
Praktischer Nebengewinn: Echter Text ist Text für Suchmaschinen und KI-Systeme – Bild-Text ist es nur mit Glück und Texterkennung.

Darf ich Text in eine Grafik legen?

Nur, wenn die Darstellung anders nicht erreichbar ist oder der Text wesentlicher Teil des Bildes ist. Logos sind ausgenommen.

Text in einer Rastergrafik ist eingefrorener Text. Er ignoriert alles, was Nutzer an ihrem Gerät eingestellt haben: die größere Schrift, die eigene Leseschrift, die weiteren Abstände, den Kontrastmodus des Betriebssystems, die invertierten Farben. Beim Zoomen wird er unscharf, während echter Text scharf bleibt – Schrift wird ja neu gerastert, Pixel werden nur gestreckt.

Dazu kommen die Dinge, die man erst merkt, wenn man sie braucht: Bild-Text lässt sich nicht markieren, nicht kopieren, nicht in ein Übersetzungswerkzeug geben, nicht per Seitensuche finden und nicht auf eine Braillezeile schieben, ohne dass jemand ihn vorher von Hand abgetippt hat.

Die Norm ist an einer Stelle enger, als viele annehmen: Sie verbietet Schriftgrafiken nicht generell, sondern nur dort, wo die eingesetzte Technik dieselbe visuelle Wirkung auch mit echtem Text erzeugen kann. Das war 2008 ein echtes Zugeständnis – damals gab es keine Webfonts, keine Verläufe auf Text, keine clip-path-Masken. Heute ist die Einschränkung praktisch leergelaufen: Was das Grafikprogramm kann, kann CSS auch, nur eben zugänglich.

Die beiden Ausnahmen im Einzelnen:

Anpassbar: Der Nutzer kann Schriftart, Größe, Farbe und Hintergrund des Bildtextes selbst einstellen – etwa in einem Werkzeug, das die Grafik daraufhin neu erzeugt. Das kommt in der Praxis fast nur bei Diagramm- und Zertifikatsgeneratoren vor.
Unentbehrlich: Die konkrete Darstellung vermittelt die Information. Logos und Wortbildmarken sind hier ausdrücklich genannt, ebenso Schriftproben (wo die Schrift selbst das Thema ist), Kalligrafie, historische Faksimiles und Bildschirmfotos, die eine Software zeigen.

Der vollständige Wortlaut steht im Understanding-Dokument des W3C zu 1.4.5; das deutsche Prüfvorgehen beschreibt der Prüfschritt 1.4.5 des BIK BITV-Tests.

Zwei Veranstaltungsbanner nebeneinander, beide auf 300 Prozent vergrößert. Links, rot markiert, die Variante als PNG-Schriftgrafik: Überschrift Workshop Barrierefreiheit sowie Datum, Ort und Preis sind sichtbar ausgefranst und unscharf, darunter die Anmerkungen nicht markierbar, nicht übersetzbar, ignoriert eigene Schriftart. Rechts, grün markiert, dieselbe Gestaltung als echter Text mit CSS: die Buchstaben sind bei gleicher Vergrößerung gestochen scharf, darunter die Anmerkungen markierbar, durchsuchbar, folgt den Nutzereinstellungen. — Derselbe Banner bei 300 Prozent Zoom: Die Rastergrafik wird gestreckt, echter Text wird neu gerastert.

Wen betrifft es besonders?

Am unmittelbarsten trifft es Menschen mit Sehbehinderung, die vergrößern oder eigene Farben erzwingen. Der hohe Kontrastmodus von Windows schaltet Seitentexte auf Weiß-auf-Schwarz um – die Schriftgrafik daneben bleibt grau auf hellgrau und ist damit die einzige Stelle, die unlesbar wird.

Für Menschen mit Legasthenie oder anderen Leseeinschränkungen gehören eigene Schriftarten und größere Abstände zum Alltagswerkzeug. Auch die greifen bei Bild-Text nicht – ausgerechnet auf der Kachel mit den wichtigsten Angaben bleibt der Text so, wie das Marketing ihn gesetzt hat.

Blinde Nutzer sind auf den Alt-Text angewiesen, der den Bildinhalt eins zu eins nachbaut. Das funktioniert bei einem Satz. Bei einer Angebotskachel mit Preis, Laufzeit, Kündigungsfrist und Kleingedrucktem entsteht ein Alt-Text von 400 Zeichen, den kein Screenreader sinnvoll vorträgt – und der sich nicht überfliegen lässt, weil er ein einziger Block ist.

Und dann sind da alle anderen: Wer den Termin in den Kalender kopieren, den Preis in eine Tabelle übernehmen oder die Seite maschinell übersetzen lassen will, scheitert an derselben Grafik.

Richtig & falsch im Code

Der typische Fall ist der Veranstaltungsbanner, bei dem alle Angaben nur im Bild stehen:

<!-- Falsch: Termin, Ort und Preis existieren nur als Pixel -->
<img src="/img/workshop-banner.png"
     alt="Workshop Barrierefreiheit, 12. Mai, 10–17 Uhr, Rathaus Köln, 89 €" />

<!-- Richtig: echter Text, per CSS gestaltet, Grafik nur als Hintergrund -->
<section class="banner">
  <h2>Workshop Barrierefreiheit</h2>
  <p>
    <time datetime="2026-05-12">12. Mai 2026</time>, 10–17 Uhr ·
    Rathaus Köln · 89 €
  </p>
  <a class="btn" href="/anmeldung.html">Zur Anmeldung</a>
</section>

Wenn das Bild als gestalterischer Hintergrund gebraucht wird, gehört es ins CSS und nicht ins Markup – dann trägt es keine Information und braucht auch keinen Alt-Text:

.banner {
  background: url('/img/banner-hintergrund.webp') center / cover;
  color: #fff;
  padding: 3rem 2rem;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); /* Kontrast sichern */
}

Wo es wirklich um eine besondere Typografie geht, ist SVG der saubere Weg. Der Text bleibt Text im DOM, wird vorgelesen, markiert und gefunden:

<!-- Richtig: SVG-Text ist echter Text, keine Schriftgrafik -->
<svg viewBox="0 0 300 60" role="img" aria-label="Sommeraktion minus 30 Prozent">
  <text x="0" y="42" font-size="40" font-weight="700" fill="currentColor">
    Sommeraktion −30 %
  </text>
</svg>

Ein Hinweis dazu: Damit SVG-Text zuverlässig aussieht, muss die Schrift auch verfügbar sein. Direkt ins HTML eingebettete SVGs erben die Schriftarten der Seite; separat per <img src="…svg"> eingebundene SVGs nicht – dort greift auf fremden Systemen die Ersatzschrift. Für Beschriftungen von Bedienelementen ist ohnehin echter Button-Text die erste Wahl.

So testest du es

Der Markier-Test. Mit gedrückter Maustaste über die Seite ziehen: Was sich markieren lässt, ist Text. Was blau umrandet als Ganzes mitspringt, ist ein Bild. Das findet in dreißig Sekunden mehr als jedes Werkzeug.
Bilder abschalten. So arbeitet der BITV-Test: In Firefox über die Web-Developer-Erweiterung alle Bilder ausblenden und schauen, welche Beschriftungen dabei verschwinden. Was weg ist, war Schriftgrafik.
Zoomen auf 300 Prozent. Echter Text bleibt scharf, Rastergrafik franst aus. Bei Grafiken in doppelter Auflösung passiert das erst später – deshalb ruhig weiter aufdrehen.
Seitensuche benutzen. Strg + F nach einem Wort suchen, das im Banner steht. Kein Treffer heißt: Der Text existiert für Browser, Suchmaschinen und Screenreader nicht.
Den Redaktionsweg prüfen. Kommen Kacheln und Banner als fertige Grafiken aus dem Marketing? Dann ist der eigentliche Befund ein Prozessproblem, und die Korrektur ist ein Template mit echten Textfeldern – sonst kehrt das Thema monatlich zurück.

Häufiger Fehler in der Praxis

Der häufigste Fall ist das Sharepic auf der Website. Für Instagram wird eine Kachel mit Aktionspreis und Laufzeit gebaut, und weil sie schon fertig ist, landet sie eins zu eins auf der Startseite. Auf Instagram ist das in Ordnung – dort gibt die Plattform nichts anderes her. Auf der eigenen Website ist es ein Verstoß, und zwar ausgerechnet bei der Information, wegen der die Leute gekommen sind.

Der zweite ist die Speisekarte als Foto. Restaurants, Kantinen und Kitas laden die Wochenkarte als abfotografiertes DIN-A4-Blatt hoch. Der Aufwand, das zu ändern, ist gering; der Effekt ist groß, weil damit gleichzeitig die Allergenkennzeichnung durchsuchbar wird und die Karte in der lokalen Suche auftaucht.

Der dritte betrifft Bedienelemente: Schaltflächen, deren Beschriftung eine Grafik ist. Ich hab mir angewöhnt, im Audit zuerst danach zu suchen, weil hier gleich mehrere Kriterien gemeinsam kippen – 1.4.5 sowieso, oft auch 4.1.2 Name, Rolle, Wert, wenn der Alt-Text fehlt, und 2.5.3 Beschriftung im Namen, wenn der Alt-Text etwas anderes sagt als die Grafik zeigt. Der BITV-Test bewertet diesen Fall darum strenger als eine Schriftgrafik im Fließtext.

Häufige Fragen

Sind Logos erlaubt?

Ja. Text, der Teil eines Logos oder einer Wortbildmarke ist, gilt laut Normtext als unentbehrlich und ist ausdrücklich ausgenommen. Das Logo braucht trotzdem einen sinnvollen Alt-Text – meist den Firmennamen. Steht das Logo im Link zur Startseite, beschreibt der Alt-Text das Ziel: „Firmenname, zur Startseite“.

Zählt ein Bildschirmfoto als Bild von Text?

In der Regel nein. Ein Bildschirmfoto zeigt eine Benutzeroberfläche, und deren konkrete Darstellung ist die Information – das fällt unter „unentbehrlich“. Trotzdem gilt: Was darauf inhaltlich wichtig ist, gehört zusätzlich in Alt-Text, Bildunterschrift oder Fließtext. Ein Code-Beispiel als Bildschirmfoto dagegen ist ein klarer Verstoß; Code gehört in <pre><code>.

Und Text auf einem Foto?

Wenn der Text zufällig im Bild vorkommt – ein Straßenschild, ein Ladenschild, ein T-Shirt-Aufdruck –, ist das keine Schriftgrafik im Sinne des Kriteriums. Der BITV-Test nennt Fotos mit enthaltener Schrift ausdrücklich als Ausnahme. Entscheidend ist die Absicht: Wurde der Text gesetzt, um Information zu transportieren, oder ist er Teil des abgebildeten Motivs?

Gilt das Kriterium auch für Bilder in E-Mails und PDFs?

Für PDFs ja – die EN 301 549 bezieht Nicht-Web-Dokumente ein, siehe PDF-Barrierefreiheit. Für Newsletter hängt es am Anwendungsbereich; die Praxis ist hier ohnehin eindeutig, weil viele E-Mail-Programme Bilder standardmäßig blockieren. Eine Kampagne, deren Aussage nur im Bild steht, kommt bei einem Teil der Empfänger als leere Fläche an.

Was ist der Unterschied zu 1.4.9?

1.4.9 „Bilder von Text (keine Ausnahme)“ steht auf Stufe AAA und streicht die Ausnahme für rein gestalterische Gründe. Dort bleiben nur Fälle übrig, in denen die Darstellung wirklich unentbehrlich ist – Logos, Schriftproben, Faksimiles. Für BFSG und BITV ist AA maßgeblich, 1.4.9 also freiwillig.