prefers-contrast Media Feature: Barrierefreie Kontraststufen mit CSS steuern

1. Warum Nutzer unterschiedliche Kontrastbedürfnisse haben

Kontrastwahrnehmung ist keine binäre Eigenschaft. Menschen mit Sehschwäche, mit altersbedingter Makuladegeneration oder mit bestimmten neurologischen Bedingungen brauchen oft deutlich höheren Kontrast, um Text und Bedienelemente sicher zu unterscheiden. Umgekehrt empfinden manche Nutzer mit Reizverarbeitungsstörungen oder bei Migräne einen sehr hohen Kontrast als unangenehm grell und bevorzugen ein sanfteres, kontrastärmeres Erscheinungsbild. Das CSS Media Feature prefers-contrast macht genau diese Präferenz für Websites nutzbar, direkt aus den Systemeinstellungen des Betriebssystems.

Vor prefers-contrast war die einzige Möglichkeit, auf Kontrastbedürfnisse zu reagieren, ein manuell umschaltbarer High-Contrast-Modus innerhalb der Website selbst, den viele Nutzer nie fanden, weil er in einem Einstellungsmenü versteckt war. Mit prefers-contrast reagiert die Website automatisch auf eine bereits vom Nutzer getroffene, systemweite Entscheidung, ganz ohne zusätzlichen Klick. Das reduziert die Einstiegshürde für barrierefreies Design erheblich.

2. Syntax: more, less, custom und no-preference

Das Media Feature prefers-contrast kennt vier mögliche Werte. more signalisiert, dass der Nutzer erhöhten Kontrast wünscht, less signalisiert das Gegenteil, reduzierten Kontrast. Der Wert custom tritt auf, wenn das Betriebssystem eine benutzerdefinierte Kontrasteinstellung mit eigenen Farbwerten anbietet, die weder eindeutig "mehr" noch "weniger" ist. Fehlt jede Präferenz, liefert die Abfrage no-preference, was in den meisten CSS-Regelsätzen dem Standardverhalten ohne zusätzliche Anpassung entspricht.

Die Grundsyntax folgt dem bekannten Muster anderer Nutzerpräferenz-Media-Features: @media (prefers-contrast: more) { ... } gruppiert alle Regeln, die nur bei aktivierter Kontrastpräferenz greifen. Wichtig ist, dass prefers-contrast additiv gedacht werden sollte, als Verstärkung bestehender Regeln, nicht als komplett getrenntes Stylesheet. Das hält die Wartung überschaubar und verhindert, dass sich Kontrast-Anpassungen und Basisstile im Lauf der Zeit auseinanderentwickeln.

/* Base styles */
.card {
  border: 1px solid #e2e8f0;
  color: #334155;
  background: #ffffff;
}

/* Enhanced contrast: thicker borders, darker text */
@media (prefers-contrast: more) {
  .card {
    border: 2px solid #0f172a;
    color: #000000;
  }
}

/* Reduced contrast: softer palette for light sensitivity */
@media (prefers-contrast: less) {
  .card {
    border-color: #cbd5e1;
    color: #475569;
    background: #f8fafc;
  }
}

3. Welche Betriebssystem-Einstellungen prefers-contrast auslösen

Auf macOS aktiviert die Einstellung "Kontrast erhöhen" in den Bedienungshilfen unter Anzeige den Wert more für alle Browser des Systems. Windows bietet einen ähnlichen Schalter unter "Erleichterte Bedienung, Kontrastdesigns", der je nach gewähltem Design entweder more oder in bestimmten Konstellationen custom auslöst, da Windows-Kontrastdesigns eigene Farbpaletten mitbringen. Auf mobilen Geräten mit iOS und Android existieren vergleichbare Optionen unter den Bedienungshilfen-Einstellungen, die dieselbe Media-Query-Logik auslösen.

Ein wichtiger Praxishinweis: prefers-contrast wird von aktuellen Versionen aller großen Browser unterstützt, allerdings mit leicht unterschiedlicher Interpretation, was genau als "erhöhter Kontrast" auf Betriebssystemebene zählt. Entwickler sollten sich nicht darauf verlassen, dass more und custom in jedem Browser exakt dieselbe zugrunde liegende Systemeinstellung repräsentieren, sondern beide Werte in den eigenen Regeln gleichwertig behandeln, wo sinnvoll.

4. High-Contrast-Themes mit Custom Properties bauen

Der wartbarste Ansatz für prefers-contrast ist, Farbwerte konsequent über CSS Custom Properties zu definieren und diese innerhalb der Media Query neu zu setzen, statt jede einzelne Komponentenregel zu duplizieren. Ein zentrales Set an Variablen wie --text-color, --border-color und --focus-ring-color wird auf Root-Ebene definiert, jede Komponente referenziert ausschließlich diese Variablen. Innerhalb von @media (prefers-contrast: more) werden dieselben Variablennamen mit verstärkten Werten überschrieben, und jede Komponente reagiert automatisch, ohne eigene Kontrastlogik.

Dieses Muster reduziert den Wartungsaufwand für prefers-contrast drastisch, weil neue Komponenten die Kontrastanpassung automatisch erben, solange sie sich an die zentralen Custom Properties halten. Es verhindert außerdem den häufigen Fehler, dass bei einem Redesign einzelne Komponenten vergessen werden und dadurch inkonsistent auf die Nutzerpräferenz reagieren.

:root {
  --text-color: #334155;
  --border-color: #e2e8f0;
  --focus-ring-color: #93c5fd;
  --focus-ring-width: 2px;
}

@media (prefers-contrast: more) {
  :root {
    --text-color: #000000;
    --border-color: #000000;
    --focus-ring-color: #1d4ed8;
    --focus-ring-width: 3px;
  }
}

/* Every component simply consumes the variables */
.button, .input, .card {
  color: var(--text-color);
  border: var(--focus-ring-width) solid var(--border-color);
}
.input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

5. prefers-contrast versus forced-colors verstehen

Ein häufiges Missverständnis ist, prefers-contrast und forced-colors als dasselbe Feature zu behandeln. prefers-contrast ist eine reine Präferenzabfrage, die Website behält die volle Kontrolle über ihre Farbpalette und passt sie lediglich an, während bei aktiviertem forced-colors: active das Betriebssystem, meist der Windows Hochkontrastmodus, eine eigene, begrenzte Systempalette erzwingt und die meisten benutzerdefinierten Farben komplett überschreibt. prefers-contrast ist damit eine sanfte Designentscheidung, forced-colors ein hartes Systemverhalten.

In der Praxis bedeutet das: Eine Website kann prefers-contrast: more nutzen, um dunklere Ränder und stärkere Textfarben anzubieten, während sie zusätzlich mit eigenen forced-colors-Regeln dafür sorgt, dass die Bedienbarkeit auch dann erhalten bleibt, wenn Windows die Farben komplett übernimmt. Beide Media Features ergänzen sich, ersetzen sich aber nicht gegenseitig, und der genaue technische Vergleich beider Features würde den Rahmen dieses Artikels sprengen, verdient aber eine eigene, vertiefte Behandlung.

/* prefers-contrast: soft, opt-in enhancement, full color control retained */
@media (prefers-contrast: more) {
  .alert {
    border: 2px solid #7c3aed;
    color: #000000;
  }
}

/* forced-colors: system takes over the palette, use system keywords instead */
@media (forced-colors: active) {
  .alert {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }
}

6. Praktische Anwendung: Formulare und Fokus-Indikatoren

Formulare profitieren besonders stark von prefers-contrast, weil Eingabefelder mit schwachen, hellgrauen Rändern für Nutzer mit Sehschwäche oft kaum vom Hintergrund zu unterscheiden sind. Eine Kombination aus verstärktem Rand, dunklerer Beschriftung und deutlicherem Fokus-Indikator über @media (prefers-contrast: more) macht Formulare für genau diese Nutzergruppe erheblich benutzbarer, ohne das Design für alle anderen Nutzer zu verändern.

Fokus-Indikatoren sind ein zweiter kritischer Anwendungsbereich für prefers-contrast. Ein dünner, blasser Fokus-Ring, der bei normalem Kontrast noch akzeptabel ist, wird bei aktivierter Kontrastpräferenz oft komplett übersehen. Ein verbreitertes outline mit höherem Farbkontrast zum Hintergrund, gesteuert über dieselbe Custom-Property-Strategie wie im vorherigen Abschnitt, stellt sicher, dass Tastaturnutzer mit erhöhtem Kontrastbedarf jederzeit erkennen, welches Element aktuell fokussiert ist.

7. prefers-contrast in Browsern und DevTools testen

Chrome und Edge DevTools bieten über das Rendering-Panel eine direkte Emulation von prefers-contrast: Unter "Rendering" lässt sich "Emulate CSS media feature prefers-contrast" auf more, less oder custom setzen, ohne die tatsächliche Betriebssystemeinstellung zu ändern. Das beschleunigt die Entwicklung erheblich, weil kein Wechsel in die Systemeinstellungen und kein Neustart des Browsers nötig ist, um verschiedene Kontraststufen zu testen.

Firefox bietet eine vergleichbare Emulation aktuell nicht in gleicher Tiefe an, weshalb ein zusätzlicher manueller Test mit tatsächlich aktivierter Systemeinstellung, etwa "Kontrast erhöhen" unter macOS, vor jedem Release sinnvoll bleibt. Automatisierte visuelle Regressionstests können prefers-contrast über die Emulations-API von Playwright oder Puppeteer abdecken, was in CI-Pipelines eine konsistente Prüfung ohne manuellen Eingriff ermöglicht.

8. Kombination mit prefers-color-scheme und reduced-motion

prefers-contrast lässt sich in einer einzigen Media Query mit anderen Nutzerpräferenzen kombinieren, zum Beispiel @media (prefers-color-scheme: dark) and (prefers-contrast: more), um speziell für Nutzer mit dunklem Farbschema und gleichzeitig erhöhtem Kontrastbedarf eine eigene Palette bereitzustellen. Diese Kombination ist besonders relevant, weil ein im hellen Modus gut funktionierender High-Contrast-Wert im Dark Mode oft völlig andere Farbwerte braucht, um dieselbe wahrgenommene Kontraststärke zu erreichen.

Auch die Kombination mit prefers-reduced-motion ist sinnvoll, wenn Kontrastanpassungen mit Übergangseffekten wie Farbwechsel-Animationen verbunden sind. Ein Nutzer, der sowohl erhöhten Kontrast als auch reduzierte Bewegung wünscht, sollte die Kontraständerung ohne animierten Übergang direkt sehen. Die Media Queries lassen sich beliebig verschachteln, solange die CSS-Spezifität der resultierenden Selektoren im Blick behalten wird.

9. prefers-contrast im Vergleich zu anderen A11y Media Features

Mehrere CSS Media Features adressieren unterschiedliche Aspekte von Barrierefreiheit, prefers-contrast ist nur eines davon.

Der zentrale Unterschied zwischen prefers-contrast und den meisten anderen Features in dieser Tabelle ist der Grad an Kontrolle, den der Entwickler behält. Während forced-colors die Website in eine systemseitig vorgegebene Palette zwingt, bleibt bei prefers-contrast die vollständige gestalterische Freiheit erhalten, lediglich die Ausgangswerte werden auf Basis der Nutzerpräferenz angepasst. Das macht prefers-contrast zum flexibelsten, aber auch am meisten von der eigenen Sorgfalt abhängigen Werkzeug in dieser Liste.

10. Zusammenfassung

prefers-contrast erkennt die Kontrastpräferenz eines Nutzers direkt aus den Betriebssystemeinstellungen und stellt sie CSS über die Werte more, less, custom und no-preference zur Verfügung. Der wartbarste Umsetzungsweg führt über zentrale Custom Properties, die innerhalb der Media Query neu gesetzt werden, statt jede Komponentenregel einzeln zu duplizieren. Formulare und Fokus-Indikatoren profitieren besonders stark von dieser Anpassung.

Wichtig ist die klare Abgrenzung zu forced-colors: prefers-contrast ist eine sanfte, vollständig vom Entwickler kontrollierte Designentscheidung, während forced-colors ein hartes Systemverhalten mit erzwungener Palette darstellt. Beide Features lassen sich kombinieren, adressieren aber unterschiedliche Nutzerszenarien und verdienen jeweils eigene, sorgfältige Tests in DevTools und mit echten Systemeinstellungen.

11. FAQ: prefers-contrast Media Feature