O que Sistema de Cores Acessível faz?
Propósito
A skill Sistema de Cores Acessível fornece uma metodologia para criar paletas de cores que são visualmente coesas e funcionalmente acessíveis. Ela vai além da escolha estética de cores para um sistema estruturado de escalas, pares com contraste seguro e aplicação semântica, garantindo que o conteúdo seja perceptível por todos os usuários, incluindo aqueles com deficiências visuais.
Casos de Uso
- Estabelecer a presença digital de uma nova marca.
- Auditar e corrigir problemas de acessibilidade relacionados a cores em um site existente.
- Projetar temas claro/escuro.
- Definir cores semânticas para feedback (sucesso, erro, aviso).
Quando NÃO Usar
- Experiências Orientadas pela Arte: Onde a cor é usada puramente para expressão e não carrega informação funcional (embora a acessibilidade ainda seja encorajada).
- Aplicações Legadas com Código Fixo: Onde a dívida técnica torna impossível implementar um sistema de variáveis (concentre-se em correções pontuais).
- Elementos Puramente Decorativos: Elementos como padrões de fundo que não contêm texto ou componentes interativos (WCAG 1.4.3 não se aplica aqui).
Entradas
Para gerar um sistema de cores acessível, você precisa:
- Cor Primária da Marca: A cor central que identifica a marca (ex.: #0055FF).
- Base Neutra: Um ponto de partida para cinzas/pretos (ex.: #1A1A1A ou um neutro matizado).
- Alvo de Acessibilidade: Nível AA (padrão) ou AAA (aprimorado) do WCAG.
- Contexto de Uso: É para um dashboard de alta densidade, uma página de destino de marketing ou uma aplicação focada em utilidade?
Saídas
- Escalas Tonais: Paletas tonais para cores Primárias, Secundárias, Neutras e Semânticas (geralmente escalas de 10 etapas).
- Matriz de Contraste: Um mapa de quais cores de primeiro plano são seguras para usar em quais cores de fundo.
- Mapeamento Semântico: Funções definidas para cores (ex.:
--color-action-primary,--color-surface-muted). - Propriedades Personalizadas CSS: Um bloco de variáveis CSS pronto para produção, opcionalmente usando
color-mix()para derivar tons de hover/ativo a partir de um único token base, em vez de escolher manualmente cada cor de estado.
Fluxo de Trabalho
1. Gerar Escalas Tonais
Expanda as cores base em escalas (ex.: 50 a 900). Use uma ferramenta ou fórmula que mantenha etapas de luminosidade consistentes. Trabalhar no espaço de cores OKLCH (em vez de HSL) produz etapas de luminosidade perceptual mais uniformes entre matizes, o que torna o contraste mais fácil de prever antes do teste. Dica: Certifique-se de que seu Primário 500 ou 600 seja a versão "da marca".
2. Definir Neutros
Crie uma escala neutra. Considere "matizar" os neutros com uma pequena quantidade da cor primária (ex.: 2-5%) para criar uma aparência mais coesa.
3. Estabelecer Funções Semânticas
Atribua cores a funções funcionais:
- Ação: Cor primária para botões, links e estados ativos.
- Superfície: Fundos, cartões e divisores (Neutros).
- Conteúdo: Texto e ícones (Neutros de alto contraste).
- Status: Sucesso (Verde), Aviso (Amarelo/Laranja), Erro (Vermelho), Informação (Azul).
4. Realizar Validação de Contraste
Teste pares usando as fórmulas WCAG (1.4.3, 1.4.11):
- Texto Normal: 4,5:1 para AA, 7:1 para AAA.
- Texto Grande (>18pt): 3:1 para AA, 4,5:1 para AAA.
- Componentes de UI/Ícones: 3:1 para AA (contraste não textual, 1.4.11).
- Indicadores de Foco: 3:1 contra as cores adjacentes, e o indicador não deve ser ocultado por cabeçalhos fixos ou outro conteúdo (WCAG 2.2 SC 2.4.11, Foco Não Obscurecido).
5. Criar Regras de Pareamento
Documente quais cores de texto podem ser usadas em quais fundos. Exemplo: Texto branco (#FFFFFF) só é seguro em Primário 600 ou superior.
Regras de Decisão
- Legibilidade Primeiro: A função (legibilidade) sempre substitui a estética. Se uma cor da marca é muito clara para texto, use uma variante mais escura para o texto enquanto mantém a cor da marca para elementos decorativos.
- Evitar Cor Sozinha: Nunca confie na cor como a única maneira de transmitir informações (ex.: inclua um ícone ou rótulo de texto com uma mensagem de erro).
- Luminosidade Consistente: Mantenha os valores de luminosidade semelhantes entre diferentes matizes no mesmo nível de escala (ex.: Vermelho 500 e Azul 500 devem ter brilho percebido semelhante).
Restrições
- Responsividade: As cores devem manter o contraste em telas móveis onde o brilho ou telas de baixa qualidade podem reduzir a visibilidade.
- Acessibilidade: Deve atender pelo menos aos padrões WCAG 2.2 AA para todos os elementos funcionais, incluindo o requisito 2.4.11 de que os indicadores de foco permaneçam visíveis e não obscurecidos.
- Hierarquia: Use saturação de cor e contraste para guiar o olho; elementos mais importantes (CTAs) devem ter maior peso visual.
Padrões Comuns de Falha
- Contraste Insuficiente: Usar texto cinza claro em fundo branco ou texto branco em uma cor de marca clara.
- Cores Vibrantes: Parear cores de alta saturação (como vermelho e verde) que causam cansaço visual.
- Muitas Cores: Criar um efeito "arco-íris" que dilui a identidade da marca e confunde a hierarquia.
- Uso Semântico Incorreto: Usar "Vermelho de Erro" para um elemento decorativo, causando ansiedade no usuário.
Critérios de Validação
- Cada elemento de texto funcional tem uma taxa de contraste de pelo menos 4,5:1 contra seu fundo.
- Componentes de UI (bordas, ícones) têm pelo menos 3:1 de contraste.
- O sistema inclui uma escala clara para cores primárias e neutras.
- A informação nunca é transmitida apenas através da cor.
- O sistema é documentado usando propriedades personalizadas CSS para portabilidade.