Contraste e Cores
Garanta legibilidade ótima para todos os usuários
Critérios WCAG EN 301 549
Contraste de texto
Exemplo ruim
Texto cinza claro em branco (2.2:1) - Falha
Ratio: 2.2:1Texto cinza médio em branco (3.8:1) - Falha
Ratio: 3.8:1Texto amarelo em branco (1.9:1) - Falha
Ratio: 1.9:1Laranja em vermelho (1.2:1) - Falha
Ratio: 1.2:1Cinza escuro em fundo preto (2.5:1) - Falha
Ratio: 2.5:1Azul em fundo escuro (1.8:1) - Falha
Ratio: 1.8:1Exemplo bom
Texto cinza escuro em branco (7.0:1) - AAA Aprovado
Ratio: 7.0:1Texto preto em branco (21:1) - AAA Aprovado
Ratio: 21:1Texto azul escuro em branco (5.9:1) - AA Aprovado
Ratio: 5.9:1Branco em azul escuro (8.6:1) - AAA Aprovado
Ratio: 8.6:1Branco em fundo preto (21:1) - AAA Aprovado
Ratio: 21:1Amarelo em fundo escuro (12.3:1) - AAA Aprovado
Ratio: 12.3:1Explicação: A proporção de contraste WCAG AA requer um mínimo de 4.5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt+ negrito). O nível AAA é mais rigoroso com 7:1 e 4.5:1.
Informação por cor
Exemplo ruim
Formulário de cadastro
🔴 Vermelho = Erro, Verde = Válido
Status do pedido
Exemplo bom
Formulário de cadastro
Status do pedido
Explicação: Informações nunca devem depender apenas da cor. Sempre adicione indicadores visuais adicionais (ícones, padrões, texto).
Daltonismo e acessibilidade
Exemplo ruim
Gráfico de desempenho
Exemplo bom
Gráfico de desempenho
Explicação: Cerca de 8% dos homens e 0,5% das mulheres são daltônicos. Combinações vermelho-verde são particularmente problemáticas.
Seletor de tema acessível
Exemplo ruim
Conteúdo da página
Este texto muda de cor de acordo com o tema.
Cartão de informação
Informação importante para ler.
Exemplo bom
Conteúdo da página
Este texto mantém bom contraste em todos os temas.
Cartão de informação
Informação importante sempre legível.
Explicação: Um seletor de tema deve manter as proporções de contraste, preservar a legibilidade e respeitar as preferências do sistema do usuário.
Links - Sublinhado e identificação
Exemplo ruim
Links baseados apenas em cor
Acessibilidade web é essencial para criar sites inclusivos. Saiba mais sobre acessibilidade pode ajudá-lo a entender as melhores práticas. As diretrizes WCAG fornecem uma estrutura abrangente para melhorar a acessibilidade.
Visite nossa página de recursos para encontrar ferramentas e tutoriais.
Exemplo bom
Links baseados apenas em cor
Acessibilidade web é essencial para criar sites inclusivos. Saiba mais sobre acessibilidade pode ajudá-lo a entender as melhores práticas. As diretrizes WCAG fornecem uma estrutura abrangente para melhorar a acessibilidade.
Visite nossa página de recursos para encontrar ferramentas e tutoriais.
Explicação: Links devem ser identificáveis sem depender apenas da cor. Sublinhado, diferenças de padrão ou outros indicadores visuais são essenciais.