contrast-color(): contraste de texto com CSS puro

Muitos sabiam que uma das coisas que sempre esteve faltando na web é uma função nativa de contraste de cores. Isto é, até agora. A nova função de CSS contrast-color() estará disponível em todos os navegadores modernos em breve.

Quem usa Sass há mais tempo, sabe que há um framework chamado Compass que vinha com uma função padrão contrasted(). E indo um passo além, é possível escrever os próprios algoritmos de contraste no Sass.

Muitos ansiavam uma maneira de garantir contraste de cores no CSS e já era hora de termos essa funcionalidade no CSS nativo.

TLDR; contrast-color() recebe qualquer cor e retorna black ou white — o que fornecer o maior contraste em relação à cor de entrada.

A sintaxe

contrast-color() recebe um único argumento: qualquer valor CSS <color> válido.

/* Retorna: white */
color: contrast-color(purple);

/* Retorna: black */
color: contrast-color(yellow);

/* Retorna: o que tiver maior contraste entre black e white */
color: contrast-color(var(--brand-color));

Por baixo dos panos, o navegador calcula a taxa de contraste de white e black em relação à cor de entrada para atender à taxa mínima de contraste de 4.5:1 para texto normal do WCAG 2.1 AA.

Se houver empate (como em um cinza perfeitamente médio), retorna white. Essa funcionalidade obviamente funciona melhor com fundos que não sejam tons médios.

Exemplo de contraste de texto com CSS puro usando contrast-color()

Imagine que você tem um design system com botões de diferentes cores que possuem texto por cima. Você precisa garantir que esse texto seja sempre acessível, mas agora basta uma única linha de código para sempre escolher uma cor de texto contrastante.

Tudo o que é preciso para fazer para funcionar é:

.button {
  background-color: var(--brand-color);
  color: contrast-color(var(--brand-color));
}

Dark mode com prefers-color-scheme

Você pode combinar contrast-color() com media queries para obter automaticamente texto legível tanto no modo claro, quanto no escuro:

:root {
  --bg: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

body {
  background-color: var(--bg);
  color: contrast-color(var(--bg));
}

Agora não é mais preciso gerenciar uma segunda propriedade de cor para ambos os temas. Basta uma única declaração contrast-color().

Estados de hover e paletas geradas

Mesmo em situações em que as cores são geradas algoritmicamente (via color-mix() etc.), contrast-color() mantém a cobertura e, novamente, reduz a repetição de código.

Por exemplo:

.card {
  --bg: oklch(0.6 0.15 250);
  background: var(--bg);
  color: contrast-color(var(--bg));

  &:hover {
    --bg: color-mix(in oklch, oklch(0.6 0.15 250) 40%, white);
  }
}

Conclusão

Na data de publicação deste artigo, o suporte para contrast-color() ainda não está disponível em todos os navegadores modernos.

contrast-color() é um bom começo para tornar as paletas de cores CSS mais dinâmicas.

Embora a versão atual seja simples, com o tempo, será possível ter funcionalidades mais avançadas, como ir além de preto e branco como cores de contraste.

Por enquanto, se você está criando temas ou qualquer coisa com cores dinâmicas (esperamos que esteja), isso vai economizar bastante tempo e tornar o contraste de cores acessível um pouco mais fácil.

Leitura complementar:

• CSS Color Level 5 Spec: contrast-color()
• MDN: contrast-color()
• WCAG 2.2: Contrast Minimum
• APCA Contrast Calculator