Conversor de Cores - HEX, RGB, HSL e Contraste WCAG
Conversor de cores e verificador de contraste
HEX, rgb(), hsl() ou um nome de cor CSS — os quatro são lidos.
Tons
O mesmo matiz em onze níveis de luminosidade. Clique para torná-lo a cor atual.
Contraste
A razão entre duas cores, medida como a WCAG define.
| Par | Razão | AA (4,5:1) | AAA (7:1) |
|---|
O que esta ferramenta faz
Converter uma cor entre notações são cinco linhas de aritmética. A pergunta difícil é se um texto naquela cor dá mesmo para ler, e essa resposta exige um passo que a maioria das ferramentas pula. As duas coisas estão nesta página, com a mesma cor que você digitou.
Como usar
- 1 Digite uma cor em qualquer notação, ou use o seletor.
- 2 Copie a notação que precisa, ou clique num tom para ir até ele.
- 3 Leia a tabela de contraste. Tudo marcado como Não passa vai ser difícil de ler para alguém.
Por que o mesmo matiz parece diferente em HSL
HSL arredonda para graus e porcentagens inteiros, então converter para HSL e voltar nem sempre devolve os bytes iniciais. Por isso o HEX exibido aqui vem sempre do que você digitou, nunca de uma ida e volta pelo HSL — senão o campo escorregaria um passo a cada clique.
O que os números de contraste significam
A razão vai de 1:1 para duas cores iguais até 21:1 para preto puro sobre branco puro. Os limites abaixo são os que a ferramenta verifica.
| 4.5:1 | Texto normal, WCAG AA |
| 3:1 | Texto grande ou em negrito, WCAG AA |
| 7:1 | Texto normal, WCAG AAA |
| 21:1 | A maior razão possível: preto sobre branco |
O passo que a maioria das ferramentas pula
A luminância relativa não é a média dos valores dos canais. Cada canal precisa ser linearizado antes, porque os números de um código HEX são codificados em gama e não proporcionais à luz. Pulando esse passo, a razão ainda sai como um número plausível, só que errado, e o erro é maior nos meios-tons, onde vive a maioria das cores de interface.
Contraste é necessário, não suficiente
Um par pode passar de 4,5:1 e ainda assim ser uma escolha ruim: o daltonismo torna algumas duplas indistinguíveis mesmo com razões altas, e a cor nunca deveria ser a única coisa a carregar significado. Trate um «passa» aqui como piso vencido, não como veredito sobre o design.