Verificador de Contraste
Só local — nada é enviado a menos que você salve ou compartilhe.
Um verificador de contraste de cores para os níveis de acessibilidade WCAG.
- Insira a cor do texto e a cor do fundo
- Veja a relação e quais níveis WCAG são atendidos
- Se falhar, use a cor sugerida que atende
Exemplo de texto grande
Exemplo de texto normal — o tamanho que a maioria do seu conteúdo usa.
Salvar esta ferramenta
Tenha Verificador de Contraste sempre à mão
Use o menu Compartilhar do navegador e escolha “Adicionar à Tela Inicial”.
Sobre esta ferramenta
Use como verificador simples de duas cores ou como verificador de contraste com opacidade: um primeiro plano semitransparente é composto sobre o fundo antes de calcular a proporção, em vez de ignorar seu alfa silenciosamente. A razão de contraste de cores mede o quão distinto o texto é do fundo, numa escala de 1 a 21. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem 4,5:1 para texto normal no nível AA, reduzem para 3:1 em texto grande e subem para 7:1 no estrito nível AAA. Esses números não são preferências arbitrárias: baixo contraste é uma das falhas de acessibilidade mais comuns na web, afetando mais pessoas do que parece, incluindo quem tem baixa visão, maiores de 40 anos e quem lê a tela sob luz solar forte. Este verificador calcula a proporção corretamente, linearizando os valores sRGB primeiro, etapa que calculadoras básicas pulam, causando divergências com auditorias reais. Ele trata texto translúcido compondo-o sobre o fundo antes, já que uma cor com alfa não tem um valor único de contraste. Quando o par não alcança o mínimo, sugere o tom mais próximo da cor do texto que passa.
Perguntas frequentes
Qual é uma boa proporção de contraste?
4,5:1 ou melhor para texto normal, que é o nível AA da WCAG. Texto grande pode ter 3:1, e o nível AAA mais rígido exige 7:1. Valores abaixo de 3:1 dificultam a leitura para a maioria e são ilegíveis para alguns.
Qual é uma boa proporção de contraste?
4,5:1 ou melhor para texto normal, que é o nível AA da WCAG. Texto grande pode ter 3:1, e o nível AAA mais rígido exige 7:1. Valores abaixo de 3:1 dificultam a leitura para a maioria e são ilegíveis para alguns.
O que é considerado texto grande?
18pt (24px) ou 14pt negrito (cerca de 18,66px). Textos nesse tamanho ou maiores precisam de contraste 3:1 no nível AA, em vez de 4,5:1. Aplicar esse critério errado ao texto normal é uma das falhas mais comuns em auditorias.
Devo buscar nível AA ou AAA?
AA é o padrão prático e referência na maioria das legislações, incluindo a Lei Europeia de Acessibilidade. AAA é mais rigoroso e difícil de aplicar integralmente, geralmente considerado uma meta para o texto principal, não uma exigência geral.
Por que seu cálculo difere de outras calculadoras?
Quase sempre porque as outras fazem a média dos valores RGB brutos sem linearizá-los antes. sRGB é codificado em gamma, então a fórmula WCAG aplica uma transformação para cada canal antes de pesá-los. Ignorar isso gera números plausíveis mas que falham em auditorias reais.
Como o texto transparente é tratado?
Ele é composto sobre a cor de fundo antes da medição. Uma cor com canal alfa não tem valor de contraste significativo sozinha, já que o que vemos é uma mistura. Ferramentas que ignoram alfa indicam aprovação para texto invisível na prática.
O contraste importa para ícones e bordas também?
Sim. A WCAG 2.1 exige 3:1 para componentes da interface e gráficos significativos, incluindo bordas de campos, indicadores de foco e botões com ícones. Estes também são verificados aqui junto com os níveis do texto.
Ajude a melhorar esta ferramenta
Encontrou um bug, quer mudar algo ou precisa de uma ferramenta que não temos?
Você tem um rascunho não enviado.
Obrigado — recebemos sua mensagem. Você verá a resposta na sua caixa de entrada.Ir para minhas mensagens