Contraste de Cores na Web: Como Garantir Legibilidade para Todos
Guia sobre contraste de cores na web para acessibilidade. Ratios WCAG, ferramentas de verificação e como escolher paletas acessíveis sem sacrificar o design.
Porquê o contraste importa
Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de daltonismo. Milhões de pessoas têm baixa visão. Um contraste adequado garante que todos podem ler o conteúdo.
Ratios mínimos WCAG 2.1 AA
| Elemento | Ratio mínimo |
| Texto normal (< 18pt) | 4.5:1 |
| Texto grande (≥ 18pt ou 14pt bold) | 3:1 |
| Elementos gráficos UI | 3:1 |
| Logótipos | Sem requisito mínimo |
Erros comuns
Ferramentas de verificação
- EAAPass: Analisa todos os contrastes do site automaticamente
- Contrast Checker (WebAIM): Verificação manual de pares de cores
- Chrome DevTools: Mostra ratio de contraste no inspetor
- Sim Daltonism: Simula diferentes tipos de daltonismo
Como escolher cores acessíveis
Design bonito E acessível
Acessibilidade não significa design feio. Muitas marcas de topo têm contrastes excelentes. A chave é verificar cedo no processo de design.
Verifique o contraste do seu site. Audite com o EAAPass ou contacte-nos.
Artigos relacionados
WCAG 2.1: Guia Prático para Developers e Designers Web
Guia prático das WCAG 2.1 para developers. Critérios de sucesso, exemplos de código, ferramentas de teste e como atingir conformidade AA.
EAA (European Accessibility Act): Prazos e Multas que Precisa de Conhecer
Prazos, multas e obrigações do European Accessibility Act para empresas portuguesas. Saiba se a sua empresa está abrangida e como garantir conformidade.
Precisa de ajuda com o seu projecto?
Fale connosco, respondemos em 24 horas, sem compromisso.
Falar com a equipa →