Calculadora de contraste WCAG
O Verificador de Contraste de Cores calcula instantaneamente a proporção de contraste entre a cor de primeiro plano e a cor de fundo usando a fórmula de luminância relativa do W3C. Esta calculadora de contraste WCAG avalia a combinação em relação aos níveis de conformidade AA e AAA para texto normal e grande. Todo o processamento é feito diretamente no seu navegador, sem envio de dados a servidores ou necessidade de cadastro.
Como usar a ferramenta contraste de cores
Para testar o contraste entre o texto e o plano de fundo do seu projeto, siga os passos abaixo:
- Digite o código hexadecimal da cor de primeiro plano no campo indicado ou clique no mostrador para abrir o seletor visual nativo.
- Informe a cor de fundo no segundo campo de texto ou escolha através do seletor de cores do seu dispositivo.
- Analise a proporção obtida e confira o resultado simultâneo nos quatro selos de conformidade das diretrizes WCAG.
- Utilize o botão Inverter cores se quiser alternar instantaneamente qual cor é o texto e qual é o fundo.
Requisitos do contraste de cores na acessibilidade
As diretrizes WCAG 2.1 estabelecem metas matemáticas para garantir a leitura por pessoas com baixa visão, daltonismo ou sob iluminação direta do sol. As exigências são divididas entre os níveis AA e AAA, diferenciando texto normal de texto grande.
O Nível AA exige uma proporção mínima de 4,5:1 para texto normal e 3,0:1 para texto grande. Considera-se texto grande aquele com tamanho mínimo de 18pt (24px) em peso normal ou 14pt (18,66px) em negrito.
O Nível AAA estabelece uma regra mais rígida, exigindo 7,0:1 para texto normal e 4,5:1 para texto grande. A ferramenta calcula a combinação de 1:1 até 21:1 e indica se o resultado foi Aprovado ou reprovado em cada critério.
Verificador de contraste de cores com código hexadecimal
O campo aceita códigos hexadecimais de 3 ou 6 dígitos compostos por números (0–9) e letras (A–F). Ao colar códigos de ferramentas de design ou arquivos CSS, caracteres extras como o símbolo # no início são ignorados automaticamente para evitar erros de validação.
A digitação manual e o seletor visual nativo do sistema operacional trabalham sincronizados. Você pode alternar livremente entre colar um valor hex e ajustar o tom visualmente no seletor.
Processamento local e privacidade total
Todas as operações são executadas de forma inteiramente local no seu navegador Web. Nenhuma cor inserida é transmitida para servidores externos, garantindo privacidade completa durante a verificação de guias de estilo e sistemas de design.
Perguntas frequentes
Qual é a taxa de contraste mínima exigida pelas WCAG para o nível AA?
A taxa de contraste mínima exigida pelas diretrizes WCAG 2.1 no nível AA é de 4,5:1 para texto normal e 3,0:1 para texto grande. O texto grande é definido como aquele com tamanho a partir de 18pt (24px) em peso normal ou 14pt (18,66px) em negrito.
O que é considerado texto grande para fins de acessibilidade digital?
Para fins de acessibilidade digital, texto grande é aquele com tamanho igual ou superior a 18pt (24px) em peso normal, ou a partir de 14pt (18,66px) quando configurado em negrito. Tipografias maiores mantêm a legibilidade mesmo com proporções de contraste mais baixas.
Qual é a diferença entre os níveis de conformidade AA e AAA?
A diferença está no grau de exigência da proporção de contraste. O nível AA exige 4,5:1 para texto normal e 3,0:1 para texto grande, enquanto o nível AAA requer 7,0:1 para texto normal e 4,5:1 para texto grande. O nível AA é o padrão adotado na maioria das auditorias de acessibilidade.
Como verificar o contraste de cores usando códigos hexadecimais?
Para verificar o contraste, digite ou cole um código hexadecimal de 3 ou 6 dígitos nos campos de cor de primeiro plano e cor de fundo. A ferramenta calcula a proporção imediatamente e atualiza a pré-visualização e os selos de conformidade sem necessidade de enviar o formulário.
Qual é o índice de contraste ideal para leitura de texto no corpo da página?
O índice de contraste ideal para texto de corpo de página é de no mínimo 4,5:1 para atender ao nível AA, ou 7,0:1 para atingir o nível AAA. Manter a taxa nesses níveis garante uma leitura confortável para diversos perfis de usuários e condições de tela.
Como funciona o botão para inverter a cor do texto e do fundo?
O botão Inverter cores alterna instantaneamente o código da cor de primeiro plano com o da cor de fundo. Essa função facilita o teste de variações do design, como componentes em modo claro e modo escuro, sem a necessidade de reescrever os códigos.
A calculadora de contraste WCAG é gratuita?
Sim, a calculadora de contraste WCAG é totalmente gratuita e sem limite de uso. Não é necessário criar conta, fazer cadastro ou instalar qualquer extensão no navegador.
As cores digitadas são enviadas para algum servidor?
Não, as cores digitadas não são enviadas para nenhum servidor. Todo o cálculo é realizado localmente pelo próprio navegador Web através de código client-side.
