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 |
O que é a razão de contraste?
A razão de contraste expressa a diferença de luminosidade entre a cor do texto e a cor de fundo como um número entre 1:1 (sem diferença) e 21:1 (a diferença máxima possível, preto sobre branco). Quanto maior o número, mais fácil é ler o texto. O WCAG (Web Content Accessibility Guidelines) define, a partir desse valor, dois níveis de conformidade, AA e AAA. Esta ferramenta calcula automaticamente a razão a partir de dois códigos de cor e mostra, de relance, se cada um dos cinco requisitos distintos é atendido.
O cálculo tem como base um valor chamado "luminância relativa" (relative luminance). Diferente de uma medida simples de luminosidade, como o valor L do modelo HSL, a luminância relativa é obtida removendo primeiro a correção gama dos valores sRGB e, em seguida, ponderando e somando os canais vermelho, verde e azul de acordo com a sensibilidade do olho humano a cada um, o que produz um número mais próximo da impressão visual real de claridade. Cores parecidas tendem, quase por definição, a gerar uma razão de contraste baixa: um resultado "Reprovado" não significa que as cores em si estejam erradas, apenas que a diferença de luminosidade entre elas precisa ser ampliada.
Como usar o verificador de contraste
- Informe a cor do texto Escolha a cor pelo seletor ou digite diretamente um código hexadecimal. O valor padrão é um cinza escuro (#333333).
- Informe a cor de fundo Proceda da mesma forma, pelo seletor de cores ou por código hexadecimal. O valor padrão é branco (#ffffff).
- Confira o resultado À medida que você insere os valores, a razão de contraste e os selos de aprovado/reprovado para cada requisito AA e AAA são atualizados em tempo real.
- Troque as cores se precisar Use o botão "Trocar cores" para inverter o texto e o fundo, permitindo comparar a combinação também em sua forma invertida.
Dicas para aproveitar melhor
- 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.
Onde esta ferramenta é usada
Verificar a cor de botões e links
Informe a cor do texto e do fundo dos principais botões de ação ou links de texto de um site para confirmar se atendem ao nível AA (4,5:1 ou mais).
Conferir logotipos e banners em relação ao fundo
Permite confirmar antecipadamente se a cor de um logotipo ou o texto principal de um banner promocional permanece bem legível sobre o fundo em que será exibido.
Auditar a paleta de cores de um design system
Revise, uma a uma, as combinações existentes de cores de marca e de texto para verificar se toda a interface atende aos requisitos de acessibilidade, registrando os resultados.
Validar o esquema de cores do modo escuro
Útil para verificar, combinação por combinação, se as cores invertidas para o modo escuro continuam atendendo aos mesmos requisitos de contraste do esquema do modo claro.
Glossário
- Luminância relativa
- Uma medida de luminosidade calculada removendo a correção gama dos valores sRGB e, em seguida, ponderando e somando os canais vermelho, verde e azul de acordo com a sensibilidade do olho humano a cada um. É a base do cálculo da razão de contraste.
- Razão de contraste
- Um número de 1:1 a 21:1 obtido a partir da luminância relativa de uma cor clara e de uma escura. Quanto maior o valor, maior a diferença de luminosidade entre as duas cores e mais legível o texto.
- WCAG
- Sigla de Web Content Accessibility Guidelines, o padrão internacional de acessibilidade web mantido pelo W3C. Os critérios de aprovação da razão de contraste também são definidos nele.
- Nível AA
- O segundo nível de conformidade mais alto do WCAG. O texto normal precisa atingir uma razão de contraste de 4,5:1 ou mais. É amplamente considerado o padrão mínimo referenciado por muitas leis e diretrizes.
- Nível AAA
- O nível de conformidade mais alto do WCAG. O texto normal precisa atingir uma razão de contraste de 7:1 ou mais. Não é obrigatório, mas é recomendado quando a legibilidade é especialmente crítica.
- Texto grande
- Uma categoria que o WCAG define como texto normal de 18pt (cerca de 24px) ou mais, ou texto em negrito de 14pt (cerca de 18,66px) ou mais. Um requisito mais flexível se aplica a ela em comparação ao texto normal.
- Componente de interface
- Elementos visuais que indicam que algo é interativo, como bordas de botões, contornos de campos de entrada ou ícones. O WCAG 2.1 acrescentou um novo requisito de 3:1 ou mais especificamente para eles.
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.