Paleta de Cores + Verificador WCAG
Verifique proporções de contraste, conformidade AA/AAA, gere variantes de paleta e exporte tokens de cor CSS ou Tailwind v4 localmente.
Cor do primeiro plano
Cor do fundo
Conversões da cor primária
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)Paleta gerada
Variáveis CSS
:root {
}Tailwind v4 @theme
@theme {
}Você acabou de testar Paleta de Cores + Verificador WCAG — Tente Teste de daltonismo a seguir →
O que é um verificador de contraste de cores WCAG?
O Color Palette + WCAG Checker calcula a razão de contraste de luminância relativa entre duas cores sRGB e a avalia em relação às diretrizes de acessibilidade da web (WCAG). A fórmula é fixa: linearizar cada canal de sRGB para luz linear (L = R*0.2126 + G*0.7152 + B*0.0722 após decodificação gama), então (L_lighter + 0.05) / (L_darker + 0.05). O resultado é a razão de contraste, variando de 1,0 (cores idênticas) a 21,0 (preto puro em branco). WCAG 2.1 estabelece três limites: 4,5:1 para texto de corpo normal (AA), 3:1 para texto grande ≥18pt ou 14pt em negrito (AA), e 7:1 / 4,5:1 para categorias AAA mais rigorosas. WCAG 2.2 (publicado em outubro de 2023) adiciona um requisito de 3:1 para componentes de UI e contornos de foco visível que não existiam em 2.1. Além da classificação, a ferramenta gera uma paleta coordenada — complementar, análoga, sombra, matiz — a partir de uma única cor-semente no espaço OKLCH (perceptualmente uniforme ao contrário de HSL) e exporta o resultado como propriedades CSS personalizadas ou tokens Tailwind v4 @theme. Uma planilha de amostras PNG é fornecida para entrega de design.
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.
Perguntas Frequentes
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.
Use esta ferramenta dentro de um fluxo maior
Estas coleções agrupam ferramentas e guias que costumam aparecer no mesmo trabalho.
Explorar tags iguais
Vá para outras ferramentas com o mesmo fluxo, formato ou caso de uso.