About
Visualizando em Português Ver em inglês

Conversor de cores e verificador de contraste

Converta entre HEX, RGB e HSL, e verifique o contraste de acessibilidade WCAG entre duas cores. Tudo roda no seu navegador.

Conversor de cores

Verificador de contraste WCAG

Texto normal (16 px)

Texto grande (24 px / negrito 18.66)

Razão de contraste —
WCAG AA Texto normal— Texto grande—
WCAG AAA Texto normal— Texto grande—
  1. Escolha uma cor com o seletor ou digite um valor HEX, RGB ou HSL — os outros se atualizam automaticamente.
  2. Role até o Verificador de contraste e defina uma cor de primeiro plano e de fundo.
  3. Leia a razão calculada e os selos de aprovação/reprovação AA / AAA para texto normal e grande.
  4. Ajuste qualquer das cores até que a razão supere o limite que seu design exige.
O que ele faz?

O conversor traduz uma única cor entre HEX (#rrggbb), RGB (rgb(r, g, b)) e HSL (hsl(h, s%, l%)) em tempo real, assim você cola o formato que seu design system usa e recebe os outros dois. O verificador de contraste pega um primeiro plano e um fundo, lineariza ambos pela curva gama sRGB e informa a razão de contraste WCAG 2.x com vereditos AA / AAA para textos normais e grandes.

Exemplo

Entrada — um azul de marca típico:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Comparado com branco (#ffffff) como fundo:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Por que esse par de cores falha no WCAG AAA?

Estas são as ciladas mais comuns em contraste e conversão:

  • Confundir AA grande com AA normal. Texto grande exige apenas 3:1; por isso um link que fica bom num H1 pode falhar em tamanho de corpo. Um par em 3.5:1 passa em títulos mas reprova em parágrafos.
  • Usar luminosidade HSL como atalho para contraste. hsl(0, 100%, 50%) (vermelho) e hsl(240, 100%, 50%) (azul) têm L=50% mas luminâncias bem diferentes. Calcule o contraste sempre a partir do RGB, não da luminosidade HSL.
  • Esquecer a composição alfa. Texto rgba(0, 0, 0, 0.6) sobre branco equivale a #666666. Cheque o HEX achatado, não o valor semitransparente.
  • Comprimento de HEX errado. #fff expande para #ffffff, mas #ffff é a forma curta de 4 dígitos com byte alfa. Confira a quantidade de dígitos quando um campo HEX rejeita silenciosamente a entrada.
  • Misturar display-P3 e sRGB. Cores retiradas de ferramentas como Figma em modo de gama ampla podem sair do sRGB, e navegadores as cortam. Converta para sRGB na ferramenta de origem antes de copiar o HEX.
  • Testar contraste apenas contra branco puro. Se o layout real colocar o texto sobre #f3f4f6 ou sobre foto, o contraste visível cai. Teste com o fundo real.
Perguntas frequentes

Que razão de contraste preciso para passar no WCAG AA?

O WCAG 2.1 AA exige 4.5:1 para texto normal de corpo e 3:1 para texto grande — grande significa ao menos 18 pt (24 px) regular ou 14 pt (18.66 px) em negrito. Componentes de UI e objetos gráficos precisam de 3:1 contra o fundo. O AAA eleva para 7:1 em texto normal e 4.5:1 em texto grande.

Por que o HSL que eu redigito devolve RGB ligeiramente diferente?

A maioria das ferramentas guarda HSL em porcentagens inteiras, então o ciclo RGB → HSL → RGB pode desviar uma unidade por canal. Esse desvio cai dentro do JND e é invisível na tela; se você precisar de ida e volta exata, mantenha HEX ou RGB como fonte da verdade e trate HSL como visualização.

Esta ferramenta usa correção gama sRGB para o contraste?

Sim. O cálculo segue a fórmula WCAG 2.x: linearização de cada canal sRGB pela curva gama, luminância relativa e (L1 + 0.05) / (L2 + 0.05). Média simples de canais ou luminosidade HSL ingênua geram números enganosos e não batem com o resultado WCAG.

Como lidar com alfa ou cores semitransparentes?

O contraste WCAG é definido contra fundo sólido, então achate qualquer alfa compondo o primeiro plano sobre o fundo real primeiro. Por exemplo, um bloco de texto preto a 50% sobre página branca equivale a #808080 sobre #ffffff. Passe esse HEX achatado ao verificador em vez do valor semitransparente.

HEX #rgb é o mesmo que #rrggbb?

Sim. A forma curta de 3 dígitos expande cada nibble repetindo-o, então #f0c vira #ff00cc. As formas de 4 e 8 dígitos adicionam canal alfa. Esta ferramenta aceita HEX de 3, 6 e 8 dígitos, e como o WCAG exige cor sólida composta, o byte alfa é apenas informativo para o contraste.

Vocês guardam as cores que eu digito ou escolho?

Não. Não mantemos registro das cores que você testa, converte ou checa para contraste. Tudo o que você digita ou arrasta para o seletor é descartado quando você fecha a aba — sem logs, sem analytics sobre seus valores de cor. Dê uma olhada nas ferramentas de desenvolvedor do navegador se quiser confirmar.