Farbkontrast für Social Media: WCAG-Regeln praxisnah erklärt

Text auf einem Social-Post braucht ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund, bei großem Text genügen 3:1. Das sind die Werte aus WCAG 1.4.3, und das W3C nennt sie so: 4,5:1 für normalen Text und 3:1 für Text ab 18 Punkt oder ab 14 Punkt fett. WCAG ist für Webinhalte geschrieben. Es auf den Text in Ihren Instagram- oder LinkedIn-Grafiken anzuwenden, ist daher unsere Empfehlung und keine Plattformregel.

Im Folgenden: die Formel, was jede WCAG-Stufe verlangt, und gemessene Verhältnisse aus echten Renderings unserer Demo-Marke AURORA. Zum größeren Zusammenhang lesen Sie unseren Leitfaden zu Markenrichtlinien für kleine Teams.

Gilt WCAG für Social-Media-Bilder?

Nicht direkt. WCAG deckt Webinhalte ab, und ein Feed-Post ist ein Bild in der App eines anderen Anbieters. Zwei Kriterien machen es trotzdem zu einem sinnvollen Maßstab. Kriterium 1.4.3 behandelt "Bilder von Text" ausdrücklich als Text, sodass eine in ein PNG eingebrannte Überschrift denselben Verhältnissen unterliegt wie echter Text. Und 1.4.5 Images of Text (Stufe AA) zieht echten Text Textbildern vor, außer wenn die Darstellung wesentlich ist oder das Bild anpassbar, mit Logotypen als klassischem Beispiel.

Nach unserer Erfahrung lassen soziale Netzwerke selten echten Text über einem Bild zu, deshalb ist 1.4.5 der ehrliche Vorbehalt: Eine Grafik mit Text ist immer ein Kompromiss. Wir empfehlen, den Text kurz zu halten, die Kernaussage in der Bildunterschrift zu wiederholen, einen Alternativtext zu schreiben und die Pixel trotzdem nach 1.4.3 auszulegen.

Welches Kontrastverhältnis ist je Stufe nötig?

Kriterium	Stufe	Normaler Text	Großer Text	Gilt für
1.4.3 Contrast (Minimum)	AA	4,5:1	3:1	Text und Bilder von Text
1.4.6 Contrast (Enhanced)	AAA	7:1	4,5:1	Text und Bilder von Text
1.4.11 Non-text Contrast	AA	3:1	3:1	Bedienelemente und Grafiken, die zum Verständnis des Inhalts nötig sind

Drei Details zählen in der Praxis:

• Keine Rundung. Das W3C sagt, berechnete Werte werden nicht gerundet, daher besteht 4,499:1 die Marke 4,5:1 nicht.
• Ausnahmen. Logotypen, rein dekorativer Text, inaktive Bedienelemente und beiläufiger Text in Fotos mit weiterem visuellem Inhalt sind ausgenommen.
• Grafiken. Ein Icon, eine Diagrammlinie oder ein Button-Rand mit Bedeutung braucht nach 1.4.11 3:1 zur Nachbarfarbe, während Text innerhalb der Grafik nach 1.4.3 beurteilt wird.

Großer Text wird in Punkt definiert, und ein PNG hat keine Punkte. Unsere Arbeitsannahme für eine 1080-px-Grafik: Behandeln Sie eine Überschrift, die auf dem Smartphone-Bildschirm deutlich groß ist, als großen Text und alles andere, besonders kleine Eyebrow-Labels und Fußzeilen, als normalen Text, der 4,5:1 braucht.

Wie wird das Kontrastverhältnis berechnet?

Die Formel stammt aus den WCAG-Definitionen. Rechnen Sie jeden 8-Bit-Kanal in den Bereich 0 bis 1 um, linearisieren Sie ihn (durch 12.92 teilen, wenn der Wert höchstens 0.04045 beträgt, sonst (Wert + 0.055) / 1.055 hoch 2.4) und gewichten Sie dann: relative Leuchtdichte L = 0.2126 R + 0.7152 G + 0.0722 B. Das Verhältnis ist (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere Farbe ist. Reines Weiß auf reinem Schwarz ergibt 21:1, den Höchstwert.

Grün trägt das meiste Gewicht. Deshalb wirken leuchtendes Grün und Gelb hell, und deshalb kann ein gesättigtes Grün kräftig aussehen und auf Weiß dennoch durchfallen. WebAIM sagt dasselbe: Beim Kontrast zählt der Unterschied in der Leuchtdichte, nicht der Unterschied im Farbton.

Was messen bestandene Renderings?

Wir haben vier Vorlagen der Demo-Marke AURORA in Originalgröße gerendert und die Verhältnisse mit der obigen Formel berechnet, aus den Palettenwerten der Marke und aus in den PNG abgetasteten Pixeln.

Fast Schwarz #0A0A0A auf gebrochenem Weiß #FAFAF7 misst 18,93:1. Das kleine graue Fußzeilen-Label verwendet #6F6F6F, und seine abgetasteten Pixel maßen 4,81:1 zum Hintergrund. Das übertrifft 4,5:1 knapp, und es ist winziger Text, deshalb ist es das eine Element dieses Posts, das wir im Auge behalten würden.

Dieser Post kombiniert Fast Schwarz mit zwei verschiedenen hellen Flächen. Die Überschrift, das kleine PASS-Label und der gebrochen weiße Text der Pille auf Schwarz messen in den abgetasteten Pixeln alle 18,93:1. Der kleine AURORA-Schriftzug sitzt auf dem grünen Block, und Fast Schwarz auf Grün #00D084 misst 9,76:1. Grün ist eine gute Fläche für dunklen Text und eine schlechte Farbe für den Text selbst; das umgekehrte Paar, Grün auf Fast Schwarz, ergibt aufgrund der Symmetrie der Formel dieselben 9,76:1.

Text über einem Verlauf hat kein einzelnes Verhältnis, messen Sie daher die schlechteste Stelle. WebAIM merkt an, dass WCAG keine Methode für Verläufe vorgibt, und rät, den Bereich mit dem geringsten Kontrast zu testen. Die Überschrift sitzt hier auf einer Milchglas-Karte; beim Abtasten jedes Hintergrundpixels darunter lag das niedrigste gemessene Verhältnis bei etwa 15 bis 17, und das kleine Eyebrow-Label über einer grüneren Stelle lag am unteren Ende dieses Bereichs.

Auch Deckkraft senkt den Kontrast. Diese Vorlage setzt den Fließtext mit 75 % Deckkraft; die gemischte Textfarbe maß gegen den Pfirsich-Hintergrund über 7:1, also weiterhin deutlich über 4,5:1.

Text	Hintergrund	Verhältnis	4,5:1	3:1
Fast Schwarz #0A0A0A	Gebrochenes Weiß #FAFAF7	18,93	Bestanden	Bestanden
Gedecktes Grau #6F6F6F	Gebrochenes Weiß #FAFAF7	4,81	Bestanden	Bestanden
Fast Schwarz #0A0A0A	Grün #00D084	9,76	Bestanden	Bestanden
Grün #00D084	Fast Schwarz #0A0A0A	9,76	Bestanden	Bestanden
Überschrift und Eyebrow über der Verlaufskarte (niedrigster gemessener Wert)	Milchglas-Verlauf	etwa 15 bis 17	Bestanden	Bestanden
Fließtext mit 75 % Deckkraft	Verlauf von Pfirsich zu Rosa	über 7	Bestanden	Bestanden

Welche Kombinationen unserer Palette fallen durch?

Alle vier Renderings bestehen, weil die Vorlagenfarben an eine Palette gebunden sind, die einmal geprüft wurde, und nicht jedes Mal, wenn jemand einen Post schreibt. Einen durchgefallenen Post haben wir nicht gerendert: Die Engine lässt Mitglieder nie eine schlechte Farbe wählen, genau das ist der Sinn. Dieselbe Palette enthält aber Paare, die durchfielen, würde sie jemand verwenden, berechnet mit derselben Formel:

Text	Hintergrund	Verhältnis	4,5:1	3:1
Weiß #FFFFFF	Grün #00D084	2,03	Durchgefallen	Durchgefallen
Gebrochenes Weiß #FAFAF7	Grün #00D084	1,94	Durchgefallen	Durchgefallen
Grün #00D084	Gebrochenes Weiß #FAFAF7	1,94	Durchgefallen	Durchgefallen
Orange #FF6B35	Gebrochenes Weiß #FAFAF7	2,71	Durchgefallen	Durchgefallen
Gedecktes Grau #6F6F6F	Rosa #FFB3D1	3,02	Durchgefallen	Bestanden

Die Zeile Weiß auf Grün ist die typische Falle. Weißer Text auf einem leuchtenden Marken-Grün sieht auf einem guten Monitor in Ordnung aus und verfehlt die Vorgabe um mehr als die Hälfte. Leuchtende Akzentfarben setzt man am besten als Fläche für dunklen Text ein, wie im grünen Block des Renderings oben.

Wie prüfen Sie den Kontrast Ihrer eigenen Grafiken?

1. Notieren Sie jedes Text-Hintergrund-Paar Ihrer Vorlage, einschließlich Labels, Fußzeilen und Button-Text.
2. Berechnen Sie jedes Verhältnis mit der obigen Formel oder einem beliebigen WCAG-Kontrastprüfer, mit exakten Hex-Werten und nie anhand von Screenshots komprimierter Bilder.
3. Legen Sie an normalen Text 4,5:1 an. Lassen Sie 3:1 nur für Text zu, der auf dem Smartphone eindeutig groß ist.
4. Messen Sie bei Text über Verläufen oder Fotos die schlechteste Stelle unter dem Text, oder legen Sie ein deckendes oder halbtransparentes Feld dahinter.
5. Prüfen Sie die Deckkraft: Eine Textfarbe mit 60 % ist eine andere Farbe.
6. Verlassen Sie sich nicht allein auf Farbe als Bedeutungsträger, etwa Rot gegen Grün für schlecht und gut (WCAG 1.4.1 Use of Color).
7. Prüfen Sie erneut, wenn sich die Markenpalette ändert, nicht, wenn ein Post geschrieben wird.

Die Typografie entscheidet, welcher Text als groß gilt. Lesen Sie daher als Nächstes unseren Leitfaden zur Typografie für Social-Media-Posts und unsere Layout-Prinzipien für Social-Media-Grafiken, um Text über unruhigen Bereichen zu platzieren. Wenn Sie die Prüfung direkt im Arbeitsablauf haben möchten: Chikaboom sperrt die Vorlagenfarben, sodass Mitglieder Text ausfüllen, ohne sie zu ändern; Sie können es in der Live-Demo ausprobieren.