HEX, RGB e HSL descrevem uma cor de três jeitos
HEX escreve vermelho, verde e azul com dois dígitos hexadecimais cada. #8B5CF6 significa R igual a 139, G igual a 92 e B igual a 246, exatamente os valores RGB. A forma abreviada de três dígitos #F00 repete cada dígito, então equivale a #FF0000.
HSL decompõe a cor em matiz, saturação e luminosidade. O matiz é um ângulo na roda de cores, então 0 e 360 graus são o mesmo vermelho; a saturação é a distância até o cinza e a luminosidade a posição entre o preto e o branco. Por isso HSL fica mais cômodo quando você quer uma versão mais clara da mesma cor.
A razão de contraste compara a luminância relativa de duas cores e vai de 1:1 a 21:1. Cada canal é corrigido por gama, ponderado com 0,2126, 0,7152 e 0,0722 e somado; depois acrescenta-se 0,05 tanto ao valor mais claro quanto ao mais escuro antes de dividir. O verde leva o maior peso porque a visão humana é mais sensível a ele.
O que passa batido na escolha de cores
Uma combinação que fica bonita na tela do designer costuma ser ilegível. As diretrizes de acessibilidade web pedem 4,5:1 em texto corrido e 3:1 em texto grande ou em negrito de 18 pontos ou mais. O cinza-claro fica elegante numa maquete e falha nesse limite repetidamente.
Julgar o contraste só pelo brilho engana. Amarelo sobre branco quase não tem porque os dois são claros, e azul sobre preto quase não tem porque os dois são escuros. Estar longe na roda de cores não cria contraste; quem cria é uma diferença de luminância.
Transmitir informação só pela cor exclui leitores daltônicos. O vermelho e o verde que marcam alta e queda precisam de uma seta ou de um sinal ao lado, e a própria convenção muda: os mercados dos Estados Unidos e da Europa mostram altas em verde, enquanto Coreia, Japão e China as mostram em vermelho.