Cor

Cor acessível

Não use apenas cores para indicar a presença de um componente da interface do usuário ou o estado dele: use iconografia e/ou formas para ajudar na diferenciação. Não use APENAS cores para indicar sucesso/erros. Use ícones ou texto.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Contraste

• Padrões mínimos de contraste: mantenha 4,5:1 para texto normal e 3:1 para texto grande ou ícones.
• Garanta padrões de contraste sem texto: mantenha uma taxa de contraste mínima de 3:1 para limites e estados de componentes da interface do usuário.
  • Isso inclui elementos visuais (bordas, planos de fundo, sombras de caixa, sublinhados) que formam o limite ou indicam a presença de um componente de interface (por exemplo, bordas de campo de entrada).
  • Isso também inclui elementos visuais que indicam estados ativos em um componente (por exemplo, marcas de seleção de caixas de seleção ou botões de alternância).
  • Aviso: atender ao contraste não textual de 3:1 pode ser um desafio para designs minimalistas. Gradientes suaves ou sombras internas/externas sutis podem suavizar os limites visuais e, ao mesmo tempo, atender aos requisitos de acessibilidade.
• Use prefers-contrast somente quando necessário: use @media (prefers-contrast: more) quando o design tiver detalhes de baixo contraste (por exemplo, bordas sutis, texto secundário discreto) que precisam ser reforçados. A maioria dos sites que já atende ao contraste de referência não precisa disso.

Esquemas de cores claras e escuras

• Suporte a esquemas de cores claras e escuras: use @media (prefers-color-scheme: dark) e combine com a propriedade CSS color-scheme para que os controles de formulário, as barras de rolagem e outras superfícies renderizadas pelo user agent correspondam. Consulte Modo escuro para mais detalhes.

Modo de cores forçadas

• Suporte ao modo de cores forçadas: no modo de cores forçadas (alto contraste no Windows), o navegador substitui as cores do autor por palavras-chave do sistema e remove background-image, box-shadow e border-image. Defina substitutos de cores do sistema para tokens de cor usando @media (forced-colors: active).
• Use forced-color-adjust: none apenas quando a cor for uma informação essencial (destaque de sintaxe, amostra do seletor de cores). NÃO use forced-color-adjust: none apenas para preservar a estética.
• Não use background-image, box-shadow ou border-image para transmitir bordas, separadores ou estado: eles desaparecem em cores forçadas (e geralmente também na impressão). Se for necessário, garanta que haja uma alternativa no modo de cores forçadas, como outline ou border com palavras-chave de cores do sistema (CanvasText, LinkText, ButtonText, Highlight, GrayText etc.).

Gerando tonalidades

Antes de gerar tonalidades de forma dinâmica, verifique se é possível usar um token de design predefinido. Isso permite que o designer tenha muito mais controle e garante a consistência.

Se você precisar gerar cores mais claras ou mais escuras de forma dinâmica:

• NÃO ajuste apenas o canal de luminosidade em oklch/oklab ou lch/lab, por exemplo, oklab(from var(--primary) 0.9 a b). Embora essa seja teoricamente a maneira correta, os navegadores ainda não implementam o mapeamento de gama, então a cor resultante é imprevisível.
• Você pode usar color-mix() para misturar com branco ou preto (de preferência em oklab). Isso mantém a cor dentro da gama, mas tende a dessaturar demais as cores e produzir tons e sombras desbotados.
• É POSSÍVEL combinar o ajuste de luminosidade com qualquer um dos outros métodos (por exemplo, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) para equilibrar os dois, mas evite ultrapassar 30% no ajuste de luminosidade.