Neste artigo
O que e contraste de cor e por que importa
O contraste de cor e a diferença de luminancia entre duas cores, tipicamente o texto em primeiro plano e seu fundo. Contraste suficiente garante que o texto seja legivel para todos, incluindo pessoas com baixa visão ou daltonismo. Contraste insuficiente torna o conteudo dificil ou impossivel de ler, excluindo milhões de usuários.
As Diretrizes de Acessibilidade para Conteudo Web (WCAG) definem taxas de contraste minimas que garantem legibilidade para uma ampla gama de capacidades visuais. Cumprir esses padrões não e apenas boa pratica — e um requisito legal em muitas jurisdições sob leis de acessibilidade como ADA, EAA e EN 301 549.
Como funcionam as taxas de contraste WCAG
O WCAG usa luminancia relativa para calcular taxas de contraste entre duas cores. A formula produz uma taxa de 1:1 (sem contraste, cores identicas) a 21:1 (contraste maximo, preto sobre branco).
- A luminancia relativa e calculada a partir de valores sRGB linearizados com a formula: L = 0.2126R + 0.7152G + 0.0722B
- A taxa de contraste e (L1 + 0.05) / (L2 + 0.05) onde L1 e a cor mais clara e L2 a mais escura
- Texto normal (abaixo de 18pt ou 14pt negrito) requer pelo menos 4.5:1 para AA e 7:1 para AAA
Experimente gratuitamente — sem cadastro
Verificar contraste →Niveis de conformidade WCAG AA vs AAA
O WCAG define dois niveis de conformidade para contraste de cor. O nivel AA e o padrão minimo exigido pela maioria das regulamentações de acessibilidade, enquanto AAA fornece acessibilidade aprimorada para usuários com deficiências visuais mais graves.
- AA texto normal — requer uma taxa de contraste de pelo menos 4.5:1 para texto menor que 18pt (ou 14pt negrito)
- AA texto grande — requer pelo menos 3:1 para texto de 18pt ou maior (ou 14pt negrito ou maior)
- AAA texto normal — requer pelo menos 7:1 para o nivel mais alto de legibilidade
- AAA texto grande — requer pelo menos 4.5:1 para texto grande no nivel aprimorado
- Contraste não textual — componentes de interface e objetos gráficos requerem pelo menos 3:1 contra cores adjacentes
Dicas para design de cor acessivel
Projetar com acessibilidade em mente não significa sacrificar a estetica. Estas dicas praticas ajudam a criar designs bonitos que todos possam usar.
- Comece pelo contraste — escolha primeiro as cores de texto e fundo, depois construa sua paleta ao redor
- Nunca dependa apenas da cor — use icones, padrões ou rotulos junto com a cor para transmitir significado
- Teste com conteudo real — texto de preenchimento pode parecer bom, mas conteudo real pode revelar problemas de contraste
- Considere o modo escuro separadamente — cores que passam no modo claro podem falhar no modo escuro e vice-versa
- Use uma ferramenta de verificação de contraste — ferramentas automatizadas detectam problemas mais rápido que inspeção manual
Perguntas frequentes
Qual e a taxa de contraste minima para conformidade WCAG?
Para WCAG 2.1 Nivel AA, texto normal requer uma taxa de contraste de pelo menos 4.5:1, e texto grande (18pt ou 14pt negrito) requer pelo menos 3:1. O nivel AAA eleva estes para 7:1 e 4.5:1 respectivamente. A maioria das leis de acessibilidade referência o nivel AA como padrão minimo.
O contraste de cor importa para imagens e icones?
Sim. O criterio de sucesso WCAG 2.1 1.4.11 requer que componentes de interface e objetos gráficos tenham pelo menos 3:1 de contraste com cores adjacentes. Isso inclui icones, bordas de campos, indicadores de foco e elementos de gráficos. Imagens decorativas estão isentas.
Como corrijo o baixo contraste sem mudar as cores da minha marca?
Você pode ajustar a luminosidade das cores da sua marca mantendo o mesmo matiz e saturação. Por exemplo, escureca um azul claro para texto ou clareie um fundo escuro. Outra abordagem e usar as cores da marca para elementos decorativos grandes e neutros de alto contraste para o corpo do texto.