Sobre esta ferramenta
Quatro notações para a mesma cor sRGB
HEX, RGB, HSL e HWB são quatro formas de escrever uma cor em sRGB, o espaço de cor predefinido da web. HEX e RGB indicam diretamente os canais vermelho, verde e azul, cada um de 0 a 255. HSL indica um ângulo de matiz, uma saturação e uma luminosidade; HWB indica o mesmo ângulo de matiz com uma quantidade de branco e uma quantidade de preto misturadas. Converter entre elas muda a notação, não a cor.
Um código hex de oito dígitos, como #5a3ff080, ou um quarto valor depois de uma barra, como rgb(90 63 240 / 0.5), acrescenta um canal alfa. A forma separada por espaços é a sintaxe do CSS Color Level 4 e funciona em todos os navegadores atuais; a forma com vírgulas, rgba(90, 63, 240, 0.5), existe para ferramentas mais antigas.
O que acrescentam o OKLCH e o OKLab
O OKLab é um espaço de cor criado por Björn Ottosson em 2020 para que passos numéricos iguais pareçam passos iguais à vista. O OKLCH é o mesmo espaço em forma polar: luminosidade de 0 a 1, croma (a intensidade da cor) e um ângulo de matiz. Duas cores OKLCH com a mesma luminosidade parecem mais ou menos igualmente claras, o que não acontece em HSL, onde um amarelo e um azul a 50% de luminosidade são muito diferentes.
O OKLCH também consegue descrever cores que um ecrã sRGB não consegue mostrar. Quando introduz uma dessas cores, esta ferramenta mantém a luminosidade e o matiz e reduz o croma até a cor caber, e avisa-o de que o fez.
Como é calculado o rácio de contraste
A WCAG 2 define o contraste como (L1 + 0.05) / (L2 + 0.05), em que L1 e L2 são a luminância relativa da cor mais clara e da mais escura. O resultado vai de 1:1, para duas cores idênticas, a 21:1, para preto sobre branco.
O nível AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande; o nível AAA exige 7:1 e 4,5:1. Texto grande significa pelo menos 24 píxeis CSS, ou cerca de 18,7 píxeis em negrito. O rácio mostrado aqui é arredondado por defeito, porque um par que mede 4,499:1 não atinge 4,5:1.
Como esta ferramenta calcula os valores
As conversões são feitas em JavaScript no seu navegador, com a função de transferência sRGB e as matrizes OKLab publicadas com o espaço de cor. Cada resultado é arredondado a poucas casas decimais, escolhidas para que o valor volte a converter-se na mesma cor de 8 bits com estas fórmulas. Um navegador pode calcular OKLCH e OKLab com constantes ligeiramente diferentes, por isso um valor OKLCH ou OKLab colado pode ficar desviado um ou dois passos, numa escala de 255, num dos canais, sobretudo num verde saturado. O nome de cor mais próximo é o que está a menor distância em OKLab.