Color Converter agora valida contraste WCAG AAA

Acessibilidade de cor é uma daquelas coisas que todo time sabe que deveria verificar e quase nenhum verifica de verdade. Geralmente porque o processo era manual: abrir uma ferramenta de contraste separada, colar os dois valores, interpretar o resultado, ajustar manualmente.

A partir desta semana, o Color Converter do Quick Tools faz isso integrado.

O que mudou

O conversor agora mostra o ratio de contraste WCAG entre qualquer par de cores que você informa. Você entra com a cor de texto e a cor de fundo, e ele mostra:

• O ratio calculado (ex: 4.7:1)
• Se passa AA (mínimo 4.5:1 para texto normal, 3:1 para texto grande)
• Se passa AAA (mínimo 7:1 para texto normal, 4.5:1 para texto grande)
• Uma sugestão de tom alternativo caso o par não passe no nível desejado

Por que AA vs AAA importa

WCAG AA é o mínimo legal e regulatório na maioria dos contextos. Texto normal em um site público deve passar AA. Se você está construindo interfaces para órgãos públicos ou acessibilidade é requisito contratual, AA é o baseline.

WCAG AAA é o nível mais rigoroso. Não é obrigatório na maioria dos casos, mas é o padrão para interfaces usadas por pessoas com deficiência visual leve. Se sua aplicação tem usuários idosos ou com baixa visão, AAA vale o esforço.

Como usar a sugestão automática

Quando um par de cores não atinge o nível desejado, o Color Converter sugere um tom mais escuro (para texto claro em fundo escuro) ou mais claro (para texto escuro em fundo claro). A sugestão mantém o hue e saturação originais — só ajusta a luminosidade até o mínimo necessário.

Isso economiza aquele ciclo manual de "ajusta um pouco mais escuro, testa de novo, ainda não passou, mais um pouco" que todo designer conhece.

Um detalhe sobre texto grande

WCAG define "texto grande" como 18pt ou 14pt bold (aproximadamente 24px ou 18.67px bold). Para esse tamanho, os requisitos de contraste são mais relaxados: 3:1 para AA e 4.5:1 para AAA. O conversor leva isso em conta na verificação — você informa o tamanho do texto e ele aplica o limiar correto automaticamente.

Checklist de contraste antes de publicar

Antes de publicar uma tela, teste pelo menos quatro pares de cores: texto principal sobre fundo, texto secundário sobre fundo, links sobre fundo e botões em todos os estados. Muitos problemas aparecem só no hover, disabled, selected ou em badges pequenos que usam uma cor de categoria com texto branco.

Também vale testar o contraste em componentes reais, não só em tokens isolados. Um texto #666 pode passar em um fundo branco, mas falhar em um card levemente cinza. O inverso também acontece: uma cor de marca que parece forte em um mockup pode perder contraste quando aplicada sobre gradientes, imagens ou superfícies translúcidas.

Quando o par falhar, tente primeiro mudar luminosidade, não hue. Isso preserva a identidade visual e evita que a interface vire uma coleção de cores desconectadas. Para sistemas de design, documente a combinação aprovada: text-muted em surface, primary em background, danger em surface, e assim por diante.

Erros comuns em contraste WCAG

O primeiro erro é testar apenas o tema claro. Tema escuro costuma ter problemas em textos cinza, bordas e placeholders. O segundo é ignorar texto pequeno dentro de botões, chips e tabelas. O terceiro é confiar na percepção visual: monitores, brilho e daltonismo mudam completamente a leitura.

Use a ferramenta como parte do fluxo de revisão. Cole a cor de texto, cole a cor de fundo, confirme AA para texto normal e AAA quando o texto for crítico. Se o produto atende público amplo, AA deve ser o mínimo operacional, não uma melhoria opcional.

Perguntas frequentes

Preciso sempre mirar AAA?

Não. AAA é excelente para conteúdo longo e interfaces de alta acessibilidade, mas AA é o baseline mais comum para produtos digitais. O importante é não publicar pares abaixo de AA para texto essencial.

Contraste vale para ícones?

Sim. Ícones que comunicam estado, erro, ação ou navegação também precisam de contraste suficiente. Se o ícone for puramente decorativo, o impacto é menor, mas ainda afeta legibilidade visual.

Quando revisar novamente

Revisite contraste sempre que mudar tema, fonte, peso tipográfico ou cor de marca. Uma troca pequena em font-weight, por exemplo, pode transformar um texto antes confortável em um texto difícil de ler. Contraste não é uma checagem única; ele deve acompanhar o ciclo de design system.