Insira cores HEX ou selecione cores Pantone para primeiro plano e fundo.
Revise a relação de contraste e os resultados WCAG AA ou AAA para texto normal, texto grande e componentes UI.
Use a pré-visualização, troque as cores, copie o CSS ou experimente sugestões Pantone acessíveis.

Usos do verificador de contraste

Valide pares de cores de marca antes de usá-los em layouts digitais.
Verifique botões, formulários, navegação e outros componentes UI para garantir contraste legível.
Compare paletas inspiradas em Pantone antes de adaptar cores de impressão para telas.
Documente resultados WCAG para revisões de acessibilidade e entrega de design.

Verificador de contraste de cor para fluxos WCAG, UI e Pantone

Use este verificador quando precisar confirmar que uma cor de texto, fundo, estado de botão ou paleta de marca será legível antes de entrar em um site, app, apresentação ou sistema de design.

Leia corretamente o resultado WCAG

A ferramenta calcula a luminância relativa das duas cores e retorna a relação de contraste usada pelo WCAG. Texto de corpo normalmente precisa de 4.5:1 para AA e 7:1 para AAA, enquanto texto grande e componentes UI essenciais têm limites menores.

Conecte cores Pantone e acessibilidade digital

Cores Pantone costumam ser escolhidas para marca e impressão, mas seus equivalentes em tela ainda precisam de verificação de acessibilidade. Pesquise nomes Pantone ou valores HEX, visualize o par e compare alternativas acessíveis antes de entregar as cores a design ou desenvolvimento.

Um fluxo prático para designers e desenvolvedores

Comece com os valores HEX exatos do arquivo de design, teste primeiro plano e fundo nos dois sentidos, copie o CSS ou relatório e mantenha o par aprovado junto da documentação da sua paleta Pantone.

Perguntas frequentes sobre o verificador de contraste

O que este verificador de contraste mede?

Ele mede a relação de contraste de luminância entre uma cor de primeiro plano e uma cor de fundo, depois compara o resultado com os limites WCAG.

Quais são os requisitos de contraste WCAG AA e AAA?

WCAG AA exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande ou componentes UI. WCAG AAA exige 7:1 para texto normal e 4.5:1 para texto grande.

Cores Pantone podem ser verificadas para acessibilidade na web?

Sim. Referências Pantone podem ser convertidas em valores de cor de tela e verificadas quanto ao contraste digital. Sempre confirme as cores finais no meio em que serão exibidas.

Aviso sobre contraste

Os resultados são calculados a partir de valores digitais e servem para planejamento de acessibilidade. Impressão física, materiais, iluminação e calibração de tela podem alterar o contraste percebido.