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 {
--color-primary: #1A73E8;
--color-background: #FFFFFF;
--color-accessible: #1A73E8;
--color-complementary: #E88F1A;
--color-analogous-left: #1ADAE8;
--color-analogous-right: #281AE8;
--color-shade: #0F4A97;
--color-tint: #6DA6F0;
}Tailwind v4 @theme
@theme {
--color-primary: oklch(0.574 0.195 257.9);
--color-background: oklch(1.000 0.000 89.9);
--color-accessible: oklch(0.574 0.195 257.9);
--color-complementary: oklch(0.727 0.156 65.4);
--color-analogous-left: oklch(0.811 0.135 203.2);
--color-analogous-right: oklch(0.443 0.276 269.2);
--color-shade: oklch(0.421 0.139 257.6);
--color-tint: oklch(0.717 0.124 255.4);
}O que é um verificador de contraste de cores WCAG?
Um verificador de contraste de cores WCAG avalia se as combinações de cores de texto e fundo atendem aos padrões de acessibilidade das Diretrizes de Acessibilidade para Conteúdo Web. O WCAG define limites mínimos de razão de contraste: 4.5:1 para texto normal (Nível AA), 3:1 para texto grande (Nível AA) e 7:1 para conformidade aprimorada de Nível AAA. A ferramenta calcula a razão de contraste exata entre qualquer par de cores e mostra claramente se a combinação passa ou falha em cada nível. Isso ajuda designers e desenvolvedores a criar interfaces legíveis para todos os usuários, incluindo aqueles com baixa visão.
Como usar o verificador de cores WCAG
Insira sua cor de texto e cor de fundo usando seletores de cor, códigos hexadecimais ou valores RGB. A ferramenta calcula instantaneamente a razão de contraste e mostra se a combinação passa nos níveis AA e AAA tanto para texto normal quanto para texto grande. Uma pré-visualização mostra como o texto fica com suas cores escolhidas. Se a combinação não passar, a ferramenta sugere os ajustes mais próximos que atenderiam aos requisitos — como escurecer ligeiramente o texto ou clarear ligeiramente o fundo. Você também pode verificar toda a paleta de cores de uma vez para auditar a acessibilidade de um design completo.
Por que a conformidade do contraste de cores WCAG importa
Aproximadamente 15% da população mundial tem alguma forma de deficiência visual, e contraste de cor insuficiente torna o conteúdo web ilegível para milhões. Além da acessibilidade, bom contraste melhora a legibilidade para todos os usuários — especialmente em telas de celular sob luz solar direta, em projetores em salas iluminadas, ou para qualquer pessoa que experimente fadiga visual. Muitas jurisdições exigem por lei a conformidade WCAG para sites governamentais, e cada vez mais espera-se que empresas privadas também cumpram. Para desenvolvedores, verificar o contraste de cores é um dos passos mais simples de acessibilidade — leva segundos e pode ser verificado automaticamente, mas tem um impacto desproporcional na usabilidade.
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.
Explorar tags iguais
Vá para outras ferramentas com o mesmo fluxo, formato ou caso de uso.