Exemplo de texto normal - A rápida raposa marrom.
Exemplo de texto grande (18pt+)
–
Taxa de contraste
| Norma | Nível | Taxa mínima | Resultado |
|---|---|---|---|
| Texto normal | WCAG AA | 4.5:1 | – |
| Texto grande (≥18pt / ≥14pt negrito) | WCAG AA | 3:1 | – |
| Texto normal | WCAG AAA | 7:1 | – |
| Texto grande (≥18pt / ≥14pt negrito) | WCAG AAA | 4.5:1 | – |
Como usar o verificador de contraste
- Use os seletores de cor ou insira códigos HEX para as cores de primeiro plano (texto) e fundo.
- A taxa de contraste e os resultados de conformidade WCAG atualizam instantaneamente.
- Use Trocar para inverter primeiro plano e fundo.
Requisitos de contraste WCAG
| Padrão | Tipo de texto | Taxa mínima |
|---|---|---|
| WCAG AA | Texto normal | 4,5:1 |
| WCAG AA | Texto grande (≥18pt ou ≥14pt negrito) | 3:1 |
| WCAG AAA | Texto normal | 7:1 |
| WCAG AAA | Texto grande | 4,5:1 |
WCAG 2.1 nível AA é o mínimo legal para a maioria das regulamentações de acessibilidade (UE, UK, EUA).
Cálculo da taxa de contraste
Luminância relativa: L = 0,2126R + 0,7152G + 0,0722B. Taxa: (L1 + 0,05) / (L2 + 0,05) onde L1 é a cor mais clara.
Por que o contraste é importante
Cerca de 300 milhões de pessoas no mundo têm deficiência na visão das cores. Contraste suficiente assegura legibilidade em todas as condições.
Dicas para passar no WCAG AA
- Azul escuro (
#003087) ou cinza muito escuro (#333333) sobre branco passam facilmente 4,5:1 - Se a sua cor de marca é clara, use-a como fundo com texto escuro
- Nunca use a cor sozinha para transmitir informação, adicione ícones ou padrões