Calculadora de contraste WCAG
O Verificador de Contraste de Cores é uma calculadora de contraste WCAG instantânea que avalia a combinação entre a cor do texto e a cor de fundo. Ele analisa os requisitos das diretrizes WCAG 2.1 nos níveis AA e AAA para texto normal e grande simultaneamente. A ferramenta auxilia na criação de interfaces acessíveis alinhadas à Lei Brasileira de Inclusão e ao eMAG.
Como usar a calculadora de contraste WCAG
Avaliar a acessibilidade entre o primeiro plano e o plano de fundo é simples e direto. Siga os passos para verificar a combinação de cores:
- Informe a
cor do textodigitando um código hexadecimal de 3 ou 6 dígitos ou selecionando uma opção no seletor de cores. - Insira a
cor de fundono campo correspondente usando a mesma notação hexadecimal ou a paleta visual. - Observe a taxa de contraste calculada e os quatro selos de aprovação exibidos ao vivo.
- Utilize a opção de
inverter corespara alternar rapidamente a posição da cor do texto e do plano de fundo.
Como funciona o verificador de contraste de cores
O verificador de contraste de cores processa a luminância relativa de cada tom utilizando a fórmula matemática oficial recomendada pelo W3C. Todo o processamento roda integralmente no cliente (navegador), sem o envio de dados a servidores e sem a necessidade de criar contas.
Ao digitar códigos hexadecimais válidos (compostos pelos dígitos de 0 a 9 e letras de A a F), a interface valida os caracteres e recalcula a razão de contraste no mesmo instante, atualizando a pré-visualização e a aprovação nos critérios da WCAG 2.1.
Requisitos da WCAG 2.1 para texto e fundo
As diretrizes internacionais de acessibilidade definem parâmetros matemáticos para a legibilidade visual em ambientes digitais:
- Nível AA: Exige uma taxa de contraste de pelo menos 4,5:1 para texto normal e de 3,0:1 para texto grande. Este é o nível mínimo adotado na maioria das auditorias de acessibilidade.
- Nível AAA: Exige uma taxa de 7,0:1 para texto normal e de 4,5:1 para texto grande, garantindo uma leitura confortável para um público mais amplo.
Texto grande é caracterizado por ter tamanho a partir de 18pt (24px) em peso regular ou a partir de 14pt (18,66px) em negrito.
Importância do contraste de cores na acessibilidade
Garantir um contraste de cores na acessibilidade é um passo crucial no desenvolvimento de produtos digitais inclusivos. O baixo contraste dificulta a leitura para pessoas com baixa visão, daltonismo ou para quem utiliza dispositivos móveis sob luz solar forte.
Validar essas combinações durante a fase de prototipagem reduz custos de desenvolvimento e evita retrabalho em etapas avançadas do projeto.
Acessibilidade digital no Brasil e conformidade legal
No Brasil, a acessibilidade em meios digitais é uma obrigação legal fundamentada pela Lei Brasileira de Inclusão da Pessoa com Deficiência (LBI — Lei nº 13.146/2015). No setor público e em serviços de interesse social, adota-se o eMAG (Modelo de Acessibilidade do Governo Eletrônico) e as recomendações do Design System do Governo Federal (DSgov).
O uso de uma ferramenta de contraste de cores em conformidade com as especificações da WCAG 2.1 apoia a criação de sistemas web que respeitam a legislação nacional e oferecem autonomia aos cidadãos.
Perguntas frequentes
Qual é a taxa de contraste mínima exigida pela norma WCAG AA?
A norma WCAG 2.1 Nível AA exige uma taxa de contraste mínima de 4,5:1 para texto de tamanho normal. Para textos considerados grandes, a exigência mínima é de 3,0:1.
O que é considerado texto grande para fins de acessibilidade?
Texto grande é definido pela norma WCAG como qualquer tipo com tamanho a partir de 18pt (24px) em peso regular ou a partir de 14pt (18,66px) em peso negrito. Elementos com essas dimensões exigem uma razão de contraste menor devido ao maior corpo das letras.
Qual a diferença de contraste entre os níveis AA e AAA da WCAG?
O Nível AA é o padrão básico de conformidade legal, exigindo 4,5:1 em texto normal e 3,0:1 em texto grande. O Nível AAA estabelece o patamar máximo de acessibilidade, exigindo 7,0:1 para texto normal e 4,5:1 para texto grande.
Como verificar se a combinação de cores possui boa legibilidade?
Para avaliar a legibilidade, basta inserir os códigos hexadecimais da cor do texto e do plano de fundo na ferramenta. O sistema calcula a taxa de contraste na hora e sinaliza quais critérios da WCAG foram atendidos.
Como usar códigos hexadecimais para calcular o contraste de cores?
Insira os códigos hexadecimais de 3 ou 6 dígitos diretamente nos campos de cor do primeiro plano e de fundo. O sistema reconhece os caracteres automaticamente e calcula a proporção sem a necessidade de clicar em um botão de envio.
Qual a taxa de contraste ideal para leitura na tela do celular sob luz solar?
Para garantir a leitura em telas expostas a iluminação natural intensa, o ideal é buscar uma taxa de contraste de 7,0:1 ou superior. Essa proporção cumpre o Nível AAA da WCAG e atenua a perda de visibilidade provocada por reflexos.
O verificador de contraste de cores é gratuito e funciona direto no navegador?
Sim, a ferramenta é totalmente gratuita, não requer cadastro e executa todos os cálculos diretamente no navegador. Nenhuma informação de cor é transmitida para servidores externos durante o uso.
