Interfaces de contraste e lisibilidade

1) Porquê o contraste

• reduz a carga cognitiva e a exaustão,
• melhora a velocidade de digitalização da interface,
• aumenta a disponibilidade para pessoas com deficiência visual e percepção de cores,
• reduz o número de erros em cenários interligados (pagamentos, formulários, confirmações).

2) Conceitos básicos e fórmulas

2. 1 Contraste por WCAG

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), onde 'L1 ≥ L2', 'L' - Brilho relativo (0.. 1).

2. 2 Luminosidade relativa (sRGB)

1. Apresente os componentes R, G, B para a faixa 0.. 1.

• Se 'c ≤ 0. 04045 ', to' c _ lin = c/12. 92`
• senão 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Brilho: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Representações de cores

HSL/HSV - Fácil de ajustar manualmente, mas não uniforme.
Lab/LCH/OKLCH - mais perto da percepção humana; O OKLCH é útil para variação sistemática de luminosidade/saturação, mantendo a lisura.

3) Normas e objetivos (WCAG 2. 2)

Texto ≥ 14 pt bold ou ≥ 18 pt (normal): contraste mínimo de 3:1 (AA).
O resto do texto é um contraste mínimo de 4. 5:1 (AA).
AAA (maior leitura): 7:1 para o texto normal; 4. 5:1 para um grande.
Iconografia e elementos não fotográficos importantes (limites de campos de entrada, checkbox, botões, indicadores de erro): referência 3:1 com fundo.
Os estados (hover/focus/pressed/disabled) devem ter uma diferença de no máximo 3:1 entre os estados ou com fundo, além de indicadores nefotográficos explícitos (sublinhar referências, sombras/molduras, alterar a espessura).

4) Sistema de design: tokens de contraste

Recomendamos que o sistema de design identifique o contraste como propriedade de tokens.

• 'fg/primary' ↔ 'bg/base' ≥ 7:1 (AAA para texto crítico)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted' n' bg/subtle ' 3:1 (texto útil)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (limites de campos, cartões)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (links/botões)
• 'interactive/disabled' não deve simular os estados ativos; use a redução de contraste e o cursor/ÁRIA atributos.

• a luz básica do tema (L), em seguida os desvios ' L' para as camadas/superfícies ('bg/subtle', 'bg/elevated'),
• verifique pares de contraste mínimos em testes.

5) Temas claros e escuros

Tema claro: texto quase preto (não puro # 000, mas um tom quente/frio), fundo de branco a levemente tingido para reduzir o «brilho».
Tema escuro: evite o # 000 fundo puro - grafite profundo/carvão com L≈0. 12–0. 16 reduz as luzes; suavizem o texto branco para L≈0. 9.
Mantenha os mesmos objetivos de contraste em ambos os temas; Não admita que os acentos de cores fiquem mais lidos em um fundo escuro (muitas vezes, você precisa de uma mudança de «Se L» e reduzir a saturação).

6) Texto em imagens e vídeos

Use overleys (gradiente/camada translúcida 40-60%) ou tintas sob o texto.
Fixe o mínimo de 4. 5:1 entre o texto e o pano de fundo local.
Para um vídeo dinâmico, um fundo/overlay adaptativo para analisar a luminosidade do quadro (sampling central/falso).

7) Estados e interatividade

Os links não devem ser apenas uma cor, como sublinhar por omissão ou sublinhar em hover/focus + contraste ≥ 3:1 com texto normal.
Botões: texto e ícone ≥ 4. 5:1 para o preenchimento; preenchimento ≥ 3:1 para o ambiente.
Erros/êxito/advertência: não se baseie na cor; Adicione ícones/dicas de texto; forneça um contraste de texto mínimo de 4. 5:1.

8) Pessoas com deficiência de percepção de cores

• Deuteranopia/Protanopia (área vermelha e verde): evite combinações de «vermelho vs verde» sem sinais adicionais.
• Tritanopia: pares azul e amarelo para verificar separadamente.
• Fique claro em formulários e gráficos: marcas de texto, diferentes tipos de traços/marcadores, padrões de preenchimento, assinaturas de segmentos.

9) Tipografia e fundo

Texto principal: 14-16 px mínimo (web), 16-18 px para áreas de conteúdo.
Intervalo de linha 1. 4–1. 6 melhora a leitura em um fundo de alto contraste.
Evite desenhos finos em contraste insuficiente.
Texto nos fundos coloridos: reduza a saturação do fundo e/ou aumente a luminosidade para chegar ao ponto de destino.

10) Gráficos, tabelas, gráficos

Linhas/colunas ≥ 3:1 para a grade/fundo.
Assinaturas de eixos e lendas 4. 5:1.
Use formas/pattern diferentes, além da cor.

11) Contraste dinâmico/adaptativo

Auto contrast: calcule a cor de contraste do texto para o preenchimento selecionado (por exemplo, usando OKLCH: seleção 'L' para alcançar 4. 5:1).

Configurações de sistema: respeite «prefers-contrast», «forced-colors», «high-contrast»

Personalização: Configuração de «alto contraste» no aplicativo (amplificação de « L», substituição dos acertos de marca por mais neutros, mantendo a marca no formulário/ícone).

12) Processos e automação de controle

12. 1 Para Designers

Verifique o contraste nos layouts (em ambos os temas e nos fundos-chave).
Digite «slots contrastantes» nos componentes (title/primary/segundary/hint).
Documente os contextos de fundo válidos para cada componente.

12. 2 Para desenvolvedores

Helpers Unit: função de cálculo de contraste e asserto em testes para vapor de token.
Acervos visuais com verificação de métricas contrastantes (screen-render + cálculo L1/L2 por sample).
Linters de estilo: impede a cor «crua», apenas através de tocadores.

12. 3 NO CI/CD

Verificar todos os pares 'fg/bg' em tópicos e estados.
Relatório de violações com o componente, a opção, o tema e o valor real (por exemplo, 3. 9:1 para os 4 exigidos. 5:1).

13) Especificidades iGaming (opcional)

Banners promocionais brilhantes e cartões de torneios muitas vezes «comem» o texto. Você precisa de tinta/overley e limitar a saturação do fundo.
Itens de sistema de notificação responsável (18 +, limites, riscos) - AAA em contraste.
As tabelas de líderes/coeficientes incluem números e caracteres «+/-» ≥ 4. 5:1, realçar os ganhos não é apenas cor (ícones/rótulos).

14) Antipattern

Baseia-se apenas na cor para variar o estado.
Fontes cinzentas finas em fundo colorido sem cálculo de contraste.
«Escuro-na-escura» em Dark Modo, «brilhante» nas zonas promocionais.
Texto no fundo com detalhes/ruídos sem tons.

15) Folha de cheque para revidar

Texto básico

• ≥ 4. 5:1 (normal), ≥ 3:1 (grande/grosso).

Links/botões

• Texto do botão ≥ 4. 5:1 para o preenchimento.
• Diferenças de estado ≥ 3:1 ou indicadores explícitos.

Ícones/limites

• ≥ 3:1 para o fundo.

Tópicos escuros/claros

• Os mesmos objetivos de contraste foram alcançados.

Fundos de mídia

• Overlei/prancha, coeficiente aguentado.

Disponibilidade

• Há sinais não fotográficos além da cor.

Automação

• Testes de contraste em CI/CD sobre tocadores e componentes.

16) Introdução de tokens (exemplo de notação)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Nota: Os valores são padrões; os finais são selecionados por um cálculo de contraste em um tema específico.

17) Documentação para a equipe

Nos heidline, especifique: alvos de contraste, exemplos de pares certos/errados, matriz 'fg x bg' para os componentes-chave, regras para os fundos de mídia, e como incluir o modo 'Alto contraste'.
Mantenha viva a página Exceções e Causas (por exemplo, permitida 3. 8:1 na mala estreita de um grande cabeçalho de tela).

Resumo breve

O contraste é um parâmetro medível, não saboroso. Defina os alvos (AA/AAA), controle-os através de tokens (melhor em OKLCH), verifique automaticamente em CI e visualmente em layouts, leve em conta temas escuros/claros e pessoas com deficiência de visão de cores. Isso garante a lisura, reduz os erros e aumenta a conversão.