Heute möchte ich über eine CSS-Funktion schreiben, die noch experimentell ist. Aber sie kann einen Unterschied für alle machen, die Schwierigkeiten haben, Text auf transparenten Elementen zu lesen.
Auf vielen Websites finden wir Elemente, die Text auf einem Bild platzieren. Dies ist oft ein großes Problem für die Lesbarkeit des Textes.
Text auf einem Bild
Sehen wir uns hierzu ein kleines Beispiel an. WordPress bietet den „Cover“-Block an. Wenn wir ihn verwenden, wird das Bild zu einem Hintergrundbild. Der Block verfügt über ein Steuerelement für die „Overlay-Deckkraft“. Wenn die Deckkraft auf einen Wert von 21 oder weniger eingestellt ist, wird der Text standardmäßig schwarz angezeigt. Wenn der Wert auf 22 oder höher gesetzt ist, wird die Textfarbe auf Weiß umgestellt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wie wir im obigen Beispiel sehen können, ist der Text im oberen Teil schwer zu lesen, selbst wenn man normalerweise keine Probleme mit dem Lesen von Text auf Bildern hat. Für mich als Legastheniker kann das extrem frustrierend sein, Text so zu lesen.
Verwendung einer Präferenz zur Verringerung der Transparenz
Die neue CSS-Eigenschaft, über die ich heute schreiben möchte, heißt prefers-reduced-transparency und verwendet genau wie die Präferenz für reduzierte Bewegungen den Wert reduce. Hier ist ein Beispiel für den Cover-Block:
@media (prefers-reduced-transparency: reduce) {
.has-background-dim {
opacity: .7;
}
}
In einem früheren Blogbeitrag habe ich erklärt, wie man Präferenzen im Browser simulieren kann. Wenn ihr die Rendering-Einstellung bei euch simuliert, dann würde der Cover-Block nach der Änderung der Deckkraft so aussehen:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Ist das nicht viel besser zu lesen? Die Deckkraft zu ändern, wenn jemand eine geringere Transparenz bevorzugt, ist ziemlich einleuchtend. Aber wie bei jeder anderen Media-Query könnt ihr auch hier beliebige CSS-Eigenschaften verwenden. Anstatt also die Deckkraft zu ändern, könntet ihr auch das Element ändern.
Wie wäre es z.B. damit, den Text unterhalb des Bildes ohne Transparenz und mit schwarzem Text auf weißem Hintergrund zu platzieren? Oder wir richten den Text neben dem Bild aus. Seid kreativ und macht eure Inhalte für Menschen mit unterschiedlichen Präferenzen und Bedürfnissen besser lesbar.
Fazit
Es gibt so viele CSS-Eigenschaften, die unbekannt oder noch nicht weit verbreitet sind. Diese spezielle Eigenschaft kann bereits in Chromium-Browsern verwendet werden und Firefox-Benutzer können ein Flag setzen, um sie zu verwenden. Wenn ihr Windows 10/11, macOS oder iOS verwenden, können ihr diese Präferenz ebenfalls bereits einstellen, wie in der Dokumentation erklärt wird. Angesichts der bereits guten Betriebssystem-Unterstützung würde es mich überraschen, wenn diese neue Media-Query noch lange experimentell bleiben würde.