Por que você precisa do contrast-color()

Quando construímos interfaces acessíveis, um dos maiores desafios é garantir contraste suficiente entre texto e fundo. As diretrizes WCAG exigem uma taxa de contraste de pelo menos 4.5:1 para texto normal, e escolher cores manualmente pode ser um sacrifício.

A nova função CSS contrast-color() resolve isso automaticamente: ela retorna preto ou branco, dependendo de qual tem mais contraste com a cor de fundo. Ou seja, você não precisa mais definir cores de texto separadas para cada tema.

Como funciona

A sintaxe é simples:

/* Usando uma variável CSS */
.elemento {
  background-color: var(--cor-fundo);
  color: contrast-color(var(--cor-fundo));
}

A função recebe apenas uma cor e resolve para branco ou preto, com base no maior contraste. Se houver empate, o padrão é branco.

CSS contrast-color() function example with a card component showing black and white text on colored backgrounds Development Concept Image

Exemplo prático: simplificando a gestão de temas

Imagine que você tem vários temas com fundos diferentes. Em vez de definir uma cor de texto para cada, use contrast-color() para fazer isso automaticamente:

:root {
  --fundo-primario: #2d5a27;
  --fundo-secundario: #d1c4e9;
  --fundo-terciario: #ff5722;
}

.primario {
  color: contrast-color(var(--fundo-primario));
  background-color: var(--fundo-primario);
}

.secundario {
  color: contrast-color(var(--fundo-secundario));
  background-color: var(--fundo-secundario);
}

.terciario {
  color: contrast-color(var(--fundo-terciario));
  background-color: var(--fundo-terciario);
}

Agora, se você mudar a cor de fundo, a cor do texto se ajusta sozinha, mantendo o contraste adequado.

Adicionando um fallback para navegadores sem suporte

Como o suporte dos navegadores ainda é limitado, é bom ter um fallback. Use a regra @supports para aplicar a função apenas quando houver suporte:

.card {
  background-color: var(--cor-fundo);
  color: white; /* fallback */
}

@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--cor-fundo));
  }
}

Web developer using browser dev tools to test CSS color contrast for accessibility Coding Session Visual

Limitações e cuidados

Apesar de útil, contrast-color() tem algumas limitações:

  • Apenas preto ou branco: A função só retorna preto ou branco, o que pode não ser a melhor escolha de design em alguns casos. Por exemplo, em um fundo amarelo brilhante, preto funciona, mas em um roxo médio, branco pode ser agressivo.
  • Não considera tamanho da fonte: Os requisitos de contraste variam com o tamanho e peso do texto. A função não leva isso em conta, então você pode precisar de ajustes manuais.
  • Não funciona com imagens ou gradientes: contrast-color() só funciona com cores sólidas. Se você usa fundos com imagens ou gradientes, vai precisar de outra abordagem.

Por isso, use contrast-color() em casos simples, onde preto ou branco fazem sentido. Para designs mais complexos, considere definir cores manualmente ou aguardar evoluções da especificação.

Laptop displaying a design system with CSS variables and contrast-color() function Dev Environment Setup

Conclusão

contrast-color() é um passo à frente na automação da acessibilidade, mas não é uma solução mágica. Use com critério e sempre teste com usuários reais.

Para mais padrões de acessibilidade, confira nosso guia de design systems acessíveis e fique de olho nas novidades do CSS Color Module Level 5.

Próximos passos

  • Teste contrast-color() em projetos pessoais para entender seu comportamento.
  • Acompanhe o suporte dos navegadores e a evolução da especificação.
  • Explore outras funções de cor do CSS, como color-mix() e color-contrast().
Este conteúdo foi elaborado com o auxílio de ferramentas de IA, com base em fontes confiáveis, e revisado pela nossa equipe editorial antes da publicação. Não substitui o aconselhamento de um profissional especializado.