search

Found

info Visão geral

Avalie a relação de contraste entre duas cores conforme WCAG 2.1 (AA/AAA). Exibição de aprovação por tamanho de texto com seletor de cores.

📘 Como usar

  1. Inserir a cor de primeiro plano e a cor de fundo nos campos de texto em formato hexadecimal ou usar o seletor de cores nativo.
  2. Clicar no botão de alternância para inverter as cores de texto e fundo de forma rápida, caso necessário.
  3. Verificar na interface a relação de contraste calculada e a conformidade automática com os níveis AA e AAA.

Verificador de contraste de cores (WCAG)

Texto normal (16px) — The quick brown fox jumps over the lazy dog.

Texto grande (24px negrito)

Relação de contraste

21.00 : 1

AA Nível

Texto normal (≥ 4.5:1)
Texto grande (≥ 3:1)
Componentes UI (≥ 3:1)

AAA Nível

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

grid_view Relacionados

Article

Verificador de Contraste de Cores | Teste de Acessibilidade WCAG

Esta ferramenta permite calcular instantaneamente a relação de contraste entre duas cores, garantindo que as interfaces de usuário possuam legibilidade adequada e cumpram os requisitos técnicos de acessibilidade. Voltada para desenvolvedores front-end e UI/UX designers.

💡 Visão Geral da Ferramenta

  • Cálculo Matemático Preciso A ferramenta utiliza os algoritmos de luminância relativa do espaço de cor sRGB para calcular a proporção exata de contraste, que varia em uma escala de 1:1 (sem contraste) a 21:1 (contraste máximo, como preto no branco).
  • Validação WCAG 2.1 Integrada Avalia automaticamente a combinação inserida contra os critérios estritos das diretrizes de acessibilidade para os níveis AA e AAA. O painel exibe um status claro de aprovação ("PASS" ou "FAIL") para textos normais, textos grandes e componentes de interface do usuário (UI).
  • Sincronização Bidirecional e Preview Os inputs de código hexadecimal (como #FFFFFF) e os seletores visuais de cor mantêm-se perfeitamente sincronizados. A área de visualização (preview) é atualizada em tempo real para refletir a aparência real da aplicação da paleta.
  • Alternância Rápida de Cores Um botão de swap dedicado permite inverter a cor de fundo e a cor de primeiro plano com um único clique, facilitando o teste de variações em temas claros e escuros.

🧐 Perguntas Frequentes

Q. Quais são os valores mínimos de contraste exigidos para aprovação?

A. Para alcançar a conformidade no nível AA (o padrão mínimo recomendado para a maioria dos projetos), a relação de contraste deve ser de pelo menos 4.5:1 para textos com tamanho de fonte normal e 3:1 para textos grandes ou elementos gráficos (como ícones e bordas de botões). Para o nível AAA (acessibilidade aprimorada), exige-se 7:1 para textos normais e 4.5:1 para textos grandes.

Q. O que as diretrizes consideram como "texto grande"?

A. Nos padrões de acessibilidade, um texto é classificado como "grande" quando possui um tamanho de fonte de pelo menos 18pt (aproximadamente 24px na tela) ou 14pt (cerca de 18.5px) se estiver em negrito (bold).

📚 Curiosidades sobre o Cálculo de Contraste

O algoritmo que calcula a relação de contraste não trata as cores de forma simétrica. Ele é construído com base na luminância relativa das cores no padrão sRGB, aplicando multiplicadores específicos para cada canal: 21,26% para o vermelho, 71,52% para o verde e apenas 7,22% para o azul. Essa fórmula reflete biologicamente a maneira como os fotorreceptores do olho humano percebem a luz, sendo muito mais sensíveis aos tons esverdeados do que aos azulados.

No cenário tecnológico brasileiro, garantir que a relação de contraste de um sistema web esteja em conformidade com as diretrizes do WCAG (Web Content Accessibility Guidelines) não é apenas uma boa prática de UX. Esses mesmos critérios técnicos são amplamente adotados como base de auditoria para o cumprimento da Lei Brasileira de Inclusão (LBI) no ambiente digital, assegurando que portais governamentais, aplicativos bancários e e-commerces sejam navegáveis por pessoas com baixa visão ou daltonismo.