CSS High Contrast Mode
Erzwungene Farben ändern Ihre Regeln
Fließtext, Textlinks und Kartenkanten: hier greift das Kontrastdesign zuerst.
Farbwechsel unter Last
Was bleibt, wenn der Browser Ihre Farben ersetzt?
Vergleichen Sie dieselbe Oberfläche vor und nach forced-colors: active.
Autorenfarben
Die gestaltete Karte
- Schatten zeichnet die Kartenkante.
- Violett kennzeichnet Link und Aktion.
- Eine getönte Fläche trägt den Status.
forced-colors: active
- Farbe
- Systemrolle
- Schatten
none- Fokus
Highlight
Kontrastdesign
Die belastbare Struktur
- Eine echte Kontur ersetzt den entfernten Schatten.
- Unterstreichung unterscheidet den Link ohne Farbe.
- Text und Zeichen erhalten die Statusaussage.
Überlebensplan
Fünf Dinge, die Sie absichern
Text
CanvasText auf Canvas
Link
LinkText plus Unterstreichung
Kante
Rahmen statt reinem box-shadow
Fokus
Kontur mit Highlight
Status
Zeichen und Text zusätzlich zur Farbe
Zwei Testwege
Emulation prüfen, Windows bestätigen
Nur ein echtes Kontrastdesign zeigt das gewählte Farbpaar. Die Emulation prüft zuverlässig, ob Ihr CSS-Zweig greift.
Echtes Systemsignal
Windows 11
- Einstellungen
- Barrierefreiheit
- Kontrastdesigns
- Design wählen und Übernehmen
Browser melden jetzt forced-colors: active. Der Kurzbefehl linke Alt-Taste + linke Umschalttaste + Druck schaltet das gewählte Design um.
CSS-Zweig emulieren
Chrome unter macOS
- Entwicklerwerkzeuge
- Befehlspalette: „Show Rendering“
- Emulate CSS media feature
forced-colors forced-colors: activewählen
„Kontrast erhöhen“ in macOS ist eine eigene Anzeigeeinstellung und aktiviert forced-colors nicht. Nutzen Sie hier die Browser-Emulation.
Kopierbarer CSS-Zweig
Nur ergänzen, was sonst verschwindet
.karte a {
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (forced-colors: active) {
.karte {
border: 1px solid CanvasText;
box-shadow: none;
}
.karte a:focus-visible {
outline: 3px solid Highlight;
outline-offset: 3px;
}
.karte__symbol {
fill: currentColor;
}
}So prüfen Sie die Seite
- Kanten: Karten und Felder bleiben ohne Schatten erkennbar.
- Links: Sie unterscheiden sich auch ohne ihre Autorenfarbe.
- Fokus: Der Ring ist auf jeder Systemfläche sichtbar.
- Symbole: SVGs folgen
currentColoroder bleiben Bilder. - Status: Text oder Zeichen tragen dieselbe Aussage wie die Farbe.
- Rückweg: Nach dem Abschalten funktioniert das normale Design weiter.
Aus dem Prüfbericht
Zwei Regeln, die der Modus nicht löst
Kritisch Blasse Schrift bleibt auch ohne Kontrastdesign blass Regel color-contrast
Das Kontrastdesign ist keine Reparatur. 1,17:1 zwischen Schrift und Fläche brauchen im normalen Design ein Farbpaar mit 4,5:1.
Kritisch Der Link im Absatz verliert seine Farbe Regel link-in-text-block
Das Kontrastdesign setzt LinkText. Ohne Unterstreichung bleibt nur die Systemfarbe, um den Link vom übrigen Satz zu trennen.
Zum Mitnehmen
Das Kontrastdesign, korrigiert
Ein Farbpaar im normalen CSS, ein Block für erzwungene Farben.
Korrektur in 2 Schritten ansehen
Das Farbpaar unabhängig vom Modus setzen
Der Block für forced-colors greift nur bei aktivem Kontrastdesign. Die Bildunterschrift muss auch im normalen Design 4,5:1 erreichen.
KorrekturvergleichSchritt 1 · CSS Vorher
.bildunterschrift { color: #58635f; background: #626e69; }Nachher
.bildunterschrift { color: #ffffff; background: #626e69; }Markierte Zeilen wurden geändert
So prüfen Sie es Prüfen Sie beide Farben in einem Kontrastrechner, bevor Sie das Kontrastdesign einschalten.
Kanten mit Systemfarben nachziehen
Der Schatten bleibt für das normale Design. Bei erzwungenen Farben ersetzt eine Kontur in CanvasText die verlorene Kante.
KorrekturvergleichSchritt 2 · CSS Vorher
.karte { box-shadow: 0 2px 6px #00000033; }Nachher
.karte { box-shadow: 0 2px 6px #00000033; } @media (forced-colors: active) { .karte { border: 1px solid CanvasText; } }Markierte Zeilen wurden geändert
So prüfen Sie es Schalten Sie das Windows-Kontrastdesign ein. Die Karte behält eine sichtbare Kante.