Xadrez de Contraste de Cores
Cor de primeiro plano (texto)
Cor de fundo
Pré-visualização
Texto normal (18px)
Texto grande (24px em negrito)
Informe-nos
Por favor, compartilhe sua experiência.
Ferramentas semelhantes
Sobre Xadrez de Contraste de Cores
Verifique a conformidade com as diretrizes WCAG AA/AAA e as taxas de contraste para cores de texto e de fundo. Ferramenta de acessibilidade gratuita.
Como usar
Passo 1
Insira ou selecione uma cor de primeiro plano (texto) usando o código HEX ou o seletor de cores.
Passo 2
Insira ou selecione uma cor de fundo usando o código HEX ou o seletor de cores.
Passo 3
Visualize a taxa de contraste calculada em tempo real.
Passo 4
Verifique a conformidade com as diretrizes WCAG AA e AAA para textos normais e grandes.
Passo 5
Veja uma pré-visualização do texto no fundo.
Passo 6
Se o contraste falhar, use as cores sugeridas para melhor acessibilidade.
Passo 7
Use 'Inverter cores' para inverter as cores de primeiro plano e de fundo.
Características e benefícios
- ✅Cálculo da taxa de contraste em tempo real
- ✅Verificação de conformidade com as diretrizes WCAG 2.1 AA e AAA
- ✅Verificações separadas para texto normal e texto grande.
- ✅Pré-visualização visual do texto no fundo
- ✅Seletores de cores para facilitar a seleção de cores.
- ✅Entrada de cor HEX com validação
- ✅Botão para trocar cores para testes rápidos
- ✅Geradores de cores aleatórias
- ✅Sugestões automáticas para contrastes falhos
- ✅Mostra as proporções necessárias (4,5:1, 3:1, 7:1, 4,5:1)
- ✅Indicadores de aprovação/reprovação com marcas de seleção
- ✅100% baseado em navegador - sem upload para o servidor
- ✅100% gratuito - sem marcas d'água, sem necessidade de cadastro
Perguntas frequentes
O que é a taxa de contraste de cores?
A taxa de contraste de cores mede a diferença de luminância entre duas cores, expressa como uma proporção, por exemplo, 4,5:1. Proporções mais altas significam melhor contraste. Ela é calculada usando a fórmula WCAG 2.1 com base na luminância relativa de cada cor.
O que são os padrões WCAG AA e AAA?
As WCAG (Diretrizes de Acessibilidade para Conteúdo Web) definem dois níveis de conformidade: AA (mínimo), que exige uma proporção de 4,5:1 para texto normal e 3:1 para texto grande; e AAA (avançado), que exige uma proporção de 7:1 para texto normal e 4,5:1 para texto grande. A maioria dos sites busca a conformidade com o nível AA.
O que é considerado texto grande?
Textos grandes são definidos como tendo 18pt (24px) ou mais, ou 14pt (18,66px) ou mais se estiverem em negrito. Textos grandes têm requisitos de contraste mais baixos (3:1 para AA, 4,5:1 para AAA) porque são mais fáceis de ler.
Por que meu projeto falha nos testes de contraste?
Os motivos mais comuns incluem: usar texto claro em fundos claros, texto escuro em fundos escuros ou cores com luminância semelhante. Mesmo cores que parecem diferentes para você podem ter baixo contraste. Sempre faça um teste com um verificador de contraste.
Devo buscar a conformidade com o padrão AA ou AAA?
O nível AA das Diretrizes de Acessibilidade de Conteúdo Web (WCAG) é um requisito legal para a maioria dos sites e é considerado o padrão mínimo. O nível AAA é recomendado para uma acessibilidade aprimorada, especialmente para sites voltados a usuários idosos ou com deficiência visual. Comece com o nível AA e busque o AAA sempre que possível.
Posso usar qualquer cor, desde que o contraste seja bom?
Um bom contraste é essencial, mas não suficiente. Considere também o daltonismo (use nosso Simulador de Daltonismo), evite depender exclusivamente da cor para transmitir informações e certifique-se de que as cores combinem bem em seu design geral.
E se eu não conseguir um bom contraste com as cores da minha marca?
Experimente ajustar a tonalidade (mais clara ou mais escura), use a cor da sua marca para detalhes em vez de texto, adicione bordas ou fundos, ou use a ferramenta de sugestões para encontrar a alternativa mais próxima e acessível. Muitas vezes, as cores da marca podem ser ajustadas ligeiramente sem perder a identidade.
Preciso verificar todas as combinações de cores?
Verifique todas as combinações de texto sobre fundo, especialmente o corpo do texto, títulos, links, botões e campos de formulário. Verifique também os estados de foco e de passar o cursor sobre o elemento. Ícones e elementos gráficos que transmitem informações também devem atender aos requisitos de contraste.
21:1 é a taxa de contraste máxima?
Sim, 21:1 é a taxa de contraste máxima possível, alcançada pelo preto puro (#000000) sobre o branco puro (#FFFFFF) ou vice-versa. Isso representa o maior contraste possível.