search

Found

info Visão geral

Calcula a razão de luminância WCAG 2.x entre texto e fundo HEX e avalia os limites AA, AAA, normal e texto grande.

📘 Como usar

  1. Inserir a cor do texto e a cor de fundo usando o código HEX ou o seletor de cores
  2. Verificar a taxa de contraste calculada e o status de aprovação nos critérios WCAG

Verificador de Contraste WCAG

Razão WCAG 2.x com vereditos AA, AAA, normal e texto grande

A rápida raposa marrom salta sobre o cão preguiçoso.

Taxa de contraste 21.0:1

WCAG AA

Texto normal (4.5:1)
Texto grande (3:1)

WCAG AAA

Texto normal (7:1)
Texto grande (4.5:1)

O texto grande é definido como 18pt (aprox. 24px) ou 14pt em negrito (aprox. 18,6px).

grid_view Relacionados

Article

Verificador de Contraste de Acessibilidade (a11y) ｜ Validador WCAG

Ferramenta técnica para desenvolvedores front-end e UI designers calcularem a taxa de contraste entre o texto e o fundo. Valide instantaneamente se a sua interface web atende aos critérios de sucesso de acessibilidade da WCAG (Web Content Accessibility Guidelines) nos níveis AA e AAA.

💡 Sobre a ferramenta

  • Cálculo de contraste em tempo real: Computa a luminância relativa e exibe a proporção exata (ex: 4.5:1) de forma dinâmica, acompanhada de um preview renderizado em tela.
  • Validação simultânea WCAG: Avalia automaticamente o status de aprovação (Pass/Fail) para os níveis AA (mínimo) e AAA (aprimorado), cobrindo as especificações rigorosas para textos normais e textos grandes.
  • Entrada via HEX ou Color Picker: Oferece sincronização bidirecional entre o input visual e o código hexadecimal (#RRGGBB), adaptando-se perfeitamente aos fluxos de trabalho de design e codificação (CSS/Sass).
  • Privacidade e processamento 100% local: Todos os cálculos do algoritmo de contraste sRGB são executados diretamente no seu navegador via JavaScript. Nenhum dado é enviado a servidores externos, garantindo total segurança para projetos sob NDA.

🧐 Perguntas Frequentes

Q. Quais são os valores numéricos de contraste exigidos para aprovação na WCAG?

A. Para atingir o nível AA (o padrão de mercado mais adotado e frequentemente exigido por lei), é necessária uma taxa de 4.5:1 para textos normais e 3.0:1 para textos grandes (acima de 18pt ou 14pt em negrito). O nível AAA, que é a conformidade máxima, requer uma proporção de 7.0:1 para textos normais e 4.5:1 para textos grandes.

Q. Como o algoritmo calcula a proporção de contraste?

A. A ferramenta aplica a equação oficial recomendada pela W3C: (L1 + 0.05) / (L2 + 0.05), onde L1 representa a luminância relativa da cor mais clara e L2 a luminância da cor mais escura. Para chegar a esses valores de "L", os códigos HEX inseridos são convertidos para RGB, linearizados de acordo com as especificações do espaço de cor sRGB e, em seguida, multiplicados por coeficientes que refletem a percepção fisiológica do olho humano (0.2126 para Vermelho, 0.7152 para Verde e 0.0722 para Azul).

📚 Acessibilidade Digital no Brasil e o Padrão "a11y"

No ecossistema de desenvolvimento de software e web no Brasil, o cumprimento de diretrizes de acessibilidade (frequentemente abreviado na comunidade técnica como a11y — a letra "a", seguida de 11 letras, e "y") transcende as boas práticas de UI/UX, sendo muitas vezes um requisito estrito de conformidade legal. Para portais governamentais, o eMAG (Modelo de Acessibilidade em Governo Eletrônico) dita a base técnica que deve ser obrigatoriamente implementada. No setor privado, a LBI (Lei Brasileira de Inclusão da Pessoa com Deficiência - Lei nº 13.146/2015) reforça que plataformas digitais de empresas em território nacional devem ser projetadas de forma acessível.

Ambas as regulamentações brasileiras baseiam-se nas normas internacionais da W3C, especialmente nas métricas de contraste da WCAG 2.1. Validar a paleta de cores durante a criação de um design system ou na prototipagem inicial do CSS previne que a equipe de engenharia tenha que realizar refatorações custosas de front-end em estágios avançados do ciclo de desenvolvimento. Além de seguir as recomendações da ABNT sobre usabilidade, garantir o contraste adequado dissolve barreiras cruciais de navegação para usuários com baixa visão, daltonismo ou dificuldades perceptivas provocadas por telas com baixa luminosidade ou reflexo externo.