Seletor de cores e contraste

Como usar o seletor

Toque em “Escolher na paleta do aparelho” para abrir o seletor do sistema, mova os controles de matiz, saturação e luminosidade, ou digite um código nos campos HEX, RGB e HSL: a cor muda assim que o código está completo e válido. Em alguns navegadores, como o Chrome no computador, aparece também “Pegar uma cor da tela”, que lê a cor de qualquer pixel visível. Cada código tem um botão de copiar.

O HEX aceita 3 ou 6 dígitos, com ou sem o #. O RGB aceita rgb(11, 92, 173) ou só os três números. O HSL pede o matiz de 0 a 360 e duas porcentagens. Cores com transparência, de 8 dígitos, não são aceitas.

HEX, RGB, HSL e CMYK descrevem a mesma cor

O azul da marca do iCalculadora é #0B5CAD em HEX: três pares de dígitos hexadecimais, 0B, 5C e AD, que valem 11, 92 e 173 nos canais vermelho, verde e azul, ou seja, rgb(11, 92, 173). Em HSL, a mesma cor é hsl(210, 88%, 36%): matiz de 210° no círculo de cores, 88% de saturação e 36% de luminosidade. O HSL é o mais fácil de ajustar à mão, porque clarear ou escurecer a cor muda só a luminosidade. Em CMYK, a conta simples dá cmyk(94%, 47%, 0%, 32%).

O que o contraste mede

O WCAG 2.2 define a razão de contraste como (L1 + 0,05) ÷ (L2 + 0,05), em que L1 é a luminância relativa da cor mais clara e L2 a da mais escura. A luminância relativa é 0,2126 R + 0,7152 G + 0,0722 B, com cada canal antes passado por uma curva que corrige a forma como a tela mostra o brilho. A razão vai de 1:1 a 21:1. No nível AA, texto normal pede 4,5:1 e texto grande, 3:1. No nível AAA, os pedidos sobem para 7:1 e 4,5:1.

Na prática: o azul da marca com texto branco dá 6,67:1 e passa em AA para texto normal; com texto preto dá 3,15:1, que só passa para texto grande. O cinza #767676 é o mais claro que ainda passa em 4,5:1 sobre branco (4,54:1); o #777777, um passo mais claro, dá 4,48:1 e já não passa. O vermelho puro #FF0000 com branco dá 4,00:1, abaixo do pedido para texto normal.

A ferramenta compara o valor exato com cada limite, sem arredondar antes. Por isso uma razão exibida como 4,50:1 pode ser, na verdade, 4,4996 e aparecer como “Não passa”.

Limites do que a página mostra

O CMYK daqui é a conversão simples dos editores de tela. A gráfica converte com o perfil de cor do papel e da tinta, e o resultado pode ficar bem diferente: peça a ela os valores para impressão. A cor também muda de um monitor ou celular para outro, por causa do brilho, do perfil de cor e do modo noturno.

A razão de contraste vale para texto e fundo de cor única. Sobre foto ou degradê, meça no pior ponto. E ela não diz se o texto é confortável de ler: o tamanho, o peso da fonte e a iluminação da tela também contam.