Contraste de Cores WCAG para Designers
A regra 4.5:1, matemática da taxa de contraste e ferramentas gratuitas para verificar qualquer par de cores.
Se o seu texto falhar no contraste WCAG AA, cerca de 285 milhões de pessoas com deficiência visual não conseguirão lê-lo. Além disso, você estará em terreno legal cada vez mais instável na UE e nos EUA. A boa notícia: a regra é simples.
A regra 4.5:1
O texto do corpo deve ter uma taxa de contraste de pelo menos 4.5:1 em relação ao fundo para passar no WCAG AA. Texto grande (24px+ regular ou 18px+ negrito) tem um limite menor de 3:1.
Para conformidade AAA: 7:1 para corpo, 4.5:1 para texto grande.
Como a taxa de contraste é calculada
WCAG usa luminância relativa — converta cada cor em um valor de luminância (0 = preto, 1 = branco) usando uma fórmula específica, depois calcule (L1 + 0,05) / (L2 + 0,05), onde L1 é a cor mais clara.
Você não precisa fazer a matemática — use nosso verificador de contraste gratuito para inserir duas cores e ver a taxa.
Casos comuns de falha
- Cinza claro sobre branco — #999 on #fff = 2,85 (falha). #767676 on #fff = 4,54 (passa).
- Branco sobre amarelo — quase sempre falha. Use texto escuro sobre amarelo.
- Links coloridos no texto do corpo — a maioria dos links azuis passa contra branco, mas falha contra cinza claro. Teste o fundo real ao redor.
- Cores da marca que parecem ótimas — elas geralmente falham. Adicione um fundo off-white ou escureça o texto.
Escolhendo pares de cores acessíveis
Três padrões confiáveis:
- Escuro sobre claro — #1f2937 on #fff = 14:1 (perfeito).
- Branco sobre escuro — #fff on #1f2937 = 14:1 (perfeito).
- Escuro sobre destaque — #1f2937 on #fbbf24 = 9:1 (perfeito para botões).
Além do texto
WCAG 2.1 também exige 3:1 para elementos não textuais (botões, anéis de foco, bordas de formulários). O verificador lida com ambos.
Papéis de parede que não competirão com seus widgets
Se você é um designer definindo papéis de parede atrás de widgets de relógio e notificações, escolha papéis de parede com contraste abaixo de 5:1 nas zonas dos widgets. Nossa ferramenta Gaussian blur pode suavizar áreas movimentadas de qualquer papel de parede para melhor legibilidade dos widgets.
Experimente nossas ferramentas gratuitas
A maioria desses guias vem com uma ferramenta prática que você pode usar agora mesmo — sem necessidade de cadastro para a primeira execução:
- Redimensionador de imagens — redução e ampliação com pixel perfeito.
- Converter para WebP — arquivos 30-50% menores que JPG.
- Removedor de fundo — recorte com um clique, PNG transparente.
- Gerador de favicon — todos os tamanhos de navegador a partir de uma fonte.
- Redimensionador de redes sociais — dimensões exatas de cada plataforma.
- Processamento em lote — aplique qualquer ferramenta a até 200 imagens de uma vez.
Navegue pelo catálogo completo de ferramentas.
