Avaliação de Cor e Identidade Visual

Passo 1 — Mapear toda a paleta em uso

Antes de qualquer avaliação, identificar todas as cores que aparecem na interface — não apenas as principais, mas as utilizadas em estados, bordas, backgrounds, textos e decorações.

O que mapear:

- Cor principal (ação primária, elementos de destaque) - Cor secundária (suporte, hover states, elementos complementares) - Neutros: backgrounds, superfícies de card, bordas, dividers - Cores semânticas: sucesso, erro, aviso, informação - Cores de texto: principal, secundário, desabilitado, placeholder - Cores decorativas: se houver gradientes, ilustrações ou elementos visuais

Para cada cor, registrar: papel na interface, onde aparece, e se segue ou viola as cores de marca da ficha de contexto.

Passo 2 — Avaliar o uso semântico de cor

Verificar se cada cor tem um papel claro e consistente ou se é usada de forma arbitrária:

Consistência semântica:

- A cor de ação primária é usada exclusivamente para ações primárias, ou aparece também em elementos decorativos, links secundários e estados? - Cores semânticas (verde = sucesso, vermelho = erro) são usadas de forma consistente ao longo da interface? - Há cores que aparecem em contextos conflitantes (ex: azul em links E em badges de estado E em decorações de background)?

Clareza de hierarquia por cor: - Diferentes níveis de importância são diferenciados por cor de forma consistente? - O eixo principal de ação (o que o usuário deve fazer) se destaca cromaticamente dos elementos secundários? - Elementos desabilitados, inativos ou de suporte são visualmente distintos dos ativos e primários?

Passo 3 — Verificar contraste e acessibilidade

Avaliar os pares mais críticos de texto sobre fundo para conformidade com WCAG AA (padrão mínimo profissional):

Pares obrigatórios a verificar:

- Texto principal sobre fundo de página (background padrão) - Texto sobre cards ou superfícies coloridas - Labels e valores sobre backgrounds de formulário - Texto dentro de botões primários e secundários - Texto de links em contexto de corpo de texto - Texto de estados (labels de erro, aviso, sucesso)

Parâmetros WCAG AA: - Texto normal (abaixo de 18px ou 14px bold): razão mínima de 4.5:1 - Texto grande (18px+ ou 14px+ bold): razão mínima de 3:1 - Componentes de interface (bordas de input, ícones funcionais): razão mínima de 3:1

Casos de atenção especial: - Texto em cinza neutro sobre fundo branco puro frequentemente passa no teste matemático mas falha na percepção — verificar se a cor de texto secundário parece legível além de passar no cálculo - Texto de cor de marca sobre fundo branco pode ter razão adequada em tons escuros e problemática em tons médios ou claros

Passo 4 — Avaliar alinhamento com a identidade visual esperada

Com base no tom de marca e nas referências visuais da ficha de contexto, avaliar se a paleta em uso comunica a sensação certa:

Temperatura:

- A paleta é quente (vermelhos, laranjas, amarelos, brancos quentes), fria (azuis, verdes, cinzas frios) ou neutra? Isso está alinhado com o tom esperado? - Os neutros usados (backgrounds, bordas) têm temperatura consistente com as cores principais?

Intensidade e saturação: - A saturação geral da paleta está adequada para o contexto? (Produtos técnicos frequentemente funcionam melhor com saturação controlada; produtos de consumo podem suportar mais vivacidade) - Há cores com saturação excessiva que parecem "gritar" no contexto geral da interface?

Padrões genéricos a identificar: - Paleta de "AI slop": gradientes de roxo para azul sem propósito, paletas de cores que não têm relação com o produto ou público - Cinza neutro puro como único background (sem temperatura, sem personalidade) - Uso decorativo de cor sem função semântica ou hierárquica

Passo 5 — Documentar achados com localização e impacto

Para cada problema identificado:

- Nomear o problema com precisão - Indicar os elementos ou pares de cor afetados - Descrever o impacto na acessibilidade, na percepção de qualidade ou na identidade - Indicar a severidade: alta (viola contraste WCAG AA ou critério da ficha), média (degrada percepção), baixa (melhoria incremental)

---