Design de Alto Contraste

"Máxima legibilidade. Impactante, poderoso e universalmente acessível."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência secundária da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Conformidade com WCAG AAA: Cada par de cores deve exceder uma proporção de contraste de 7:1.
2. Limites Claros: Elementos interativos possuem bordas e estados de foco altamente visíveis.
3. Sem Ambiguidade: Evite cinzas sutis, texto com baixa opacidade ou elementos puramente decorativos que distraiam do conteúdo principal.

DNA Visual

• Cores: Industrial Chic (Preto e Branco) ou Editorial Moderno. Frequentemente usa uma única cor de destaque altamente luminosa (como Amarelo puro #FFFF00 ou Ciano #00FFFF) contra o preto.
• Tipografia: Fontes sans-serif altamente legíveis e robustas (Atkinson Hyperlegible, Inter, Roboto). Tamanhos de fonte base grandes (18px+).
• Estilização: Bordas sólidas de 2px ao redor de cartões e botões. Evite sombras projetadas, pois elas reduzem a clareza das bordas.

Implementação Web

• Foque bastante nos estados de foco (:focus-visible) e estados ativos claros.
• Exemplo de CSS:

:root {
  --hc-bg: #ffffff;
  --hc-text: #000000;
  --hc-accent: #0000FF; /* Pure blue */
  --hc-focus: #FF00FF; /* High visibility focus ring */
}

body {
  background-color: var(--hc-bg);
  color: var(--hc-text);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px; /* Larger default */
}

.hc-card {
  background-color: #ffffff;
  border: 3px solid #000000; /* Unmissable boundary */
  padding: 32px;
  border-radius: 8px;
}

.hc-btn {
  background-color: var(--hc-accent);
  color: #ffffff;
  border: 3px solid transparent; /* Reserve space for focus */
  border-radius: 4px;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Crucial for high contrast / accessibility */
.hc-btn:focus-visible, a:focus-visible {
  outline: 4px solid var(--hc-focus);
  outline-offset: 4px;
}

a {
  color: var(--hc-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

Implementação em Aplicativos

SwiftUI

struct HighContrastView: View {
    var body: some View {
        VStack(spacing: 32) {
            // High Contrast Card
            VStack(alignment: .leading, spacing: 16) {
                Text("Maximum Legibility")
                    .font(.custom("Atkinson Hyperlegible", size: 24))
                    .fontWeight(.bold)
                    .foregroundColor(.black)
                
                Text("Content is king. Borders are stark. Contrast ratios exceed 7:1.")
                    .font(.custom("Atkinson Hyperlegible", size: 18))
                    .foregroundColor(.black)
            }
            .padding(32)
            .background(Color.white)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.black, lineWidth: 3)
            )
            
            // High Contrast Action Button
            Button(action: {}) {
                Text("CONFIRM ACTION")
                    .font(.custom("Atkinson Hyperlegible", size: 18))
                    .fontWeight(.black)
                    .foregroundColor(.white)
                    .padding(.vertical, 16)
                    .padding(.horizontal, 32)
                    .background(Color.blue) // Must be a high-contrast blue, e.g., #0000FF
                    .cornerRadius(4)
            }
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
    }
}

• Confie em sobreposições .stroke(Color.black, lineWidth: 3) espessas.
• Garanta que o texto seja preto puro .black sobre branco puro .white. Não use cores .secondary se elas caírem abaixo de uma proporção de contraste de 7:1.
• Use fontes especificamente projetadas para legibilidade, como Atkinson Hyperlegible.

Flutter

class HighContrastScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Cartão de Alto Contraste
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(32),
                decoration: BoxDecoration(
                  color: Colors.white,

…