Neste artigo
O que e contraste de cor e por que importa
O contraste de cor e a diferenca 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 visao ou daltonismo. Contraste insuficiente torna o conteudo dificil ou impossivel de ler, excluindo milhoes de usuarios.
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 padroes nao e apenas boa pratica — e um requisito legal em muitas jurisdicoes 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 padrao minimo exigido pela maioria das regulamentacoes de acessibilidade, enquanto AAA fornece acessibilidade aprimorada para usuarios com deficiencias 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 nao textual — componentes de interface e objetos graficos requerem pelo menos 3:1 contra cores adjacentes
Dicas para design de cor acessivel
Projetar com acessibilidade em mente nao 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, padroes 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 verificacao de contraste — ferramentas automatizadas detectam problemas mais rapido que inspecao 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 referencia o nivel AA como padrao 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 graficos tenham pelo menos 3:1 de contraste com cores adjacentes. Isso inclui icones, bordas de campos, indicadores de foco e elementos de graficos. Imagens decorativas estao isentas.
Como corrijo o baixo contraste sem mudar as cores da minha marca?
Voce pode ajustar a luminosidade das cores da sua marca mantendo o mesmo matiz e saturacao. 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.