Como verificar o contraste de texto de uma cor escolhida antes de usá-la na interface
========================================================================

Antes de aplicar qualquer cor na sua interface, verifique o contraste. Veja o fluxo de trabalho exato para ir de um valor HEX a um design acessível.

Author: Lubor Šimůnek
Published: 2026-08-29
Category: Design

Por 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

1. Capture a cor de fundo. Abra o Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237), 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.
2. Capture a cor do texto da mesma forma.
3. Verifique o par num verificador de contraste como o WebAIM Contrast Checker, o painel de Acessibilidade no DevTools ou o plugin Contrast no Figma.
4. 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 (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) ou Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) — sem anúncios, sem rastreamento e funciona totalmente offline.

--
Source: https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui
License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
Cite as: Lubor Šimůnek (2026). Como verificar o contraste de texto de uma cor escolhida antes de usá-la na interface. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui