Por que WCAG exige 4.5:1 de contraste?
É o padrão AA para que usuários com baixa visão leiam sem ajuda técnica.
Seletor de cor
Escolha cores e converta entre HEX, RGB, HSL
Razão de contraste
⬜ ⬛
Cor complementar & Cores análogas
Seletor de cor
HEX ou RGB em CSS?
HEX é mais conciso e comum. Use rgba() para transparência.
Como implementar cores no modo escuro?
Use propriedades CSS personalizadas com @media (prefers-color-scheme: dark).
Códigos de cor: HEX, RGB e HSL
HEX, RGB e HSL são três formas de representar cores. HEX é mais comum na web, RGB usa valores vermelho-verde-azul, HSL usa matiz-saturação-luminosidade.
O que é a razão de contraste WCAG?
O padrão WCAG AA requer razão de contraste de pelo menos 4.5:1 para que usuários com baixa visão possam ler texto.
HSL: O modelo de cor intuitivo
HSL usa Matiz (0-360°), Saturação (0-100%) e Luminosidade (0-100%) para descrever cores intuitivamente.
Cores complementares e análogas
As complementares se opõem em 180° na roda de cores. As análogas criam paletas harmoniosas.
Gerenciamento de cores com CSS Custom Properties
Variáveis CSS centralizam o gerenciamento de cores e facilitam temas e modo escuro.
Perguntas frequentes
HEX ou RGB em CSS?
HEX é mais conciso e comum. Use rgba() para transparência.
Por que WCAG exige 4.5:1 de contraste?
É o padrão AA para que usuários com baixa visão leiam sem ajuda técnica.
Como implementar cores no modo escuro?
Use propriedades CSS personalizadas com @media (prefers-color-scheme: dark).