Seu texto é legível para todo mundo? Como checar o contraste de cores (WCAG) e converter HEX, RGB e HSL

Por Marcelo Amantino · publicado em 21 de outubro de 2026 · 3 min de leitura · quem somos

Aquele cinza elegante em fundo branco parece ótimo no seu monitor e vira um borrão no celular, sob o sol ou para quem enxerga menos. Contraste ruim é um dos problemas de acessibilidade mais comuns e mais fáceis de corrigir, e quem escreve CSS, monta apresentações ou cuida de uma marca já esbarrou em outro obstáculo: a cor que o designer mandou em um formato e o programa pede em outro.

O que é contraste e qual número você precisa atingir

Contraste é a diferença de luminosidade entre o texto e o fundo, expressa como uma razão, por exemplo 4,5:1. As diretrizes de acessibilidade para a web, o WCAG, definem metas: para texto comum, 4,5:1 para o nível AA e 7:1 para o AAA; para texto grande e elementos de interface (botões, ícones, bordas de campos), 3:1. Atingir o AA é o mínimo razoável para qualquer página ou material que as pessoas precisem ler.

Passo a passo no WebFaz Cores

Abra o WebFaz Cores e escolha a cor do texto: cole um valor (HEX, rgb(), hsl(), oklch()), use o seletor ou o conta-gotas.
Informe a cor do fundo e veja a razão de contraste, com a indicação de AA e AAA.
Se não passar, use o ajuste automático, que muda a cor até atingir a meta, mantendo-se o mais perto possível do original.
Copie a cor no formato de que precisa e guarde-a em uma paleta.

Converter entre HEX, RGB, HSL, CMYK e OKLCH

A mesma cor pode ser escrita de vários jeitos, e cada programa prefere o seu. A ferramenta converte entre HEX, RGB, HSL, CMYK e OKLCH. O OKLCH é um formato do CSS moderno em que mudar a luminosidade ou o matiz não distorce o resto da cor, o que deixa escalas de tons e harmonias mais uniformes que em HSL. Um limite honesto: o CMYK é uma aproximação matemática, sem perfil de cor. Para gráfica, confirme na prova de cor.

Montar uma paleta a partir de uma imagem ou de uma cor

Tem um logotipo, uma foto ou um print e precisa das cores dele? A ferramenta extrai as cores dominantes e pega a cor de qualquer pixel. A partir de uma cor, ela gera escalas de tons (de 50 a 950, com exportação para Tailwind, variáveis CSS, SCSS ou JSON) e harmonias. Paletas podem ser salvas neste navegador e compartilhadas por link, sem cadastro.

Daltonismo: teste antes de publicar

Muita gente tem dificuldade de distinguir certas cores (estimativas comuns apontam cerca de 8% dos homens). Gráficos que dependem só de vermelho e verde, ou avisos que usam apenas a cor para indicar erro, ficam ilegíveis para eles. O simulador mostra a sua paleta em protanopia, deuteranopia, tritanopia e acromatopsia. É uma aproximação, que serve de guia e não substitui testar com pessoas. A regra mais segura é nunca usar só a cor para passar uma informação: acompanhe de texto, ícone ou padrão.

Pegar a cor de outro programa aberto

No Chrome, Edge e Opera, no computador, o conta-gotas "Escolher na tela" pega a cor de qualquer janela e pode deixar uma mini janela flutuante com o resultado. Em outros navegadores, tire um print (Win+Shift+S no Windows) e cole com Ctrl+V na seção de imagem. Tudo é calculado no navegador: suas imagens e cores não são enviadas ao WebFaz.