Gerador de paleta acessível WCAG (AA, AAA, Tailwind)

Crie uma paleta de cores acessível para design system em conformidade com a WCAG 2.2, com taxas de contraste em tempo real e exportação para Tailwind CSS.

Paleta de cores acessível: contrastes WCAG e exemplo

A partir de uma cor base, a ferramenta monta uma paleta de 5 papéis (fundo, primária, destaque, neutro escuro, tom suave) e depois mede o contraste de cada tom sobre fundo branco e sobre o fundo escuro #0f172a. O selo segue os limites da WCAG: 7:1 para AAA, 4,5:1 para AA, 3:1 para texto grande (selo “AA texto grande”).

O método

  • A cor base é convertida em HSL (matiz, saturação e luminosidade mantidos com suas casas decimais; só o resultado RGB é arredondado). Cada harmonia fixa 5 cores: no modo complementar, fundo (mesmo matiz, luminosidade 95%), primária (luminosidade levada para entre 35 e 65%), destaque (matiz + 180°, luminosidade 50%), neutro escuro (saturação 15%, luminosidade 20%) e tom suave do destaque (92%).
  • Luminância relativa WCAG: cada canal sRGB c = valor ÷ 255 é linearizado (c ÷ 12,92 se c ≤ 0,04045, senão ((c + 0,055) ÷ 1,055)2,4), e depois L = 0,2126 R + 0,7152 G + 0,0722 B.
  • Contraste = (L claro + 0,05) ÷ (L escuro + 0,05).

Exemplo recalculado

Base #3b82f6, modo complementar (HSL 217,2°, 91,2%, 59,8%). A primária continua #3b82f6, pois sua luminosidade já está entre 35 e 65%: 3,68:1 sobre branco, portanto apenas AA texto grande, e 4,85:1 sobre #0f172a (AA). O destaque laranja #f29b0d só se sustenta sobre fundo escuro (8,05:1, AAA; 2,22:1 sobre branco). O neutro #2b313b chega a 13,08:1 sobre branco.

Limites

  • Apenas dois fundos são testados; o contraste entre duas cores da paleta não é medido. Para converter uma única cor entre HEX, RGB, HSL e CMYK e ver seu contraste sobre branco e sobre preto, use o conversor de cores.
  • O limite de 3:1 vale para texto grande (18 pt, ou 14 pt em negrito) e para componentes de interface (critério 1.4.11), não para texto corrido.
  • A exportação Tailwind reaproveita as 5 cores com os nomes surface, primary, accent, dark e support.

Fontes e datas: W3C, WCAG 2.2 (critérios 1.4.3, 1.4.6 e 1.4.11, glossário “relative luminance”), Recomendação de 12/12/2024; limite de linearização 0,04045 (0,03928 antes de maio de 2021, sem efeito sobre valores de 8 bits) (verificado em 14/10/2026).

Perguntas frequentes

Qual contraste é necessário para texto segundo a WCAG?

O nível AA exige pelo menos 4,5:1 para texto corrido e 3:1 para texto grande (18 pt, ou 14 pt em negrito). O nível AAA sobe para 7:1 e 4,5:1.

Por que o azul #3b82f6 não é aprovado em AA sobre fundo branco?

Seu contraste sobre branco é de cerca de 3,7:1, abaixo do limite de 4,5:1 do texto corrido. Ele serve para um botão ou um título grande (3:1), não para um parágrafo.

O branco sobre uma cor viva é sempre legível?

Não. O branco tem luminância relativa de 1: um laranja como #f29b0d oferece apenas 2,2:1 com ele. Sobre o fundo escuro #0f172a, o mesmo laranja chega a 8:1.

Qual norma WCAG a ferramenta aplica?

Os limites de contraste e a fórmula de luminância da WCAG 2.2, recomendação do W3C de 12 de dezembro de 2024, idênticos nesse ponto aos da WCAG 2.1. A linearização usa o limite 0,04045.

A ferramenta é realmente gratuita?

Sim, todas as ferramentas do Kristools são 100% gratuitas e acessíveis sem cadastro.

Meus dados estão protegidos?

Sim. Todo o processamento é feito diretamente e com segurança no seu navegador. Nenhum dado pessoal é enviado para os nossos servidores.