# Paleta de Cores + Verificador WCAG

> Gerador gratuito de paleta de cores com verificações de contraste WCAG AA/AAA, sugestões de cores aprovadas, variáveis CSS, exportação Tailwind v4 e amostras em PNG.

- **Category:** Desenvolvedor
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [Teste de daltonismo](https://www.teafun.cyou/tools/colorblind/), [Taxa de atualização da tela](https://www.teafun.cyou/tools/monitor/), [Ferramenta de Planta Baixa](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

Verifique proporções de contraste, conformidade AA/AAA, gere variantes de paleta e exporte tokens de cor CSS ou Tailwind v4 localmente.

## Como usar o verificador de cores WCAG

Digite uma cor de primeiro plano e fundo como HEX (`#1A73E8` em `#FFFFFF`) — a razão de contraste e as crachás de aprovação/falha para AA normal (4,5:1), AAA normal (7:1), AA grande (3:1) e AA UI (3:1, WCAG 2.2) aparecem instantaneamente. Quando um par falha, o sugestor ajusta o primeiro plano mais escuro ou mais claro ao longo do eixo de luminância OKLCH enquanto preserva a matiz e a saturação, para que a identidade da cor da marca permaneça intacta. Clique em Usar cor sugerida para aplicá-la. A falha clássica no teste: texto branco em amarelo puro `#ffff00` (`#ffffff` primeiro plano) — a razão é 1,07:1, bem abaixo de 3:1, apesar de parecer 'alto contraste' a olho nu. Preto em amarelo é 19,55:1, passando amplamente. Abaixo do verificador, o painel de paleta mostra variantes complementares e análogas geradas a partir de sua entrada. Copie variáveis CSS, copie tokens de tema Tailwind 4 ou baixe a amostra PNG.

## Por que a conformidade do contraste de cores WCAG importa

A conformidade do contraste WCAG é uma lei exigível sob a ADA nos EUA, a Lei de Acessibilidade Europeia (EAA) em vigor a partir de junho de 2025 para produtos e serviços vendidos na UE e EN 301 549 para aquisição do setor público. Multas sob a EAA chegam a €30 000 a €500 000 dependendo da jurisdição. Além da exposição legal, o limite de 4,5:1 se aproxima do contraste que uma pessoa com visão 20/40 precisa para ler confortavelmente o texto do corpo — isso não é um impedimento de caso extremo, isso é a maioria dos leitores com mais de 40 anos após o amarelecimento natural do cristalino. O design de tokens em conformidade desde o início evita o custo de retrofit de executar correções de cor de marca em cada componente. Uma armadilha comum é julgar o contraste a olho nu: rosa de marca e teais pálidos 'parecem legíveis' para designers com visão 20/20 sob iluminação de estúdio e falham por 2× sob iluminação fluorescente de escritório. Executar a razão cedo — na fase de definição de token, não na construção de componente — resolve a questão com aritmética em vez de opinião.

_SEO title: Verificador WCAG de Paleta – Ferramenta Acessível | TeaFun_

## FAQ

### Como funciona a sugestão aprovada?

O TeaFun mantém a matiz e a saturação o mais próximo possível da cor do primeiro plano escolhida e, em seguida, ajusta a luminosidade até que o par atinja pelo menos o WCAG AA para texto de corpo.

### A exportação Tailwind usa o novo formato v4?

Sim. A exportação usa tokens `@theme` com valores `oklch()` para que você possa colá-los diretamente em um projeto Tailwind v4.

### Posso usar isto para trabalhos de cliente?

Sim. O verificador é executado apenas no navegador, então você pode testar cores de marca, exportar tokens e gerar amostras PNG sem enviar nada para um serviço de terceiros.