CSS forced colors
Dieselbe Seite mit Systemfarben
Fließtext, Textlink, Kartenkante: hier greifen erzwungene Farben zuerst.
Palette unter Nutzerkontrolle
Was der Browser neu zeichnet
Erzwungene Farben ersetzen die Autorenpalette beim Zeichnen. Form, Text und Semantik müssen den Wechsel tragen.
colorCanvasTextbackground-colorCanvasbox-shadownoneborder-stylebleibtSystemfarben kommen in Rollenpaaren
Nutzen Sie das Paar des Elements. Ein eigener Farbwert neben einer Systemfarbe kann keinen verlässlichen Kontrast bilden.
Ein Block ersetzt Farbe nicht durch Vermutung
Die Semantik nativer Elemente hilft dem Browser bei der Wahl. Ein div role="button" erhält nicht automatisch die Farbrolle eines nativen button.
@media (forced-colors: active) {
.karte {
color: CanvasText;
background: Canvas;
border: 2px solid CanvasText;
box-shadow: none;
}
.karte a {
color: LinkText;
text-decoration: underline;
}
.karte button {
color: ButtonText;
background: ButtonFace;
border: 2px solid ButtonText;
}
.karte :focus-visible {
outline: 3px solid Highlight;
outline-offset: 3px;
}
.farbschluessel {
forced-color-adjust: none;
}
}CanvasTextersetzt Autorfarben mit einer Systemrolleborderzeichnet die Kante, wenn der Schatten entfälltLinkTextarbeitet mit der sichtbaren UnterstreichungHighlightzeichnet den Fokus als Form, nicht nur als Füllungforced-color-adjust: none ist die Ausnahme
Verwenden Sie den Opt-out nur, wenn die konkrete Farbe Information trägt und Sie Kontrast, Beschriftung und Zustände selbst für die erzwungene Darstellung sichern. Für Layoutflächen, Links und Bedienelemente bleibt auto die richtige Basis.
So prüfen Sie es
- Öffnen Sie in Chrome DevTools den Bereich Rendering und setzen Sie Emulate CSS media feature forced-colors auf
forced-colors: active. - Prüfen Sie Kanten, Fokus, Links, Auswahl und Fehlermeldungen. Kein Zustand darf nur an einer verschwundenen Füllung oder einem Schatten hängen.
- Testen Sie zusätzlich mit einem echten Kontrastdesign unter Windows. Die Emulation zeigt den Medienzustand, ersetzt aber nicht die nutzergewählte Palette.
- Kontrollieren Sie jeden Opt-out. Ohne zwingende Farbinformation entfernen Sie
forced-color-adjust: none.
Aus dem Prüfbericht
Zwei Regeln, zwei Darstellungen
Kritisch Eigene Grautöne bestehen schon ohne Systemfarben nicht Regel color-contrast
Text und Fläche mit 1,17:1 fallen im normalen Design durch. Setzen Sie ein Paar mit mindestens 4,5:1, bevor Sie den Kontrastmodus bedienen.
Kritisch Der Link im Absatz trägt nur Farbe Regel link-in-text-block
Erzwungene Farben ersetzen Ihr Linkblau durch LinkText. Ohne Unterstreichung bleibt der Link im Absatz schwer zu finden.
Zum Mitnehmen
Die Systemfarben, korrigiert
Ein Farbpaar, eine Linie, ein Block für erzwungene Farben.
Korrektur in 3 Schritten ansehen
Das Farbpaar auf 4,5:1 bringen
Der Kontrastmodus ersetzt nicht jede Fläche. Ein Paar, das schon vorher 4,5:1 erreicht, bleibt in beiden Darstellungen lesbar.
KorrekturvergleichSchritt 1 · CSS Vorher
.hinweis { color: #58635f; background: #626e69; }Nachher
.hinweis { color: #ffffff; background: #626e69; }Markierte Zeilen wurden geändert
So prüfen Sie es Prüfen Sie beide Werte in einem Kontrastrechner. Das Verhältnis liegt über 4,5:1.
Den Textlink unterstreichen
Bei erzwungenen Farben wird Ihre Linkfarbe durch LinkText ersetzt. Die Unterstreichung bleibt und hält den Link im Absatz erkennbar.
KorrekturvergleichSchritt 2 · CSS Vorher
p a { color: #3b2bbd; text-decoration: none; }Nachher
p a { color: #3b2bbd; text-decoration: underline; }Markierte Zeilen wurden geändert
So prüfen Sie es Schalten Sie den Bildschirm auf Graustufen. Der Link ist im Satz noch zu sehen.
Schatten durch eine Kontur ersetzen
Schatten werden bei erzwungenen Farben nicht gezeichnet. Eine Kontur in CanvasText hält die Kante der Karte sichtbar.
KorrekturvergleichSchritt 3 · CSS Vorher
@media (forced-colors: active) { .karte { box-shadow: 0 2px 6px #00000033; } }Nachher
@media (forced-colors: active) { .karte { border: 1px solid CanvasText; } }Markierte Zeilen wurden geändert
So prüfen Sie es Schalten Sie in Windows ein Kontrastdesign ein. Die Karte hat weiterhin eine Kante.