Verificar Contraste de Cor de Botões
Botões são a falha mais comum de auditoria de acessibilidade após contraste de cor em texto. Um botão que não atende aos requisitos de contraste bloqueia os usuários de completar tarefas, enviar formulários ou navegar sua aplicação. Este exemplo testa texto branco (#ffffff) em um botão azul padrão (#3b82f6).
Por Que o Contraste de Botões é Tricky
Botões têm dois requisitos de contraste separados que frequentemente são confundidos:
- Contraste de texto (SC 1.4.3): A cor do texto dentro do botão deve ter 4.5:1 de contraste contra a cor de fundo do botão
- Contraste não textual (SC 1.4.11): O limite visual do botão deve ter 3:1 de contraste contra o fundo adjacente (a página ou cartão por trás)
Um botão pode passar o contraste de texto mas falhar o não textual, ou vice-versa. Você precisa verificar ambos.
O Problema do Botão Azul
A maioria dos sistemas de design usa azul como cor de botão primário. Como os tons azuis comuns se comportam com texto branco:
| Cor do botão | Proporção texto branco | WCAG AA | Notas |
|---|---|---|---|
| #3b82f6 (blue-500) | 4.56:1 | Passa | Passa por pouco, sem margem |
| #2563eb (blue-600) | 6.44:1 | Passa | Mínimo recomendado |
| #1d4ed8 (blue-700) | 8.59:1 | Passa | Bom para CTAs primários |
| #60a5fa (blue-400) | 2.73:1 | Falha | Erro comum |
| #93c5fd (blue-300) | 1.47:1 | Falha | Nunca usar com texto branco |
Estados do Botão e Contraste
Cada estado interativo deve atender aos requisitos de contraste:
| Estado | Primeiro plano | Fundo | Proporção | Passa? |
|---|---|---|---|---|
| Padrão | #ffffff | #3b82f6 | 4.56:1 | AA passa |
| Hover | #ffffff | #2563eb | 6.44:1 | AA passa |
| Ativo | #ffffff | #1d4ed8 | 8.59:1 | AA passa |
| Desabilitado | #94a3b8 | #cbd5e1 | 1.46:1 | Isento |
| Focus ring | #ffffff | #1e40af | 10.03:1 | AA passa |
Erros Comuns de Acessibilidade de Botões
- Azul claro com texto branco: Usar blue-400 ou blue-300 com texto branco falha WCAG
- Fundos de gradiente: Um gradiente que transita de passar para falhar cria contraste inconsistente
- Focus rings que se misturam: Indicadores de focus devem ser visíveis contra tanto o botão quanto o fundo da página
- Botões somente de ícone sem rótulos: Falta aria-label torna o botão invisível para leitores de tela
- Cor como único indicador: Botões desabilitados que dependem apenas de opacidade reduzida sem outras pistas visuais
Como Usar
- Insira a cor de texto do seu botão no campo de primeiro plano
- Insira a cor de fundo do botão no campo de fundo
- Verifique se a proporção atende 4.5:1 para texto normal ou 3:1 para texto grande (18px bold ou 24px+)
- Teste cada estado do botão (padrão, hover, ativo, focus) separadamente
- Use as sugestões de cor acessível para encontrar melhores combinações
Testando a Stack Completa de Botões
Botões raramente existem isolados. Verifique cada variante no seu sistema de design: primário, secundário, contorno, fantasma e desabilitado. A ferramenta CSS Gradient pode ajudá-lo a gerar fundos de botões, mas sempre verifique a proporção de contraste final com o Verificador de Contraste WCAG antes de publicar.