# contrast-color(): contraste de texto com CSS puro
> A função CSS contrast-color() retorna automaticamente preto ou branco para garantir contraste de cores, melhorando a acessibilidade. Conheça a novidade!
URL: https://dpw.dev/acessibilidade/css-contrast-color/
Publicado em: 2026-03-19
Categoria: acessibilidade
Autor: Tárcio Zemel
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.
> Artigo baseado em [Automated Accessible Text with contrast-color()](https://una.im/contrast-color).
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 `` válido.
```css
/* 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.
> **Nota:** **E quanto a cores personalizadas?** A versão original dessa especificação incluía a capacidade de testar uma lista de cores personalizadas, além de escolher seu próprio algoritmo de contraste (porque o APCA e outros algoritmos de contraste "melhores", como o WCAG 3.0, estavam em progresso).
>
> No fim, após muito debate, essas funcionalidades foram descartadas em favor de uma API mais simples para conseguir lançar o recurso.
## 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 é:
```css
.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:
```css
: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:
```css
.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
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml