Guia de contraste de cores WCAG
Entenda os requisitos de contraste AA e AAA, como testar componentes de texto e UI e como corrigir pares com falha.
FAQ
- Qual proporção eu preciso para os botões?
- Os componentes da UI e os objetos gráficos geralmente precisam de pelo menos 3:1 em relação às cores adjacentes. O texto dentro dos botões ainda precisa de 4,5:1 (AA) ou 3:1 para texto grande.
Noções básicas de contraste WCAG
WCAG 2.x define taxas mínimas de contraste entre texto e cores de fundo. O nível AA é o alvo legal e de produto comum; AAA é mais rigoroso e recomendado para o corpo do texto, quando possível.
O contraste é baseado na luminância relativa, não na matiz. Duas cores podem parecer diferentes, mas falham no contraste se a luminosidade for muito semelhante.
Testando fluxo de trabalho
Escolha as cores de primeiro e segundo plano em seu sistema de design. Execute-os em um verificador de contraste. Observe os limites de texto normal versus grande.
Teste os estados de foco, foco e desabilitado — não apenas botões e links padrão.