Xadrez de Contraste de Cores
Verifique as combinações de cores de primeiro plano/ fundo para conformidade com os padrões de acessibilidade WCAG 2.1 AA e AAA.
Texto normal
Texto grande (18pt / 14pt em negrito)
The quick brown fox jumps over the lazy dog.
Relação de contraste
17.40:1
Por que usar o verificador de contraste do PixConvert?
Verificação de conformidade com as WCAG em uma única ferramenta — selecione as cores e veja os resultados instantaneamente.
Conformidade com as WCAG 2.1
Verifica todos os critérios de sucesso relevantes do WCAG 2.1: AA normal, AA grande, AAA normal, AAA grande e componentes de interface do usuário.
Pré-visualização ao vivo
Veja o texto renderizado na cor de fundo real nos tamanhos normal, grande e de componente da interface do usuário.
Seletor de cores
Seletor de cores nativo do navegador, além de entrada hexadecimal para seleção precisa de cores.
Proporção exata
Exibe a taxa de contraste exata com 2 casas decimais (ex.: 4,53:1) para fins de documentação.
Trocar cores
Troque o primeiro plano e o fundo com um clique para verificar instantaneamente ambas as combinações.
100% Privado
Fórmula WCAG pura, calculada no seu navegador. Sem servidor, sem rastreamento.
Quando verificar o contraste de cores
A acessibilidade é um requisito legal em muitas jurisdições. Verifique com antecedência.
Revisão de projeto
Verifique se as opções de cores nos designs do Figma atendem aos requisitos WCAG antes de enviá-los para a equipe de engenharia.
- Verifique as cores dos botões principais.
- Verificar texto em fundos de marca
- Teste a legibilidade do texto de exemplo
Auditoria de Acessibilidade
Auditar a interface de usuário existente para verificar a conformidade com as diretrizes WCAG 2.1 AA como parte de uma revisão legal ou de qualidade.
- Identificar pares de cores com falha
- Relações de contraste do documento
- Priorize as correções por gravidade.
Sistema de projeto
Valide a acessibilidade de cada elemento da sua paleta de cores antes de publicar.
- Validar pares de tokens de cor
- Criar variantes de tema acessíveis
- Combinações em conformidade com o documento
Como verificar o contraste de cores
Escolha a cor do texto (cor de primeiro plano) e a cor de fundo usando os seletores de cores ou os valores hexadecimais.
A taxa de contraste e os resultados de aprovação/reprovação de acordo com as diretrizes WCAG são atualizados instantaneamente. Use a opção Trocar para verificar a combinação inversa.
Confira os resultados para os níveis de conformidade AA e AAA — todos os cálculos seguem a fórmula oficial do WCAG 2.1 e são executados inteiramente no seu navegador.
Explore mais ferramentas
Descubra outras ferramentas gratuitas que funcionam muito bem em conjunto com esta.
Gerador de gradiente CSS
Crie gradientes CSS personalizados visualmente
Gerador de sombras de caixa
Crie sombras em CSS com pré-visualização ao vivo.
Conversor de cores
Converta códigos de cores HEX, RGB e HSL instantaneamente.
Extrator de paleta de cores
Extraia as cores dominantes de qualquer imagem.
Formatador JSON
Formate, valide e minimize JSON instantaneamente.
Testador de expressões regulares
Teste e depure expressões regulares em tempo real.
Perguntas frequentes
Contraste de cores e acessibilidade explicados.
Qual é o requisito de taxa de contraste do WCAG?
O nível AA das WCAG 2.1 exige uma proporção de 4,5:1 para texto normal, 3:1 para texto grande (18pt ou mais, ou 14pt ou mais em negrito) e 3:1 para componentes de interface do usuário e objetos gráficos. O nível AAA exige uma proporção de 7:1 para texto normal e 4,5:1 para texto grande.
Como é calculada a taxa de contraste?
Razão de contraste = (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura. A luminância é calculada a partir dos valores sRGB linearizados usando a fórmula WCAG 2.1.
O que é considerado 'texto grande'?
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem texto grande como aquele com 18 pontos (24 pixels) ou mais, OU 14 pontos (aproximadamente 18,67 pixels) ou mais quando em negrito. O texto grande tem um requisito de contraste mais flexível (3:1 em vez de 4,5:1) porque é inerentemente mais legível.
Preciso me reunir com a AAA?
O nível AA das WCAG é o requisito legal padrão na maioria das jurisdições (ADA nos EUA, EN 301 549 na UE). O nível AAA é a meta aprimorada — busque o AA como mínimo e, sempre que possível, o AAA para conteúdo crítico.
Isso funciona para imagens e gradientes?
Esta ferramenta verifica pares de cores sólidas. Para texto sobre imagens ou gradientes, você deve avaliar a cor de fundo no pior caso (o ponto mais claro atrás do texto para texto escuro, o ponto mais escuro para texto claro). As WCAG não exigem que os fundos de imagem passem no teste de contraste — é uma prática recomendada.