WCAG AA
Texto com contraste insuficiente
O texto precisa ter razão de contraste mínima de 4.5:1 contra o fundo (3:1 para texto grande ≥18pt ou ≥14pt negrito). Texto em imagens segue as mesmas regras.
Impacto por tipo de deficiência
Baixa visão
Texto com baixo contraste é ilegível para usuários com acuidade visual reduzida, mesmo com zoom.
Daltonismo
Certas combinações de cores (verde/vermelho, azul/roxo) com baixo contraste tornam-se indistinguíveis.
Ambiental
Sob luz solar direta ou em telas com brilho reduzido, texto com baixo contraste desaparece.
Incorreto — cria barreiras de acessibilidade
/* ❌ Contraste insuficiente — gray-400 em branco: 2.85:1 */
.texto-secundario {
color: #9CA3AF; /* Tailwind gray-400 */
background: #FFFFFF;
}
/* ❌ Placeholder com contraste abaixo do mínimo */
input::placeholder {
color: #D1D5DB; /* gray-300: 1.66:1 */
}Correto — acessível para todos os usuários
/* ✓ gray-500 em branco: 3.95:1 — passa para texto grande */
/* ✓ gray-600 em branco: 5.74:1 — passa para todo texto */
.texto-secundario {
color: #4B5563; /* Tailwind gray-600 */
}
/* ✓ Placeholder com contraste adequado */
input::placeholder {
color: #6B7280; /* gray-500: 4.07:1 */
}
/* ✓ Verificação rápida com a fórmula WCAG:
Razão = (L1 + 0.05) / (L2 + 0.05)
Use: webaim.org/resources/contrastchecker */