Converta uma cor entre HEX, RGB e HSL ao vivo — edite qualquer formato e os outros se atualizam. Depois verifique o contraste WCAG entre a cor do texto e a do fundo.
O mesmo pixel pode ser descrito de várias formas. O HEX
(#4f46e5) é a notação hexadecimal usada em CSS e HTML. O
RGB descreve a cor por três canais (vermelho, verde e azul), cada um de 0 a
255. O HSL usa matiz (hue, 0–360°), saturação e luminosidade — mais
intuitivo para clarear/escurecer ou girar o tom. Esta ferramenta converte entre os três ao
mesmo tempo: edite qualquer campo e os outros se ajustam.
As WCAG (Web Content Accessibility Guidelines) definem uma
razão de contraste mínima entre texto e fundo para garantir legibilidade,
inclusive para pessoas com baixa visão. A razão vai de 1:1 (cores idênticas) a
21:1 (preto sobre branco). O cálculo segue o WCAG 2.x: cada canal sRGB é
linearizado, combina-se a luminância relativa de cada cor
(0.2126·R + 0.7152·G + 0.0722·B) e aplica-se
(Lclara + 0.05) / (Lescura + 0.05).
| Critério | Texto normal | Texto grande |
|---|---|---|
| AA (mínimo) | 4.5:1 | 3:1 |
| AAA (aprimorado) | 7:1 | 4.5:1 |
"Texto grande" é definido como pelo menos 18pt (24px) normal, ou 14pt (18.66px) em negrito.
HSL usa valores inteiros de matiz/saturação/luminosidade, então a ida e volta pode arredondar 1 unidade em algum canal RGB. É esperado e imperceptível visualmente.
Não. O cálculo assume cores opacas, como recomenda o WCAG para o teste base. Para elementos translúcidos, avalie a cor efetiva já composta sobre o fundo.