O que é Verificador de Contraste WCAG?

Um verificador de contraste de cores WCAG que calcula a proporção de contraste entre cores de primeiro plano e de fundo e indica se a combinação atende aos padrões de acessibilidade WCAG 2.1 Nível AA e AAA para texto normal e grande.

Como usar

  1. Insira ou selecione uma cor de primeiro plano (texto) e uma cor de fundo usando os seletores de cor ou campos hexadecimais.
  2. Visualize a proporção de contraste e os resultados de aprovação/reprovação para conformidade com WCAG AA e AAA em texto normal, texto grande e componentes de interface.
  3. Se o contraste reprovar, use os ajustes de cor sugeridos para encontrar a combinação de cores acessível mais próxima.

Resultado

Um designer de UI verifica o azul da marca #3B82F6 sobre branco #FFFFFF — a proporção de 4,5:1 passa no AA para texto grande, mas reprova no AAA para texto normal. Ele escurece para #2563EB (5,3:1) para passar em ambos.

Ferramentas relacionadas