Pular para conteúdo

Projeto 05: Paleta Cromática e Acessibilidade WCAG 🎨

Escopo do Projeto

Objetivo: Construir uma paleta de cores acessível baseada na regra 60-30-10, definindo escalas tonais (50 a 900) e validando contraste mínimo de 4.5:1 (WCAG AA).

🎯 1. Contexto & Desafio Prático

Cores evocam sentimentos e comunicam estados do sistema, mas devem ser inclusivas. Você projetará uma paleta completa com cor primária, secundária, neutros e semânticos (Sucesso, Alerta, Erro), testando o contraste de cada par de texto/fundo.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Escalas Tonais): Gerar 9 variações de tonalidade (100, 200, 300, 400, 500 [Base], 600, 700, 800, 900) para Primária e Neutros.
  • R2 (Cores Semânticas): Definir tokens funcionais: Success (Verde), Warning (Amarelo/Laranja) e Danger/Error (Vermelho).
  • R3 (Validação de Contraste): Todos os pares de texto sobre fundo devem atender ao padrão WCAG AA (mínimo 4.5:1 para texto normal e 3:1 para texto grande).
  • R4 (Tokens Color Styles): Cadastrar no Figma como Color/Primary/500, Color/Semantic/Success, Color/Neutral/100.

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    Primary["Primária (60% Neutros / 30% Estrutura / 10% Destaque)"] --> Tonal["Escala Tonal: 100 a 900"]
    Tonal --> ContrastCheck["Teste de Contraste WCAG Plugin"]
    ContrastCheck --> Pass["Contraste >= 4.5:1 (Aprovado AA)"]
    ContrastCheck --> Fail["Contraste < 4.5:1 (Ajustar Luminância)"]
    style Primary fill:#e1f5fe,stroke:#01579b
    style Tonal fill:#fff3e0,stroke:#e65100
    style Pass fill:#e8f5e9,stroke:#2e7d32
    style Fail fill:#ffebee,stroke:#c62828

💻 4. Especificação Técnica & Código de Referência

// color_tokens.json
{
  "color": {
    "primary": {
      "50": "#EBF5FF",
      "500": "#2563EB",
      "900": "#1E3A8A"
    },
    "semantic": {
      "success": "#10B981",
      "warning": "#F59E0B",
      "error": "#EF4444"
    },
    "neutral": {
      "background": "#FFFFFF",
      "surface": "#F9FAFB",
      "text-primary": "#111827"
    }
  }
}

📦 5. Critérios de Avaliação e Entrega

  1. Documentação visual da paleta com os badges de contraste (ex: 7.2:1 - AAA).
  2. Cores devidamente salvas como Color Styles no arquivo Figma.
  3. Demonstração prática de um alerta de erro e um botão primário acessíveis.