Paleta de cores a partir de uma imagem e verificador de contraste

O que esta ferramenta faz

Três pequenas tarefas de cor em um só lugar. Cores de uma imagem lê uma imagem e devolve suas cores principais, cada uma com a porcentagem da imagem que ocupa, para tirar uma paleta de uma foto, de um logotipo ou de um print. Verificador de contraste diz se o texto de uma cor é legível sobre outra cor segundo as diretrizes de acessibilidade WCAG. Conversor passa uma cor entre HEX, RGB e HSL enquanto você digita. A imagem é processada no navegador e não é enviada.

Cores de uma imagem

1. Solte uma imagem na caixa, escolha uma ou cole um print.
2. Escolha quantas cores quer, de 5 a 8.
3. Clique em uma amostra para copiar. Com "Copiar como" você escolhe antes HEX, RGB ou HSL, e o texto da amostra mostra o que será copiado.

A ferramenta reduz a imagem a no máximo 160 pixels no lado maior, conta cada pixel em uma grade de cores parecidas e corta ao meio, repetidamente, o grupo com maior dispersão de cor. É o método de corte pela mediana (median cut). Cada amostra é a média exata dos pixels do seu grupo e a porcentagem é quantos pixels ele tem. Pixels transparentes são ignorados. O método não tem aleatoriedade, então a mesma imagem sempre dá a mesma paleta. Lembre que "principal" é por área: um logotipo pequeno e vivo sobre um fundo cinza grande mostrará o cinza primeiro.

O verificador de contraste

O contraste é a razão entre o brilho de duas cores, de 1:1 (idênticas) a 21:1 (preto sobre branco). O WCAG 2 fixa o mínimo para texto legível em 4,5:1 para texto normal e 3:1 para texto grande, ou seja, a partir de 24 pixels, ou 18,66 pixels em negrito. O nível AAA, mais rigoroso, pede 7:1 e 4,5:1. Botões, ícones e bordas de formulário precisam de 3:1 em relação ao que está ao lado. A ferramenta mostra cada verificação como passa ou não passa, com uma pré-visualização do seu texto sobre o seu fundo.

Quando o texto normal não passa, a ferramenta sugere a cor mais próxima, com o mesmo tom e saturação, que passa, e um botão a aplica.

Exemplo

Um texto cinza #777777 sobre fundo branco tem contraste de 4,48:1. Não passa no AA para texto normal por pouco, e é uma cor muito comum na web. Escureça o cinza para #767676 e a razão vai a 4,54:1, que passa. A maioria das pessoas não vê a diferença, mas ela decide se uma página passa em uma auditoria de acessibilidade.

O conversor

Digite no campo HEX, RGB ou HSL, ou use o seletor de cor, e os outros dois acompanham. Aceita hex de 3 ou 6 dígitos com ou sem jogo da velha, rgb(234, 88, 12) com vírgulas ou espaços e hsl(21, 90%, 48%). O HSL é mostrado em números inteiros, como o CSS costuma escrever, então converter de HSL de volta para HEX pode diferir do original em um passo.

Erros comuns

• Julgar o contraste a olho. Telas, iluminação e seus olhos variam. Um número não.
• Olhar só a linha de texto grande. O texto do corpo é texto normal: olhe as primeiras linhas.
• Texto sobre uma foto. O verificador compara duas cores chapadas. Coloque o texto sobre um painel sólido ou verifique a pior região da imagem.

Limites

Imagens de até 40 MB e cerca de 50 megapixels. As cores são lidas como o navegador as mostra, em sRGB.