Einführung

Ich habe kürzlich einen Fehlerbericht erhalten, bei dem ein SVG-Symbol im Modus mit hohem Kontrast nicht korrekt angezeigt wurde. In diesem Artikel teile ich die Lösung, die für mich funktioniert hat.

Lösung

Im Modus mit hohem Kontrast habe ich die CanvasText-Systemfarbe verwendet, um die Farbe des Symbols automatisch anzupassen.

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
  ...
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

In meinem Fall habe ich zunächst currentColor verwendet, um die Farbe vom übergeordneten Element zu erben. Allerdings wollte ich im Hochkontrastmodus die Hintergrundfarbe im untergeordneten Element allgemein auf CanvasText setzen, also habe ich diese Änderung übernommen.

Was ist CanvasText?

CanvasText bezieht sich auf die Textfarbe, die für Anwendungsinhalte oder Dokumente verwendet wird. Es passt sich automatisch an, um den besten Kontrast zur Hintergrundfarbe des Systems zu bieten.

Durch die Verwendung von CanvasText stellen Sie sicher, dass Text und Symbole auch dann sichtbar bleiben, wenn der Benutzer den Modus mit hohem Kontrast aktiviert. Da sich CanvasText außerdem an das Thema des Systems anpasst, funktioniert es sowohl im dunklen als auch im hellen Modus gut.

In meinem Fall war die Hintergrundfarbe des Symbols zunächst auf Schwarz eingestellt. Wenn der Hintergrund jedoch im Hochkontrastmodus schwarz wurde, wurde das Symbol unsichtbar. Durch die Änderung der Farbe auf Weiß wurde es wieder sichtbar, aber um dies in allen Szenarien konsistent zu handhaben, habe ich mich für die Systemfarbe CanvasText entschieden.

Referenzen

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color