Textkontrast über Bildern

Silktide findet Text, der direkt über einem Bild oder einem Verlauf liegt, bei dem der Kontrast zwischen dem Text und seinem Hintergrund nicht automatisch gemessen werden kann. Diese Stellen müssen von einem Menschen geprüft werden, um zu bestätigen, dass der Text lesbar ist.

Warum das wichtig ist

Hero-Banner und Foto-Hintergründe gehören zu den häufigsten Stellen, an denen der Kontrast in der Praxis versagt. Ein Foto hat helle und dunkle Bereiche, daher kann Text, der über einem Teil des Bildes gut lesbar ist, über einem anderen verschwinden – und wenn sich die Bildschirmgröße ändert, kann sich das Bild hinter dem Text verschieben. Menschen mit Sehbeeinträchtigungen sind am stärksten betroffen, aber Text über einem unruhigen Foto strengt alle an.

Es gelten dieselben gesetzlichen Mindestanforderungen wie für normalen Text: verlangt ein von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (mindestens 18 Punkt oder 14 Punkt fett), gemessen am Bereich des Bildes direkt hinter dem Text.

So beheben Sie das

Prüfen Sie jedes markierte Element visuell. Der Text muss das erforderliche Verhältnis gegenüber jedem Teil des Bildes einhalten, über dem er liegen kann – auch bei anderen Bildschirmgrößen, bei denen sich das Bild neu positioniert.
Wo der Kontrast zweifelhaft ist, fügen Sie eine einfarbige oder halbtransparente Überlagerung zwischen Bild und Text ein, oder verschieben Sie den Text vollständig vom Bild weg.
Auch die Wahl ruhigerer, gleichmäßigerer Bilder hinter Text funktioniert, aber bedenken Sie, dass Redakteurinnen und Redakteure das Bild später austauschen können – eine Überlagerung ist sicherer.
Wenn der Text eindeutig lesbar ist, .

So testet Silktide dies

Untersucht jeden sichtbaren Text auf der Seite und überspringt versteckten Text, Text in SVG-Grafiken und alle Elemente, die Sie von der Prüfung ausgeschlossen haben.
Identifiziert Text, dessen Hintergrund ein Bild oder ein Verlauf statt einer Vollfarbe ist. Text über Vollfarben wird stattdessen automatisch von Textkontrast gemessen.
Überspringt Hintergründe, die den Text nicht beeinflussen können, z. B. auf Null skalierte Hintergrundbilder und kleine, nicht flächendeckende Hintergrundbilder auf Listenelementen (typischerweise benutzerdefinierte Aufzählungssymbole).
Meldet den verbleibenden Text zur Bestätigung und zeigt dabei die Textfarbe und die beteiligten Hintergrundebenen an. Da ein Bild keine einzelne Farbe hat, kann das Verhältnis selbst nicht automatisch berechnet werden.

Fehlerbehebung

Die Prüfung markiert eindeutig lesbaren Text

Das ist zu erwarten – diese Prüfung kann den Kontrast von Bildern nicht messen und zeigt daher vorsorglich jeden Fall an. Prüfen und geben Sie die unproblematischen frei; sie bleiben auch bei zukünftigen Scans freigegeben.

Das Bild sieht auf meinem Bildschirm gut aus

Prüfen Sie auch kleinere und größere Bildschirmbreiten. Responsive Layouts verschieben Text relativ zum Bild, sodass Text, der auf dem Desktop über einem dunklen Bereich liegt, auf dem Smartphone über einem hellen Bereich liegen kann.