Lesbarer Text auf Bildern: Kontrastverhältnis und Regeln

Text auf einem Bild ist lesbar, wenn der Helligkeitsunterschied zwischen der Farbe der Buchstaben und dem Hintergrund direkt dahinter groß genug ist. Gemessen wird dieser Unterschied mit dem Kontrastverhältnis. Die Richtlinien für Barrierefreiheit im Web, WCAG, empfehlen mindestens 4,5:1 für normalen Text und mindestens 3:1 für großen Text. Schwierig ist bei einem Bild, dass der Hintergrund keine einheitliche Farbe hat; das Verhältnis muss daher am schwierigsten Bereich unter dem Text beurteilt werden.

Dieser Artikel erklärt, wie das Kontrastverhältnis berechnet wird, was die Schwellenwerte bedeuten, wie Sie auf einem wechselnden Hintergrund messen, welche Techniken die Lesbarkeit verbessern und welche Fehler häufig sind. Im letzten Abschnitt erfahren Sie, wie Design Studio bei Yeşilçam Studios dasselbe Maß anwendet.

Was ist das Kontrastverhältnis und wie wird es berechnet?

Das WCAG-Kontrastverhältnis beruht auf der relativen Leuchtdichte zweier Farben. Die relative Leuchtdichte drückt aus, wie hell die Rot-, Grün- und Blauanteile einer Farbe dem Auge erscheinen, von 0 (Schwarz) bis 1 (Weiß). Weil das Auge für Grün am empfindlichsten und für Blau am wenigsten empfindlich ist, werden die Anteile nicht gleich gewichtet: Grün erhält etwa 72 Prozent, Rot 21 Prozent und Blau 7 Prozent.

Das Verhältnis wird so berechnet: Addieren Sie 0,05 zur Leuchtdichte der helleren Farbe, addieren Sie 0,05 zur Leuchtdichte der dunkleren Farbe und teilen Sie den ersten Wert durch den zweiten. Das Ergebnis reicht von 1:1 (dieselbe Farbe) bis 21:1 (Weiß auf Schwarz). Der Farbton allein erzeugt keinen Kontrast; Rot und Grün gleicher Leuchtdichte mögen nebeneinander lebhaft wirken, sind als Text aber schwer lesbar.

Was bedeuten die Schwellenwerte 4,5:1 und 3:1?

Fall	Mindestverhältnis (AA)	Strengere Stufe (AAA)
Normaler Text	4,5:1	7:1
Großer Text (etwa ab 18 Punkt oder 14 Punkt fett)	3:1	4,5:1
Bedienelemente und bedeutungstragende Grafiken	3:1	Nicht definiert

Die Schwellenwerte wurden für das Web geschrieben, ihre Logik gilt aber auch für Druck und Social-Media-Grafiken. Großer Text ist bei einem niedrigeren Verhältnis lesbar, weil die Buchstabenformen breit sind. Kleiner Fließtext, Daten, Adressen und Fußnoten brauchen ein höheres Verhältnis. Plakate werden aus der Entfernung gesehen und Social-Media-Grafiken auf einem kleinen Smartphone-Bildschirm, oft im Sonnenlicht; deshalb macht es unter realen Bedingungen einen echten Unterschied, über den Schwellenwerten zu bleiben.

Wie messen Sie den Kontrast auf einem wechselnden Hintergrund?

Auf einem einfarbigen Hintergrund ergibt die Messung eine einzige Zahl. Auf einem Foto oder einer Illustration liegen helle und dunkle Bereiche zusammen unter dem Text. Die Durchschnittsfarbe zu betrachten, führt in die Irre: Liegen 80 Prozent einer Überschrift auf einem dunklen Himmel und 20 Prozent über einer hellen Wolke, sieht der Durchschnitt gut aus, aber die Buchstaben über der Wolke verschwinden.

1. Bestimmen Sie den Bereich, den der Text bedeckt, und die unmittelbare Umgebung der Buchstaben; das ist der Hintergrund, der das Lesen beeinflusst.
2. Berechnen Sie für jedes Hintergrundpixel in diesem Bereich das Kontrastverhältnis zur Textfarbe.
3. Betrachten Sie den schwächsten Teil, nicht den Durchschnitt. Eine praktische Methode ist, die Grenze der niedrigsten 10 Prozent der Verhältnisse zu nehmen.
4. Vergleichen Sie diesen Wert mit dem Schwellenwert für die Textart: 3:1 für Überschriften und großen Text, 4,5:1 für anderen Text.
5. Reicht er nicht aus, wenden Sie eine der folgenden Techniken an und messen Sie erneut.

Warum unterscheiden sich die Lesebedingungen auf Plakaten, Bildschirmen und in sozialen Medien?

Dasselbe Verhältnis führt unter verschiedenen Lesebedingungen zu unterschiedlichen Ergebnissen. Die Kontrastmessung ist ein Ausgangspunkt; Sie müssen auch berücksichtigen, wo und wie das Design gesehen wird.

• Plakate und Roll-ups. Werden aus der Entfernung gesehen, oft im Vorbeigehen. Die Überschrift muss in wenigen Sekunden gelesen werden, deshalb sind große Schrift, ein kräftiger Schnitt und ein ruhiger Hintergrund ebenso wichtig wie das Verhältnis selbst.
• Smartphone-Bildschirme. Social-Media-Grafiken erscheinen als kleines Quadrat im Feed, oft mit heruntergedrehter Helligkeit oder im Sonnenlicht. Eine Unterüberschrift, die im Vollbild gut lesbar ist, kann in der kleinen Vorschau im Feed verschwinden.
• Drucksachen. Papier sendet kein Licht aus; es reflektiert das Umgebungslicht. Auf mattem Papier hellen dunkle Töne etwas auf und Farben werden stumpfer; ein Verhältnis, das am Bildschirm knapp ausreicht, kann im Druck zu wenig sein.

Eine praktische Gewohnheit: Prüfen Sie das Design in seiner endgültigen Größe und unter seinen endgültigen Bedingungen. Betrachten Sie eine Social-Media-Grafik verkleinert auf dem Smartphone, ein Plakat am Bildschirm verkleinert wie aus der Entfernung und einen Druckauftrag mit der Druckvorschau.

Welche Techniken verbessern die Lesbarkeit?

• Farbwahl. Als Erstes sollten Sie die Textfarbe ändern: eine sehr helle oder sehr dunkle Variante desselben Farbtons, eine andere Farbe aus Ihrer Palette, Weiß oder ein Fast-Schwarz. Dieser Weg verändert den Charakter des Designs am wenigsten.
• In einen ruhigen Bereich verschieben. Ein flacher, detailarmer Teil des Bildes (Himmel, Wand, Boden) ist ein natürlicher Platz für Text. Diesen Raum schon beim Aufbau der Komposition freizulassen, ergibt das sauberste Ergebnis.
• Band oder Hintergrundbox. Ein deckendes oder halbtransparentes Band hinter dem Text macht das Verhältnis unabhängig vom Hintergrund. In flachen grafischen Stilen wie dem Schweizer Design wirkt es natürlich.
• Kontur. Eine dünne Kontur in einer Kontrastfarbe um die Buchstaben hebt den Text von einem unruhigen Hintergrund ab. In Stilen wie Pop-Art und Comics gehört sie zur Ästhetik.
• Schatten und Abdunklung. Ein weicher Schatten oder ein Verlauf, der das Bild zum Textbereich hin abdunkelt (ein sogenannter Scrim), erhöht den Kontrast. Weil dabei im Druck Transparenz entsteht, kann das Ihre Wahl des PDF-Standards beeinflussen.
• Schriftart und Größe. Ein kräftigerer Schnitt und eine größere Schrift lesen sich beim selben Verhältnis besser. Dünne Schriften verschwinden auf Bildern als Erste.

Welche Fehler passieren am häufigsten?

• Nach der Durchschnittsfarbe entscheiden. Der hellste oder dunkelste Teil des Hintergrunds macht einen Teil des Textes unsichtbar.
• Text über Produkt oder Logo laufen lassen. Weder das Produkt noch der Text sind dann lesbar. Text, Produkt und Logo sollten in getrennten Bereichen liegen.
• Den Farbverlust im Druck vergessen. Ein Verhältnis, das am Bildschirm knapp ausreicht, kann unter den Schwellenwert fallen, sobald die Farben in CMYK stumpfer werden; Einzelheiten im Artikel zu CMYK und RGB.
• Sich allein auf den Farbton verlassen. Grün auf Rot oder Violett auf Blau ist bei ähnlicher Leuchtdichte für Menschen mit Farbsehschwäche unlesbar.
• Auf jeden Text dieselbe Korrektur anwenden. Ein Schatten, der für eine große Überschrift genügt, rettet keine kleine Adresszeile.

Wie wird die Lesbarkeit bei Yeşilçam Studios gemessen und korrigiert?

Design Studio malt Texte nicht ins Bild; jeder Text ist eine eigene, bearbeitbare Ebene. So lässt sich der tatsächliche Hintergrund unter dem Text messen. Das Maß ist dasselbe wie in diesem Artikel beschrieben: Es nimmt die niedrigsten 10 Prozent der Kontrastverhältnisse der Pixel unter dem Text und in einem Ring um seine Buchstaben. Der Schwellenwert beträgt 3:1 für Überschriften und Text, der im Verhältnis zur Höhe der Arbeitsfläche groß ist, und 4,5:1 für anderen Text.

Wenn Sam ein Design vorbereitet, werden die Texte mit diesem Maß am tatsächlichen Hintergrund geprüft; Text, der nicht ausreicht, wird verschoben, umgefärbt oder erhält eine zum Stil passende Kontur oder ein Band. Auch Text, der über ein Produkt oder Logo läuft, wird geprüft. Wenn Sie im Editor eine Textebene auswählen, zeigt die Anzeige „Lesbarkeit“ das gemessene Verhältnis: „Gut lesbar“, wenn es ausreicht, andernfalls „Geringer Kontrast“ mit dem nötigen Mindestverhältnis. In diesem Fall erscheint die Schaltfläche „Lesbar machen“; sie sucht zuerst die Farbe, die der aktuellen am nächsten liegt und den Schwellenwert erreicht (eine hellere oder dunklere Variante desselben Farbtons, Farben aus den Design- und Markenpaletten, Weiß, ein Fast-Schwarz); reicht keine aus, erhält der Text eine kontrastierende Kontur. Sie können die Kontur auch selbst über die Felder „Textkontur“ und „Konturstärke“ einstellen.

Beim Export warnt Sie der Dialog mit einer Anzahl, wenn sich Textebenen nicht genug vom Hintergrund abheben; die Warnung blockiert den Download nicht. Die Lesbarkeitsanzeige und „Lesbar machen“ im Editor kosten keine zusätzlichen Token. Eine Schritt-für-Schritt-Erklärung bietet der Leitfaden zu Editor und Lesbarkeit; für Ihr erstes Design lesen Sie den Einstiegsleitfaden zu Design Studio.

Häufige Fragen

Gilt WCAG nicht nur für das Web? Die Richtlinien wurden für Webinhalte geschrieben, doch das Kontrastverhältnis ist eine allgemeine Methode, um den Leuchtdichteunterschied zwischen Farben zu messen. Für Plakate, Speisekarten und Social-Media-Grafiken ist es nach derselben Logik eine gute Referenz.

Reicht 3:1 für eine Überschrift? Für große und fette Überschriften ist 3:1 die Mindeststufe der WCAG. Für ein Plakat, das aus der Entfernung gelesen wird, oder einen Bildschirm im Sonnenlicht ist ein höheres Verhältnis sicherer.

Warum werden die niedrigsten 10 Prozent gemessen statt des Durchschnitts? Leser stolpern über den schwächsten Teil des Textes. Der Durchschnitt verdeckt Buchstaben, die über einer hellen Wolke oder einem dunklen Schatten verloren gehen; der niedrigste Ausschnitt erfasst dieses Risiko.

Verdirbt „Lesbar machen“ die Farben meines Designs? Es wählt zuerst die Farbe, die der aktuellen am nächsten liegt und den Schwellenwert erreicht, sodass die Änderung so klein wie möglich ausfällt. Gefällt Ihnen das Ergebnis nicht, machen Sie es rückgängig und passen Sie Farbe oder Kontur von Hand an.

Verursacht eine Kontur Probleme im Druck? Nein. Die Kontur wird zusammen mit dem Text als Vektor gezeichnet und bleibt in PDF/X-4-, SVG- und EPS-Ausgaben scharf.