Introduction

J'ai récemment reçu un rapport de bug dans lequel une icône SVG ne s'affichait pas correctement en mode contraste élevé. Dans cet article, je partagerai la solution qui a fonctionné pour moi.

Solution

En mode contraste élevé, j'ai utilisé la couleur du système CanvasText pour ajuster automatiquement la couleur de l'icône.

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

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

Dans mon cas, j'ai initialement utilisé currentColor pour hériter de la couleur de l'élément parent. Cependant, en mode contraste élevé, je voulais définir la couleur d'arrière-plan sur CanvasText universellement au sein de l'élément enfant, j'ai donc appliqué ce changement.

Qu’est-ce que CanvasText ?

CanvasText fait référence à la couleur du texte utilisée pour le contenu de l'application ou les documents. Il s'ajuste automatiquement pour offrir le meilleur contraste par rapport à la couleur d'arrière-plan du système.

En utilisant CanvasText, vous vous assurez que le texte et les icônes restent visibles même lorsque l'utilisateur active le mode contraste élevé. De plus, étant donné que CanvasText s'adapte en fonction du thème du système, il fonctionne bien avec les modes sombre et clair.

Dans mon cas, la couleur d'arrière-plan de l'icône était initialement définie sur noir. Cependant, lorsque l’arrière-plan devient noir en mode contraste élevé, l’icône devient invisible. Changer la couleur en blanc l'a rendu à nouveau visible, mais pour gérer cela de manière cohérente dans tous les scénarios, j'ai choisi d'utiliser la couleur système CanvasText.

Références

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