Verificador de Contraste de Cores
Verifique as proporções de contraste de cores para conformidade com a acessibilidade WCAG. Teste combinações de cores de primeiro plano e fundo para garantir que seus designs sejam acessíveis a todos os usuários.
Live Preview
Sample Text
É assim que seu texto ficará com a combinação de cores selecionada.
Proporção de contraste
14.18
Excellent
Copia proporção, cores e resultados WCAG
Conformidade WCAG
Min. ratio: 4.5:1
Regular text under 18pt / 14pt bold
Min. ratio: 7:1
Enhanced contrast for regular text
Min. ratio: 3:1
Text 18pt+ or 14pt+ bold
Min. ratio: 4.5:1
Enhanced contrast for large text
Min. ratio: 3:1
Icons, borders, form controls
Min. ratio: 3:1
Charts, graphs, meaningful graphics
Preset Combinations
Índice
O que é Contraste de Cores?
O contraste de cores refere-se à diferença de luminância (brilho) entre duas cores. Quando um texto é colocado sobre um fundo, a proporção de contraste determina com que facilidade o texto pode ser distinguido do seu fundo. Uma proporção de contraste mais alta significa melhor visibilidade e legibilidade.
A proporção de contraste é calculada usando uma fórmula definida pelo World Wide Web Consortium (W3C) como parte das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Esta fórmula compara a luminância relativa de duas cores para produzir uma proporção variando de 1:1 (sem contraste, cores idênticas) a 21:1 (contraste máximo, preto sobre branco ou vice-versa).
Entender e testar o contraste de cores é essencial para criar sites e aplicativos acessíveis que possam ser usados por todos, incluindo pessoas com deficiências visuais.
Diretrizes WCAG explicadas
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem requisitos específicos de proporção de contraste para diferentes tipos de conteúdo. Essas diretrizes são organizadas em dois níveis de conformidade: AA (mínimo) e AAA (aprimorado).
| Tipo de conteúdo | Nível AA | Nível AAA |
|---|---|---|
| Texto normal (abaixo de 18pt / 14pt negrito) | 4.5:1 | 7:1 |
| Texto grande (18pt+ / 14pt+ negrito) | 3:1 | 4.5:1 |
| Componentes UI & Gráficos | 3:1 | N/A |
Nível AA (Mínimo)
O nível AA é o padrão base que a maioria das organizações busca atender. Garante que o conteúdo seja legível por usuários com visão moderadamente baixa, o que representa uma parcela significativa da população. A maioria dos requisitos legais de acessibilidade faz referência ao WCAG 2.1 Nível AA.
Nível AAA (Aprimorado)
O nível AAA fornece acessibilidade aprimorada e é recomendado para usuários com deficiências visuais mais graves. Embora atender ao AAA para todo o conteúdo nem sempre seja viável, é benéfico para conteúdo crítico como navegação principal e texto importante.
Por que o contraste importa
O bom contraste de cores é essencial por várias razões:
- Deficiências visuais: Aproximadamente 1 em 12 homens e 1 em 200 mulheres têm alguma forma de deficiência de visão de cores. O contraste adequado garante que o conteúdo seja legível independentemente da percepção de cores.
- Olhos envelhecendo: À medida que as pessoas envelhecem, a capacidade de seus olhos de distinguir cores e perceber contraste diminui. Um bom contraste ajuda a manter a legibilidade para usuários mais velhos.
- Condições ambientais: Reflexo de tela, luz solar brilhante e condições de pouca luz afetam como as cores aparecem. O texto de alto contraste permanece legível em várias condições.
- Conformidade legal: Muitos países têm leis que exigem que os sites atendam aos padrões de acessibilidade. O Americans with Disabilities Act (ADA) e legislações similares frequentemente fazem referência às diretrizes WCAG.
- Melhor UX para todos: O texto de alto contraste é mais fácil e rápido de ler para todos os usuários, reduzindo o cansaço ocular e melhorando a experiência do usuário em geral.
- Benefícios de SEO: Os mecanismos de busca consideram cada vez mais a acessibilidade como um fator de classificação, tornando o design acessível benéfico também para a visibilidade.
Como usar esta ferramenta
1. Insira suas cores
Use os seletores de cores ou insira códigos de cores hexadecimais diretamente. A cor de primeiro plano representa sua cor de texto, enquanto a cor de fundo representa a superfície atrás do texto.
2. Revise os resultados
A ferramenta calcula instantaneamente a proporção de contraste e mostra quais níveis de conformidade WCAG sua combinação de cores passa. Procure os emblemas verdes "PASSA" para confirmar a acessibilidade.
3. Use a visualização
A área de visualização ao vivo mostra exatamente como seu texto aparecerá no fundo. Isso ajuda você a fazer julgamentos visuais junto com a proporção numérica.
4. Aplique sugestões
Se sua combinação não atender aos requisitos WCAG, a ferramenta sugerirá cores ajustadas que atendam à proporção mínima de contraste enquanto permanece próxima da sua escolha original.
Melhores práticas
Teste cedo e com frequência
Verifique o contraste de cores durante a fase de design, não após o desenvolvimento. É muito mais fácil ajustar cores em maquetes do que refatorar interfaces implementadas.
Não dependa apenas da cor
Use pistas visuais adicionais como ícones, sublinhados ou padrões para transmitir informações. Isso ajuda os usuários que podem ter dificuldade em distinguir certas cores.
Considere todos os estados
Teste o contraste para todos os estados interativos: os estados de hover, foco, ativo e desabilitado devem manter proporções de contraste adequadas.
Cuide do tamanho do texto
Lembre-se de que texto grande (18pt+ ou 14pt+ negrito) tem requisitos de contraste mais baixos. Use isso a seu favor para títulos enquanto garante que o texto do corpo atenda a padrões mais rígidos.
Documente seu sistema de cores
Crie e mantenha uma paleta de cores documentada com combinações aprovadas. Isso garante consistência em seu projeto e acelera futuras decisões de design.
Perguntas frequentes
O nível AA é o padrão mínimo que a maioria das organizações deve atender. Requer uma proporção de contraste de 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA é acessibilidade aprimorada, exigindo 7:1 para texto normal e 4,5:1 para texto grande. Embora o AAA seja ideal, a conformidade AA é tipicamente suficiente para requisitos legais e cobre a maioria dos usuários com deficiências visuais.
Texto grande é definido como texto de pelo menos 18 pontos (24px) com peso normal, ou pelo menos 14 pontos (aproximadamente 18,5px) em negrito. Isso inclui a maioria dos títulos e texto de exibição. O texto grande tem requisitos de contraste mais baixos porque seu tamanho o torna inerentemente mais legível.
Esta ferramenta atualmente testa apenas cores sólidas (opacas). Para cores transparentes, você precisaria calcular a cor efetiva após ser composta sobre seu fundo. A cor final renderizada é o que importa para os testes de contraste.
A proporção 4,5:1 foi determinada por meio de pesquisas extensas para fornecer contraste suficiente para usuários com visão moderadamente baixa (aproximadamente 20/40 de visão). Este nível compensa a perda de sensibilidade ao contraste que vem com deficiências visuais típicas e o envelhecimento.
Concentre-se em testar combinações onde o texto aparece: texto do corpo em fundos, botões, rótulos de formulário, itens de navegação e qualquer texto significativo. Elementos decorativos sem texto não precisam de testes de contraste. Criar uma paleta de cores documentada com combinações pré-aprovadas pode agilizar esse processo.
Sim, mas você deve garantir que o texto mantenha contraste adequado contra todas as partes do gradiente que sobrepõe. Teste contra as áreas mais claras e mais escuras do gradiente. Se o contraste falhar em algum ponto, considere adicionar uma sobreposição de fundo sólido atrás do texto.
Texto sobre imagens é desafiador porque o fundo varia. Soluções comuns incluem usar uma sobreposição semitransparente, sombras de texto ou garantir que o texto esteja em uma área de cor consistente. Sempre teste o pior cenário (ponto de menor contraste) quando o texto sobrepõe fundos variáveis.
Embora o contraste máximo (21:1, preto puro sobre branco puro) seja tecnicamente acessível, alguns usuários com dislexia ou sensibilidade visual o acham agressivo. Considere usar fundos branco-gelo (#F5F5F5) ou texto cinza muito escuro (#1A1A1A) em vez de extremos puros para o texto do corpo enquanto mantém excelentes proporções de contraste.