appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/ptComo verificar o contraste de texto de uma cor escolhida antes de usá-la na interfaceLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0

Aprenda a verificar a proporção de contraste WCAG e ajustar cores em HSL para que sua interface seja sempre acessível e legível.

DesignarticleAppStoryoPor que o contraste é essencial

Cerca de 300 milhões de pessoas no mundo têm algum tipo de deficiência de visão de cores. Projetar com bom contraste não é só estética — em muitas regiões é obrigação legal. O padrão de referência é o WCAG 2.1, que define:

Nível AA: proporção de contraste de 4,5:1 para texto normal e 3:1 para texto grande.

Nível AAA: 7:1 para texto normal.

Erros frequentes

Os mais comuns são: cinza claro sobre branco (pode chegar a 1,5:1), botões coloridos com texto branco que parecem legíveis mas reprovam no AA, e cores que passam no modo claro mas falham no modo escuro.

Fluxo de trabalho prático

Capture a cor de fundo. Abra o Color Picker Camera: HEX RGB, aponte a câmera para a superfície e toque para obter o HEX na hora. O app também exibe o HSL, que você usará no próximo passo.

Capture a cor do texto da mesma forma.

Verifique o par num verificador de contraste como o WebAIM Contrast Checker, o painel de Acessibilidade no DevTools ou o plugin Contrast no Figma.

Ajuste a luminosidade no HSL até passar. Mantenha o H e o S e reduza o L para escurecer sem mudar a identidade visual da cor.

Por que HSL é ideal para ajustar contraste

RGB e HEX não oferecem controle intuitivo sobre o brilho. HSL separa matiz, saturação e luminosidade. O Color Picker Camera: HEX RGB exibe HEX, RGB, HSL e CMYK ao mesmo tempo — sem conversões manuais.

Exemplo real

Um botão azul médio (#4A90E2) com texto branco tem contraste de aproximadamente 3,1:1, reprovando no AA. Mude para azul-marinho escuro (#1A3A6B) e o contraste sobe para 9,4:1, superando até o AAA.

Nota sobre WCAG 3.0 e APCA

A próxima versão das diretrizes introduz o APCA, um modelo de contraste perceptual mais refinado. O WCAG 2.1 AA continua sendo o padrão vigente, mas vale testar contra o APCA se você está construindo algo de longo prazo.

Baixe o Color Picker Camera: HEX RGB grátis para iOS ou Android — sem anúncios, sem rastreamento e funciona totalmente offline.