Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Viele Layouts sind kontrastarm gestaltet und bauen somit gestalterisch Barrieren auf. Menschen die z. B. aufgrund von Kurzsichtigkeit nicht gut sehen können, bevorzugen kontrastreichere Layouts. Auch Personen die situativ eingeschränkt sind – zum Beispiel, da sie aufgrund von Sonneneinstrahlung zeitweise schlecht sehen können – freuen sich über stärkere Kontraste.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Der Kontrast-Modus als Ergänzung barrierefreier Layouts

Grundsätzlich sollten wir in unserem Design-Prozess ohnehin dafür sorgen, dass Layouts barrierefrei gestaltet werden. Das beinhaltet u.a. bereits gewisse Kontrastverhältnisse zwischen Text und Hintergrund.

Doch eventuell möchten wir sogar einen zusätzlichen Kontrast-Modus integrieren, der ein- und ausgeschaltet werden kann.

Der von uns technisch umgesetzter Museum-Guide für die Ausstellung »Unser Land – 75 Jahre NRW« nutzt einen Kontrastmodus

Mit dem CSS Media Query prefers-contrast können wir diesen Modus aktivieren. Die Abfrage reagiert u.a. auf die Einstellungen im Betriebssystem und ist vergleichbar mit dem Dark Mode, der ebenfalls über eine Medienabfrage gesteuert wird.

Syntax und Optionen

Die Schreibweise des Media Queries ist simpel und folgt der üblichen Syntax.

@media (prefers-contrast: more) {
  /* CSS Code wenn stärkere Kontraste gewünscht sind */ 
}

Mit prefers-contrast wird der Kontrastmodus abgefragt. Es stehen drei Werte zur Verfügung:

  • no-preference (keine Präferenz)
  • more (starke Kontraste)
  • less (geringe Kontraste)

In Abhängigkeit zum eingestellten Modus kann dann das Layout umgefärbt werden.

Vorlieben für Kontraste mit Media Queries steuern

Das folgende Beispiel zeigt, wie im Mac-Betriebssystem (Bedienungshilfen → Anzeige) die Einstellung »Kontrast erhöhen« aktiviert wird. Das Layout im Browser reagiert entsprechend.

Beispiel für das Umschalten zwischen Standard- und Kontrast-Modus unter Mac OS.

Der folgende Code wurde für das oben gezeigte Beispiel verwendet.

.element {
  background: lightgrey;
  color: darkgray;
}

@media (prefers-contrast: more) {
  .element {
    background: black;
    color: white;
  }
}

Browser-Support

Den aktuellen Browser-Support entnehmt ihr bitte der Website caniuse.com.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →