Kontrast, Lesbarkeit, Sicherheitsabstände: die 5 Fehler in Social-Grafiken
Über Social-Grafiken wird meistens Geschmack diskutiert. Fünf Dinge sind aber keine Geschmacksfrage, weil es für jedes davon eine Zahl gibt: Kontrast, die Bedienzonen von Story und Reel, die Textmenge, die Anzahl der Schriften und der Rand. Ein Browser kann alle fünf nachrechnen, ohne dass jemand eine Meinung dazu haben muss.
Wir haben das Anfang August für die eigenen Vorlagen zum ersten Mal getan. Von acht handgebauten Story-Layouts fielen acht durch.
1. Kontrast unter 4,5:1
Grau auf Weiß sieht am eigenen Monitor gut aus. Guter Monitor, abgedunkelter Raum, und die Grafik füllt den halben Bildschirm. Auf einem Telefon, draußen, bei halber Helligkeit ist dieselbe Zeile verschwunden.
WCAG 2.1 nennt dafür eine Grenze: 4,5:1 für normalen Text und 3:1 für großen. Groß heißt ab 24 Pixeln Schriftgröße, oder ab 18,66 Pixeln, wenn die Schrift fett gesetzt ist. Das Verhältnis wird aus der relativen Leuchtdichte der beiden Farbwerte berechnet. Es ist also Arithmetik und keine Einschätzung. Wer darunter bleibt, verliert einen Teil der Leser genau an der Zeile, auf die es ihm ankam.
Der Haken sitzt bei Text über einem Foto oder einem Verlauf. Dort gibt es keinen einzelnen Hintergrundwert zum Auslesen, und die Messung schweigt. Bei uns geht dieser Fall an ein Vision-Modell, das sich den Screenshot ansieht, und ein Urteil kann danebenliegen. Bis zum 4. August lief die Kontrastprüfung vollständig so. Seitdem steht in der Checkliste ausdrücklich, dass ein gemessener Wert nicht neu beurteilt werden darf.
2. Text im Bedienbereich von Story und Reel
Instagram legt in der Story eigene Elemente über das Bild: oben Profilzeile und Fortschrittsbalken, unten Antwortfeld und Aktionen. Wir rechnen mit 250 Pixeln oben und 350 unten. Von 1920 Pixeln Höhe bleiben damit 1320.
Gemessen wird dabei das Band, in dem die Buchstaben wirklich stehen. Die Box darum zählt nicht mit, und das aus einem handfesten Grund: Eine Zeilenbox ist höher als ihre Buchstaben, 30 Pixel Schrift in einer 45 Pixel hohen Zeile bringen 15 Pixel Luft mit, und wer die Box misst, meldet Fehler, die auf dem Bild niemand sieht. Ein Fehler entsteht, sobald mehr als 20 Prozent der Buchstabenhöhe eines Elements in der Reserve liegen.
Beim ersten Durchlauf hatten alle acht Story-Vorlagen genau das. Bei Mono Minimal war unten ein Rand von 84 Pixeln gesetzt, und die untere Zeile mit der Domain saß damit mitten im Bereich, über den Instagram später sein Antwortfeld legt. Heute sind es 400 Pixel. Gebaut hatte diese Vorlagen jemand, der die Sicherheitsabstände kannte, was den Punkt eher unterstreicht: Abstände kennen und Abstände nachrechnen sind zwei verschiedene Dinge.
Im Feed gibt es diese Reserve nicht, und Feed-Formate übergeben deshalb eine 0. Wer Story-Abstände auf einen 4:5-Post überträgt, verschenkt ein Drittel der Fläche, ohne dass dort irgendetwas verdeckt würde. Dazu steht mehr im Guide zu den Instagram-Bildgrößen.
3. Mehr als 170 Wörter
170 Wörter pro Fläche, bei einem Carousel pro Slide. Die Zahl ist nicht geraten: Wir haben die 32 handgebauten Vorlagen ausgezählt, das Maximum lag bei 162, aufgerundet ergibt das 170. Eine Obergrenze, an der die eigene Arbeit scheitert, ist die falsche Obergrenze.
170 ist trotzdem sehr viel für eine Fläche, die im Feed eine bis zwei Sekunden bekommt. Wer die Grenze erreicht, hat einen Absatz auf ein Plakat gesetzt.
Mitgezählt wird nur, was jemand lesen soll. In Mono Minimal steht ein 300 Pixel großes „N°04“ mit 13 Prozent Deckkraft im Hintergrund. Alles unter 30 Prozent effektiver Deckkraft gilt als Textur und fällt aus der Wortzahl und aus der Kontrastprüfung heraus, denn ob ein fast unsichtbarer Buchstabe gelesen werden soll, wäre wieder ein Urteil.
4. Vier Schriften
Drei Schriftfamilien pro Dokument, gezählt an dem, was der Browser pro Element als erste Familie auflöst. Mehr liest sich als unsortiert. Zwei reichen fast immer, eine für die Überschrift und eine für den Rest: Mono Minimal kommt mit Bodoni Moda und Jost aus, und das ist eher die Regel als die Ausnahme.
5. Abgeschnittener Text, den niemand nachzählt
Davon gibt es vier Sorten. Text, der über den Rand der Fläche hinausragt: Der Screenshot entsteht genau im Exportmaß, was außerhalb liegt, taucht im Bild also gar nicht auf. Text, der aus einem Container läuft, der seinen Überlauf versteckt. Text, dessen eigene Box kleiner ist als sein Inhalt. Und Text unter einer deckenden Form.
Der letzte Fall war lange ein Urteil, und das ging so aus: In einer fertigen Story lag ein volldeckendes Dreieck über der Dachzeile. Zu lesen war „AUSBILDUNG BEI AMP“ und danach nichts. Das Vision-Modell hatte die Grafik freigegeben. Heute gilt eine Form als deckend, wenn sie zu mindestens 90 Prozent opak ist, und gemeldet wird, sobald sie ein Viertel der Messpunkte auf den Buchstaben abdeckt.
Was auch dann noch durchgeht
Ein farbiger Balken quer über zwei Textzeilen besteht jede dieser Prüfungen. In einem 4:5-Render war das zu sehen, wahrscheinlich ein Marker-Effekt auf der falschen Höhe. Der Text stand in der Fläche, in seiner Box, ausreichend deckend und mit ausreichendem Kontrast. Eine Form, die über Buchstaben gemalt wird, ohne sie nach der 90-Prozent-Regel zu verdecken, passt in keine der Kategorien, und das ist bis heute offen.
Dazu kommt: Eine gemessene Warnung ist noch keine Korrektur. Die Fehler gehen in die Korrekturrunde, die je nach Tarif ein bis vier Mal läuft. Was die letzte Runde geändert hat, wird noch gemessen, aber es ist keine Runde mehr übrig, um darauf zu reagieren. Dann steht im Protokoll, wie viele Fehler unkorrigiert rausgehen. Das liest sich unangenehm und ist besser als die Alternative, es nicht zu wissen.
Vorlagen, die diese Zahlen einhalten
Die Layouts stehen in der Vorlagen-Galerie, jedes mit seinem Format. Die acht Story-Vorlagen dort sind die reparierten Fassungen, und ein Test rendert sie bei jedem Durchlauf wieder auf 1080 × 1920 und prüft die Reserve nach, damit die Reparatur nicht beim nächsten Umbau still verloren geht. Warum diese Layouts überhaupt von Hand gebaut sind, steht in Warum KI-Grafiken alle gleich aussehen.