{ "@context": "https://schema.org", "@type": "Article", "@id": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui", "url": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui", "identifier": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui", "name": "Como verificar o contraste de texto de uma cor escolhida antes de usá-la na interface", "headline": "Como verificar o contraste de texto de uma cor escolhida antes de usá-la na interface", "description": "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.", "inLanguage": "pt", "datePublished": "2026-08-29", "dateModified": "2026-08-29", "author": { "@type": "Person", "name": "Lubor Šimůnek" }, "publisher": { "@type": "Organization", "name": "lapnito.cz s.r.o.", "url": "https://appstoryo.com" }, "isPartOf": { "@type": "WebSite", "name": "AppStoryo", "url": "https://appstoryo.com" }, "license": "https://creativecommons.org/licenses/by/4.0/", "keywords": [ "Design", "article", "AppStoryo" ], "articleSection": "Design", "image": "https://appstoryo.com/upload/blog/check-text-contrast-picked-color-ui-hero.jpg", "encoding": [ { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.pdf", "encodingFormat": "application/pdf" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.md", "encodingFormat": "text/markdown" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.txt", "encodingFormat": "text/plain" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.json", "encodingFormat": "application/json" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.epub", "encodingFormat": "application/epub+zip" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.jats.xml", "encodingFormat": "application/xml" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.bib", "encodingFormat": "application/x-bibtex" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.ris", "encodingFormat": "application/x-research-info-systems" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/pt/blog/check-text-contrast-picked-color-ui.csl.json", "encodingFormat": "application/vnd.citationstyles.csl+json" } ], "cite": "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", "sections": [ { "level": 2, "heading": "Por que o contraste é essencial", "text": "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\n- Nível AA: proporção de contraste de 4,5:1 para texto normal e 3:1 para texto grande.\n- Nível AAA: 7:1 para texto normal." }, { "level": 2, "heading": "Erros frequentes", "text": "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." }, { "level": 2, "heading": "Fluxo de trabalho prático", "text": "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.\n2. Capture a cor do texto da mesma forma.\n3. Verifique o par num verificador de contraste como o WebAIM Contrast Checker, o painel de Acessibilidade no DevTools ou o plugin Contrast no Figma.\n4. 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." }, { "level": 2, "heading": "Por que HSL é ideal para ajustar contraste", "text": "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." }, { "level": 2, "heading": "Exemplo real", "text": "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." }, { "level": 2, "heading": "Nota sobre WCAG 3.0 e APCA", "text": "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.\n\nBaixe 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." } ], "text": "Por que o contraste é essencial\n\nCerca 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\n- Nível AA: proporção de contraste de 4,5:1 para texto normal e 3:1 para texto grande.\n- Nível AAA: 7:1 para texto normal.\n\nErros frequentes\n\nOs 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.\n\nFluxo de trabalho prático\n\n1. 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.\n2. Capture a cor do texto da mesma forma.\n3. Verifique o par num verificador de contraste como o WebAIM Contrast Checker, o painel de Acessibilidade no DevTools ou o plugin Contrast no Figma.\n4. 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.\n\nPor que HSL é ideal para ajustar contraste\n\nRGB 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.\n\nExemplo real\n\nUm 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.\n\nNota sobre WCAG 3.0 e APCA\n\nA 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.\n\nBaixe 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.", "markdown": "## Por que o contraste é essencial\n\nCerca 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\n- **Nível AA**: proporção de contraste de 4,5:1 para texto normal e 3:1 para texto grande.\n- **Nível AAA**: 7:1 para texto normal.\n\n## Erros frequentes\n\nOs 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.\n\n## Fluxo de trabalho prático\n\n1. **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.\n2. **Capture a cor do texto** da mesma forma.\n3. **Verifique o par num verificador de contraste** como o WebAIM Contrast Checker, o painel de Acessibilidade no DevTools ou o plugin Contrast no Figma.\n4. **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.\n\n## Por que HSL é ideal para ajustar contraste\n\nRGB 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.\n\n## Exemplo real\n\nUm 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.\n\n## Nota sobre WCAG 3.0 e APCA\n\nA 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.\n\n**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.", "html": "

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:

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

" }