Acessibilidade de cor: contraste e daltonismo, explicado de forma simples
Um design pode ser lindo e ainda assim ilegível para parte do seu público. A acessibilidade de cor se resume a duas coisas fáceis de conferir: contraste suficiente para o texto ser lido, e não depender só da cor para transmitir informação. As duas podem ser verificadas em poucos minutos.
1. Contraste: para o texto ser lido
O contraste mede o quanto o texto se diferencia do fundo. É expresso como uma razão, de 1:1 (invisível) a 21:1 (preto sobre branco). As diretrizes de acessibilidade WCAG fixam mínimos:
- Texto normal: pelo menos 4.5:1 (nível AA), ou 7:1 para AAA (mais rigoroso).
- Texto grande (títulos): basta 3:1 (AA).
O erro típico é texto cinza claro sobre fundo branco: parece "elegante" mas muita gente não lê. Antes de dar uma combinação por boa, meça a razão com um verificador de contraste: ele diz se passa AA/AAA para texto normal e grande.
2. Daltonismo: não dependa só da cor
Cerca de 8% dos homens tem algum tipo de daltonismo (e um percentual menor de mulheres). Os casos mais comuns confundem vermelho e verde. Isso quebra padrões que damos por óbvios:
- Um gráfico que distingue categorias só por cores vermelho/verde.
- Um formulário onde o erro é marcado "deixando o campo vermelho".
- Um semáforo de estado (verde/amarelo/vermelho) sem texto nem ícones.
A regra de ouro: a cor nunca deveria ser o único sinal. Some sempre algo mais —um ícone, uma palavra, um padrão, um brilho diferente— para a informação ser entendida mesmo que a cor não seja percebida.
Como revisar seu design em 2 passos
- Contraste: meça o texto contra o fundo com o verificador; deve passar AA no mínimo.
- Daltonismo: simule como seu design aparece com protanopia, deuteranopia, tritanopia e em escala de cinza. Se algo deixa de ser entendido, essa informação dependia só da cor.
Nós testamos: o contraste com número, não no olho
Combinamos uma cor de texto e uma de fundo e a ferramenta devolveu a razão de contraste WCAG (por exemplo 11.98:1) com os selos AA e AAA em verde ou vermelho conforme cumpra. É a diferença entre "acho que dá para ler" e saber pelo padrão.
Para acessibilidade real também há uma simulação de daltonismo: você vê a paleta como alguém com visão de cor diferente percebe, e assim detecta combinações que se confundem. Tudo local.
Boas práticas rápidas
- Texto principal sempre com contraste alto; reserve os cinzas claros para detalhes secundários, não para leitura.
- Estados (sucesso/erro) com ícone + texto, não só cor.
- Em gráficos, combine cor com rótulos, padrões ou formas.
- Teste sua paleta em escala de cinza: se tudo se distingue, você vai bem.
Tudo no seu navegador
Tanto o verificador de contraste quanto o simulador de daltonismo funcionam localmente: você envia uma imagem ou escolhe cores e tudo é processado no seu equipamento, sem enviar nada.
Perguntas frequentes
O que é o contraste WCAG AA e AAA?
Uma razão de diferença entre texto e fundo. Para texto normal, mínimo 4.5:1 (AA) ou 7:1 (AAA); para texto grande, 3:1 (AA).
Por que não devo usar só a cor para dar informação?
Porque cerca de 8% dos homens tem daltonismo. Adicione outro sinal (ícone, texto, padrão) além da cor.
Como confiro se meu design é acessível?
Meça o contraste (deve passar AA) e simule o daltonismo para confirmar que a informação não depende só da cor.
A acessibilidade afeta o SEO ou só os usuários?
Ajuda os dois: melhora a experiência de todos e é uma boa prática valorizada, mas o motivo principal é que mais gente possa usar o que você faz.
Revisar a acessibilidade das minhas cores →Mais guias e ferramentas
Como escolher uma paleta de cores
Papéis, escalas 50–900 e como derivar uma paleta de uma imagem.
Paleta de cores, HEX e contraste
Extraia cores de uma imagem e verifique o contraste WCAG entre texto e fundo.