Ferramenta grátis

Verificador de contraste WCAG

Verifique contraste de cor contra WCAG AA e AAA. Correções de um clique que passam — cobre texto normal, texto grande e componentes UI.

Cor do texto (primeiro plano)

Cor de fundo

—:1

Razão de contraste

Preview — texto sobre fundo

A rápida raposa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Este é texto de corpo a 14px para checar contraste de texto pequeno.

Botão

Preview — invertido

A rápida raposa

Mesmo texto e fundo, invertidos. Alguns pares de cores só funcionam em uma direção.

Botão

Correções rápidas — cores aprovadas mais próximas

Sobre o contraste WCAG

AA é o padrão legal na maioria das jurisdições: 4.5:1 para texto normal, 3:1 para texto grande (18pt+ ou 14pt negrito).
AAA é "aprimorado": 7:1 normal, 4.5:1 grande. Mire nisso para texto de corpo se conseguir.
Componentes de UI (botões, bordas de form, ícones) precisam de 3:1 contra a cor adjacente — igual ao texto grande.
Cuidado com significado-só-por-cor. Combine cor com ícone, sublinhado ou rótulo para usuários daltônicos pegarem o sinal também.
Apple HIG e Material exigem ambos mínimo 4.5:1 para texto no seu app — falhar nisso é um sinal conhecido de revisão de acessibilidade da App Store.

LaunchShots vem com dicas de contraste integradas no editor — experimente.