Einer der Werte der @media-Anweisung, um benutzerdefinierte Einstellungen zu überprüfen.
Wenn diese Funktion aktiviert ist, werden die Farben auf der Webseite erzwungen, sich entsprechend den Benutzereinstellungen zu ändern, z.B. bei kontrastreichen Themen. Dies verbessert den Kontrast und die Lesbarkeit des Textes und erleichtert Menschen mit Sehbehinderungen oder anderen visuellen Beeinträchtigungen die Navigation und Interaktion mit der Website.
👴 In älteren Browser-Versionen wird "forced-colors" kaum unterstützt.
Inhaltsverzeichnis:
<button class="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="button-icon"
>
<path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/>
<path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/>
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/>
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/>
<path d="M8.65 22c.21-.66.45-1.32.57-2"/>
<path d="M14 13.12c0 2.38 0 6.38-1 8.88"/>
<path d="M2 16h.01"/>
<path d="M21.8 16c.2-2 .131-5.354 0-6"/>
<path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/>
</svg>
<span class="visually-hidden">
Anmeldung per Fingerabdruck
</span>
</button>
@media (forced-colors: active) {
.button-icon {
stroke: #ffffff;
}
}
Wenn Sie sich die Demo im Modus "Forced Colors" ohne und mit der Richtlinie ansehen, bleibt das Fingerabdrucksymbol im ersten Fall schwarz (#000000), im zweiten Fall wird es weiß wie die Schaltfläche.
Es gibt zwei Werte:
Normalerweise ersetzen Browser Farben im Hochkontrastmodus automatisch, daher ist forced-colors nur in seltenen Fällen sinnvoll:
Wenn die Farbe wichtig ist, um den Kontext zu verstehen. Zum Beispiel für Farbpaletten in Bekleidungsgeschäften.
Verwenden Sie forced-colors nur, wenn es wirklich notwendig ist. Überschreiben Sie keine Farben oder andere Stile im Modus forced-colors, damit die Benutzeroberfläche der Website immer gleich aussieht.
Liste der CSS-Eigenschaften, deren Werte automatisch mit den Systemeinstellungen überschrieben werden:
Es gibt auch Eigenschaften, deren Werte im erzwungenen Farbmodus zurückgesetzt werden: accent-color wird auf auto gesetzt, box-shadow und text-shadow auf none, background-image auf none, wenn als Wert nicht die Funktion url() angegeben wird, color-scheme auf light dark.
Browser ersetzen keine Farben durch systemeigene Farben, wenn die Eigenschaft forced-color-adjust mit dem Wert none verwendet wird. Diese Eigenschaft ist beispielsweise nützlich, um zu verhindern, dass wichtige Farben im eingeschränkten Farbmodus ersetzt werden.
.important-specific-element {
forced-color-adjust: none;
}
Wenn eine Farbe aus irgendeinem Grund nicht durch die gewünschte Farbe ersetzt werden kann, verwenden Sie systemeigene (dynamische) Farben. Zum Beispiel ButtonText für Schaltflächen, CanvasText für normalen Text, LinkText für Links oder HighlightText für hervorgehobenen Text.
forced-colors kann mit einem anderen Wert der @media-Direktive - prefers-contrast - kombiniert werden. Dieser Wert steuert die Kontrasteinstellungen im System, die erhöht oder verringert werden können. In diesem Fall können Browser erkennen, welchen Modus von forced-colors der Benutzer gewählt hat - Hochkontrast oder Niedrigkontrast.
@media (forced-colors: active) and (prefers-contrast: less) {
/* styles */
}
Es ist auch möglich, forced-colors zusammen mit prefers-color-scheme zu verwenden. In diesem Fall können die Stile speziell für den hellen oder dunklen Modus der erzwungenen Farben angepasst werden.
Ein Beispiel für den dunklen und hellen Modus von forced-colors:
@media (forced-colors: active) and (prefers-color-scheme: dark) {
/* styles */
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
/* styles */
}
Um die Benutzeroberfläche im Forced-Colors-Modus zu testen, können Sie entweder den Browser verwenden oder diesen Modus im System aktivieren.
In Chrome befindet sich die Emulation von Forced Colors auf der zusätzlichen Registerkarte „Rendering“ in den Entwicklertools. Um dorthin zu gelangen, öffnen Sie die Liste der zusätzlichen Einstellungen (die Schaltfläche mit den drei Punkten neben dem Schließen-Button), erweitern Sie die Liste „Weitere Tools“ und finden Sie die Dropdown-Liste „Emulate media feature forced-colors“.
In Betriebssystemen finden Sie den Modus "Erzwungene Farben" im Bereich "Barrierefreiheit und Eingabehilfen".
Der Modus "Erzwungene Farben" schränkt die Anzahl der Farben ein, um die Lesbarkeit des Textes zu verbessern, indem der Kontrast zwischen Text und Hintergrund verändert wird. Es werden hauptsächlich Farben mit hohem Kontrast verwendet. In diesem Modus werden die Farben sowohl im System als auch auf Webseiten automatisch geändert.
Wenn der Browser erfährt, dass der Modus "forced-colors" ausgewählt wurde, schränkt er die Farbpalette auf eine kleine Anzahl von Farben ein. Mit forced-colors können Sie die Unterstützung dieses Modus auf einer Website flexibler konfigurieren.
Ein weiterer Wert der @media-Direktive - ms-high-contrast - ist ähnlich wie forced-colors. Er ist veraltet und wird nur noch zur Unterstützung des Hochkontrastmodus im Internet Explorer verwendet.