Um conversor de cores que arredonda o que se vê, mas não o veredito
Uma razão de contraste de 4,496 aparece como 4,50 : 1 e mesmo assim reprova no AA. O teste de aprovação usa o valor exato, e só o rótulo é arredondado. No lado do conversor, HSL e CMYK são arredondados para números inteiros. O CMYK é a conversão matemática simples a partir do RGB, sem perfil ICC, então uma gráfica pode obter um resultado diferente. O conversor de cores começa com #3b82f6, um azul médio. Ele resulta em rgb(59, 130, 246), hsl(217, 91%, 60%) e cmyk(76%, 47%, 0%, 4%).
Testando com #003366 e #999999
Um azul da marca chega como #003366. No CSS você quer variantes mais claras e mais escuras, e o HSL facilita isso: a ferramenta dá hsl(210, 100%, 20%), então basta aumentar o último número. Para um panfleto, o mesmo azul se lê cmyk(100%, 50%, 0%, 60%) como um primeiro valor a entregar à gráfica.
Um cinza claro de espaço reservado como #999999 sobre branco dá 2,85 : 1. Isso reprova no AA até para texto grande. Branco sobre o #2563eb padrão dá 4,68 : 1, que passa no AA para texto corrido, mas não no AAA.
Passos para uma cor e um par de contraste
- Clique na amostra de cor para abrir o seletor de cores do navegador, ou cole um código no campo HEX. Seis dígitos e a forma curta de três dígitos (#0af) funcionam, com ou sem o # inicial.
- Leia os campos RGB, HSL e CMYK (impressão). Clique no botão de copiar acima de um campo para colocar o valor dele na área de transferência.
- Abra o painel da direita e defina a Cor do texto e o Fundo.
- Leia a razão e os quatro selos: AA Normal, AAA Normal, AA Grande e AAA Grande. Eles são atualizados sempre que você escolhe uma cor.
O que os campos aceitam e o que fica local
Só o campo HEX e o seletor comandam a conversão. Os campos RGB e HSL parecem editáveis, mas digitar neles não muda nada. O CMYK é somente leitura.
O campo HEX se reescreve assim que o conteúdo é um código válido. Digite #ff0 a caminho de #ff0000 e o campo salta para #ffff00, então cole o código completo. Códigos de oito dígitos (alfa), cores nomeadas como "tomato" e notações como OKLCH ou HSV não são aceitos. Entradas inválidas são ignoradas sem mensagem de erro.
Os dois seletores de contraste funcionam separadamente do conversor e aceitam apenas cores do seletor. A ferramenta não conhece o tamanho da sua fonte. O WCAG chama de grande o texto a partir de 18 pt, ou 14 pt em negrito.
A conversão e o contraste rodam em JavaScript no seu navegador. Escolher ou digitar uma cor não envia nenhuma requisição, e o painel de rede das ferramentas de desenvolvedor mostra isso. Os botões de copiar gravam na sua área de transferência. O código da ferramenta não guarda as suas cores.