Verificador de contraste de cores (WCAG)
Verifique a razão de contraste entre a cor do texto e a do fundo segundo WCAG AA e AAA, para texto normal, texto grande e componentes de interface, com correções sugeridas.
Carregando Verificador de contraste…
Seus arquivos nunca saem do seu dispositivo
Como usar Verificador de contraste
- 1
Abra Verificador de contraste nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Texto com pouco contraste é um dos problemas de acessibilidade mais comuns na web, e atrapalha qualquer pessoa lendo no celular sob o sol. Este verificador de contraste de cores calcula a razão de contraste entre uma cor de texto e uma cor de fundo e diz se ela atende às diretrizes WCAG 2. Se não atender, sugere as cores mais próximas que passam, para você corrigir sem mudar o design.
Como verificar o contraste
- Informe a cor do texto e a do fundo, ou escolha visualmente.
- Veja a razão de contraste e se passa ou falha em cada nível.
- Observe a prévia ao vivo com texto normal, títulos grandes e letras pequenas.
- Se um nível falhar, use uma correção sugerida ou troque as duas cores para testar o inverso.
- Copie o CSS da combinação aprovada.
Requisitos de contraste WCAG
| Elemento | AA | AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (24px, ou 18,66px em negrito) | 3:1 | 4,5:1 |
| Componentes de interface e ícones | 3:1 | não definido |
AA é o nível citado pela maioria das leis e políticas de acessibilidade. AAA é mais rigoroso e recomendado para textos longos. Texto em negrito com cerca de 18px também conta como texto grande.
Como a razão é calculada
O verificador converte as duas cores em luminância relativa, uma medida do brilho percebido, e divide a mais clara mais 0,05 pela mais escura mais 0,05. O resultado vai de 1:1 (sem contraste, a mesma cor) a 21:1 (preto no branco).
Dicas para cores acessíveis
- Texto cinza no branco é o vilão de sempre: #767676 é mais ou menos o cinza mais claro que ainda passa no AA para texto normal no branco.
- Confira todos os estados: placeholders, botões desativados, links, cores de hover e texto sobre imagens.
- Não dependa só da cor para transmitir significado, como vermelho para erros; acrescente um ícone ou texto.
- Teste cedo as cores da marca, pois amarelos vivos e azuis claros costumam falhar como cor de texto.
Criando um esquema completo? O gerador de paleta de cores mostra o contraste de cada cor, e o conversor de cores traduz valores entre HEX, RGB e HSL.
Perguntas frequentes
Qual razão de contraste o WCAG AA exige?
Pelo menos 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface como botões, bordas de formulário e ícones.
O que conta como texto grande?
Texto com pelo menos 24px, ou texto em negrito com pelo menos cerca de 18,66px (14 pontos). Texto grande precisa de 3:1 para AA e 4,5:1 para AAA.
Qual a diferença entre AA e AAA?
AA é o nível padrão citado pela maioria das leis de acessibilidade. AAA é mais rigoroso, 7:1 para texto normal, e recomendado para trechos longos de texto.
Qual a maior razão de contraste possível?
21:1, que é texto preto em fundo branco ou o contrário.
A cor da minha marca falha. O que fazer?
Use uma correção sugerida, que mantém o matiz mas ajusta a luminosidade até passar, ou use a cor da marca em títulos grandes e fundos em vez do texto corrido.
Ele verifica texto sobre imagens?
Não. Ele verifica duas cores sólidas. Para texto sobre fotos, teste a cor contra as partes mais claras e mais escuras da imagem atrás do texto.