---
title: "Como verificar o contraste de texto de uma cor escolhida antes de usá-la na interface"
author: "Lubor Šimůnek"
date: 2026-08-29
modified: 2026-08-29
language: "pt"
url: "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui"
publisher: "AppStoryo (lapnito.cz s.r.o.)"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
category: "Design"
keywords: ["Design", "article", "AppStoryo"]
---

# 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.

## 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