Introdução

Recebi recentemente um relatório de bug em que um ícone SVG não era exibido corretamente no modo de alto contraste. Neste artigo, compartilharei a solução que funcionou para mim.

Solução

No modo de alto contraste, usei a cor do sistema CanvasText para ajustar automaticamente a cor do ícone.

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

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

No meu caso, inicialmente usei currentColor para herdar a cor do elemento pai. No entanto, no modo de alto contraste, eu queria definir a cor de fundo como CanvasText universalmente dentro do elemento filho, então apliquei essa alteração.

O que é CanvasText?

CanvasText refere-se à cor do texto usada para conteúdo ou documentos do aplicativo. Ele se ajusta automaticamente para fornecer o melhor contraste em relação à cor de fundo do sistema.

Ao usar o CanvasText, você garante que o texto e os ícones permaneçam visíveis mesmo quando o usuário ativa o modo de alto contraste. Além disso, como o CanvasText se adapta com base no tema do sistema, ele funciona bem com os modos claro e escuro.

No meu caso, a cor de fundo do ícone foi inicialmente definida como preta. No entanto, quando o fundo ficou preto no modo de alto contraste, o ícone ficou invisível. Alterar a cor para branco tornou-o visível novamente, mas para lidar com isso de forma consistente em todos os cenários, optei por usar a cor do sistema CanvasText.

Referências

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