Verificador de contraste WCAG
Verifique as taxas de contraste de cores para conformidade com a acessibilidade WCAG AA e AAA
Entrada e opções
Predefinições rápidas e exemplos
Roda no seu navegador. Os dados informados ficam neste dispositivo.
Resultados
Informe seus valores para ver o resultado.
Sobre o Verificador de contraste WCAG
Nosso verificador de contraste WCAG online e gratuito ajuda designers, desenvolvedores e profissionais de acessibilidade a conferir se as combinações de cor de texto e fundo atendem aos requisitos de contraste das Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1. Um contraste de cores acessível garante que todos os usuários, inclusive pessoas com baixa visão ou deficiência de visão de cores, consigam ler e interagir com o seu conteúdo web.
A ferramenta calcula a razão de contraste entre quaisquer duas cores usando a fórmula oficial de luminância relativa do W3C e informa na hora se a combinação passa ou falha nos níveis de conformidade WCAG AA e WCAG AAA, tanto para texto normal quanto para texto grande. Todos os cálculos são feitos em tempo real, direto no seu navegador, sem enviar dados a qualquer servidor.
Seja para fazer uma auditoria de acessibilidade, projetar uma nova interface ou revisar conteúdo existente quanto à conformidade, este verificador de contraste oferece resultados precisos e alinhados aos padrões, com prévias de texto ao vivo e sugestões práticas para corrigir combinações de cores reprovadas.
Entendendo os requisitos de contraste da WCAG
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) são o padrão reconhecido internacionalmente para acessibilidade na web, publicado pelo World Wide Web Consortium (W3C). A WCAG define limites específicos de razão de contraste para garantir a legibilidade do texto para usuários com diferentes níveis de capacidade visual.
- WCAG nível AA (texto normal): É exigida uma razão de contraste mínima de 4,5:1. Isso vale para o corpo do texto, parágrafos e qualquer texto menor que 18pt (24px) ou 14pt em negrito (18,66px em negrito).
- WCAG nível AA (texto grande): É exigida uma razão de contraste mínima de 3:1. Texto grande é aquele com pelo menos 18pt (24px) ou 14pt em negrito (18,66px em negrito).
- WCAG nível AAA (texto normal): É exigida uma razão de contraste mínima de 7:1. Este é o nível mais alto de conformidade de acessibilidade para texto de tamanho normal.
- WCAG nível AAA (texto grande): É exigida uma razão de contraste mínima de 4,5:1 para texto grande no nível de conformidade AAA.
Atender pelo menos ao nível WCAG AA é considerado o padrão básico de design web acessível e é exigido por diversas estruturas legais no mundo todo, incluindo o Americans with Disabilities Act (ADA), o European Accessibility Act e a Section 508 do Rehabilitation Act. O WCAG AAA oferece um nível ampliado de acessibilidade, recomendado sempre que possível.
Como a razão de contraste é calculada
A razão de contraste entre duas cores é determinada pela luminância relativa de cada uma, conforme definido na especificação WCAG 2.1. A luminância relativa mede o brilho percebido de uma cor em uma escala de 0 (preto mais escuro) a 1 (branco mais claro).
O cálculo tem três etapas. Primeiro, cada canal de cor (vermelho, verde, azul) é convertido do valor sRGB de 8 bits (0-255) para um valor sRGB normalizado (0-1), dividindo por 255. Segundo, cada valor normalizado passa por uma correção gama: se o valor for 0,04045 ou menos, ele é dividido por 12,92; caso contrário, é transformado pela fórmula ((value + 0.055) / 1.055) ^ 2.4. Terceiro, os valores lineares dos canais são combinados com coeficientes ponderados: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
A razão de contraste final é calculada como (L1 + 0.05) / (L2 + 0.05), em que L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura. O resultado é um valor que vai de 1:1 (nenhum contraste, cores idênticas) a 21:1 (contraste máximo, preto puro sobre branco puro).
Principais recursos
- Cálculo da razão de contraste em tempo real usando a fórmula oficial de luminância da WCAG 2.1 do W3C
- Indicadores de aprovado/reprovado para os níveis de conformidade WCAG AA e AAA, tanto para texto normal quanto para texto grande
- Seletor de cores interativo e campo de código hex para as cores de texto e de fundo
- Troca de cores com um clique para testar combinações invertidas
- Dez combinações de cores predefinidas para teste rápido, incluindo pares acessíveis comuns
- Prévia de texto ao vivo mostrando como as suas cores ficam em tamanhos de texto normal e grande
- Sugestão automática da cor de texto aprovada mais próxima quando a combinação atual falha
- Detalhes técnicos de luminância para as cores de texto e de fundo
- Suporte completo ao modo escuro para uso confortável em qualquer ambiente
- Todo o processamento é feito localmente no navegador, sem transmissão de dados a servidores externos
Como usar o Verificador de contraste WCAG
- Defina a cor do texto: Clique no quadrado do seletor de cores ou digite um valor hex (por exemplo, #1A1A2E) no campo de texto para definir a cor do texto.
- Defina a cor de fundo: Da mesma forma, use o seletor de cores ou o campo hex para definir a cor de fundo atrás do texto.
- Veja os resultados: A razão de contraste e os resultados de aprovado/reprovado para os quatro níveis da WCAG são exibidos na hora, conforme você muda as cores.
- Confira a prévia ao vivo: Role a página para ver o texto real exibido com a combinação de cores escolhida, nos tamanhos normal e grande.
- Aplique as sugestões: Se a combinação falhar no WCAG AA, uma cor de texto sugerida é exibida. Clique em Aplicar para usá-la.
- Experimente as predefinições: Use as predefinições rápidas para testar combinações de cores conhecidas, acessíveis ou não.
- Troque as cores: Clique no botão Trocar cores para inverter as cores de texto e de fundo selecionadas.
Por que o contraste de cores importa para a acessibilidade
Cerca de 1 em cada 12 homens e 1 em cada 200 mulheres no mundo têm alguma forma de deficiência de visão de cores. Além disso, milhões de pessoas têm baixa visão, alterações de visão relacionadas à idade ou limitações situacionais, como reflexo na tela. Um contraste de cores suficiente é uma das formas mais eficazes e simples de tornar o conteúdo web acessível a todos esses usuários.
O contraste insuficiente entre texto e fundo é um dos problemas de acessibilidade mais comuns encontrados em auditorias web. Ao usar um verificador de contraste WCAG durante o design e o desenvolvimento, as equipes podem identificar e corrigir problemas de contraste antes que cheguem à produção, reduzindo os custos de correção e garantindo desde o início a conformidade com as normas de acessibilidade.
Um bom contraste de cores também beneficia usuários sem deficiência. Ele melhora a legibilidade sob sol forte, em telas de baixa qualidade e em ambientes com muitas distrações. Design acessível é design inclusivo, que cria uma experiência melhor para todos.
Perguntas frequentes
Qual é a diferença entre WCAG AA e AAA?
O WCAG AA é o nível padrão de conformidade recomendado para a maioria dos sites e aplicativos. Ele exige uma razão de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande. O WCAG AAA é um nível mais rigoroso, que exige 7:1 para texto normal e 4,5:1 para texto grande. Embora o AAA nem sempre seja alcançável para todo o conteúdo, ele é recomendado para elementos de texto críticos e para situações que exigem máxima legibilidade.
O que conta como texto grande na WCAG?
Segundo a WCAG 2.1, texto grande é aquele com pelo menos 18 pontos (aproximadamente 24 pixels CSS) ou 14 pontos (aproximadamente 18,66 pixels CSS) se estiver em negrito. O texto grande tem requisitos de contraste menores porque o próprio tamanho o torna mais fácil de ler.
Esta ferramenta aceita transparência ou canais alfa?
Esta ferramenta funciona com cores hex opacas (códigos hex de 6 dígitos). Em cores com transparência, o contraste efetivo depende do fundo atrás da camada transparente, que pode variar ao longo da página. Para verificar texto semitransparente, primeiro calcule a cor sólida efetiva resultante da sobreposição transparente sobre o fundo real e depois teste essa cor sólida aqui.
A conformidade com a WCAG é exigida por lei?
Em muitas jurisdições, sim. O ADA nos Estados Unidos, o European Accessibility Act na União Europeia, o Accessibility for Ontarians with Disabilities Act (AODA) no Canadá e leis semelhantes em outros países citam ou incorporam o nível AA da WCAG 2.1 como padrão de acessibilidade digital. Organizações que não atendem a esses requisitos podem enfrentar ações judiciais, multas e danos à reputação.