Verificador de contraste (conformidade com WCAG)
Informe duas cores para calcular a razão de contraste WCAG (Web Content Accessibility Guidelines) e verificar a conformidade com os níveis AA e AAA.
Resumo dos requisitos de contraste do WCAG
| Nível | Alvo | Contraste necessário |
|---|---|---|
| AA (mínimo) | Texto normal | 4,5:1 ou mais |
| AA (mínimo) | Texto grande (18pt ou mais, ou 14pt ou mais em negrito) | 3:1 ou mais |
| AA (mínimo) | Componentes de interface e objetos gráficos | 3:1 ou mais |
| AAA (avançado) | Texto normal | 7:1 ou mais |
| AAA (avançado) | Texto grande | 4,5:1 ou mais |
Dicas de uso
- Você pode definir a cor do texto e do fundo pelo seletor de cores ou digitando diretamente o código hexadecimal (os formatos `#RRGGBB` e `#RGB` são aceitos).
- Clique em "Trocar cores" para inverter rapidamente o texto e o fundo e compará-los, o que é útil para testar várias combinações de cores de um logotipo ou ícone.
- O nível AAA é mais rigoroso que o AA. Atender ao nível AA costuma ser considerado o mínimo recomendável para um site, mas vale a pena buscar o nível AAA em conteúdos em que a legibilidade é especialmente importante.
- O requisito de 3:1 para componentes de interface e objetos gráficos, como bordas de botões e ícones, corresponde ao critério de sucesso 1.4.11, adicionado no WCAG 2.1.
Perguntas frequentes
Curiosidade — A origem dos padrões de acessibilidade
O WCAG (Web Content Accessibility Guidelines) é uma diretriz internacional desenvolvida principalmente pelo W3C (World Wide Web Consortium). Sua primeira versão, o WCAG 1.0, foi publicada em 1999. Já naquela época, reduzir as barreiras enfrentadas por usuários com deficiência visual ao utilizar a web com tecnologias assistivas, como leitores de tela, era reconhecido como um grande desafio.
Os padrões de contraste ganharam importância por diversos motivos ligados à diversidade da visão humana: a deficiência na visão de cores afeta uma parcela relevante da população (estima-se que cerca de 1 em cada 20 homens seja afetado), o envelhecimento causa o amarelamento do cristalino e reduz a sensibilidade ao contraste, e as telas de smartphones ficam difíceis de enxergar sob luz solar direta ao ar livre. Estabelecer critérios numéricos permitiu que os designers verificassem a acessibilidade de forma objetiva, em vez de depender apenas de julgamentos subjetivos sobre legibilidade.
Atualmente, a acessibilidade na web é uma exigência legal em muitos países. No Japão, por exemplo, a emenda de abril de 2024 à Lei de Eliminação da Discriminação contra Pessoas com Deficiência tornou obrigatória a adoção de acomodações razoáveis pelas empresas. Verificar a razão de contraste tornou-se uma das verificações básicas de qualidade que as empresas não podem mais ignorar ao criar seus sites.