Skip to main content

Gerador de Paleta de Cores Acessível Gere paletas de cores que atendem aos requisitos de contraste da WCAG.

Gerador de Paleta de Cores Acessível illustration
🎨

Gerador de Paleta de Cores Acessível

Gere paletas de cores que atendem aos requisitos de contraste da WCAG.

1

Definir Fundo

Insira a cor do fundo desejada.

2

Escolher Nível de Conformidade WCAG

Selecione o alvo de conformidade AA (4,5:1) ou AAA (7:1).

3

Navegar e Copiar

Veja as cores acessíveis com suas razões de contraste e copie-as.

Loading tool...

What Is Gerador de Paleta de Cores Acessível?

Um gerador de paleta acessível encontra cores que atendem aos requisitos de contraste da WCAG em relação à cor de fundo escolhida. Em vez de testar manualmente cores individuais, essa ferramenta varre o espectro de cores e apresenta apenas as cores que alcançam a razão de contraste desejada (AA em 4,5:1 ou AAA em 7:1). Cada cor é exibida com uma pré-visualização de texto ao vivo contra o fundo e sua razão de contraste exata, tornando fácil encontrar cores acessíveis que também se encaixam no seu design estético. Isso resolve um dos desafios mais comuns em design acessível: encontrar cores que são visualmente atraentes e atendem aos padrões de acessibilidade. O gerador varre as tonalidades e níveis de claridade para fornecer uma ampla gama de opções acessíveis.

Why Use Gerador de Paleta de Cores Acessível?

  • Encontra automaticamente cores que atendem aos requisitos de contraste WCAG
  • Escolha entre os níveis de conformidade AA (4,5:1) e AAA (7:1)
  • Visualização ao vivo do texto no fundo da cor escolhida
  • Mostra a razão exata de contraste para cada cor sugerida
  • Economiza horas de verificação manual de contraste

Common Use Cases

Design Web Acessível

Crie paletas de cores garantidas para atender aos requisitos WCAG desde o início.

Criação de Sistema de Design

Gere cores de texto acessíveis para cada cor de fundo no seu sistema.

Projetos de Clientes

Apresente aos clientes opções de cores pré-verificadas para acessibilidade.

Remediação

Encontre alternativas acessíveis quando as cores existentes falham nas verificações de contraste.

Technical Guide

O gerador itera por ângulos de tom (0-360° em intervalos de 30°) e níveis de claridade (10-90% em intervalos de 10%) com uma saturação fixa de 70%. Para cada cor gerada, ele calcula a razão de contraste da WCAG contra o fundo especificado usando a fórmula de luminância relativa. As cores que atendem ao limiar mínimo de razão são coletadas, classificadas por ordem de razão de contraste (maior primeiro) e apresentadas ao usuário. O algoritmo cobre todo o espectro de tonalidades, garantindo opções de cor diversificadas. Razões de contraste mais altas indicam melhor legibilidade. Os limites mínimos são baseados nos Critérios de Sucesso 1.4.3 (AA) e 1.4.6 (AAA) da WCAG 2.1.

Tips & Best Practices

  • 1
    Comece com a cor do fundo e encontre cores de texto acessíveis - não o contrário
  • 2
    Para fundos escuros, as cores acessíveis tendem a ser mais claras; para fundos claros, mais escuras
  • 3
    Razões de contraste mais altas são sempre melhores - tente superar o mínimo quando possível
  • 4
    Lembre-se de testar cores acessíveis com simulação de daltonismo também
  • 5
    Mantenha sua paleta acessível pequena (4-6 cores) para consistência

Related Tools

Frequently Asked Questions

Q O que torna uma cor acessível?
Uma cor é acessível quando tem contraste suficiente contra a cor do fundo. A conformidade WCAG AA exige ≥4,5:1 para texto normal, AAA exige ≥7:1.
Q Por que alguns tons estão faltando nos resultados?
Algumas combinações de tom e claridade não podem atingir o contraste necessário contra o fundo específico. Por exemplo, texto amarelo em branco falha na conformidade AA em quase qualquer nível de claridade.
Q Devo sempre visar a conformidade AAA?
A conformidade AAA (7:1) é ideal, mas não é sempre legalmente necessária. A maioria das leis de acessibilidade exige conformidade AA (4,5:1). Vise à conformidade AAA quando possível, mas AA é o padrão de referência.

About This Tool

Gerador de Paleta de Cores Acessível is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.