Verificador de contraste de cores WCAG
Escolha a cor do texto e a do fundo e veja na hora a taxa de contraste e se ela cumpre os níveis AA e AAA das diretrizes de acessibilidade WCAG. Se não cumprir, a ferramenta sugere uma cor parecida que passa. Tudo acontece no seu navegador.
Processado 100% no seu navegador
–
Grande: 24 px ou mais, ou 18,66 px em negrito.
Título de exemplo
É assim que o texto se lê com as cores escolhidas. Um bom contraste ajuda todos, inclusive quem lê ao sol ou com a vista cansada.
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Digite ou escolha a cor do texto e a do fundo (hex, rgb, hsl ou nome).
- 2Veja a taxa de contraste e os resultados AA e AAA.
- 3Confira a pré-visualização com suas cores.
- 4Se não passar, clique em «Usar» na alternativa sugerida.
Casos de uso
- Verificar se os textos do seu site são legíveis para pessoas com baixa visão.
- Validar uma paleta de marca antes de entregá-la.
- Cumprir os requisitos de acessibilidade exigidos de sites públicos e comerciais.
- Escolher a cor de um botão que se destaque do fundo.
Perguntas frequentes
Que contraste mínimo a WCAG exige?
Nível AA: 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface. Nível AAA: 7:1 para texto normal e 4,5:1 para texto grande.
O que conta como texto grande?
O de 24 px ou mais, ou de 18,66 px ou mais em negrito (cerca de 18 e 14 pontos). Para ele, aceita-se um contraste menor.
E se a minha cor tiver transparência?
A ferramenta a mistura antes com o fundo para obter a cor realmente vista e só então mede o contraste.
Existem exceções à regra?
Sim: texto decorativo, logotipos e elementos desativados não são obrigados a cumpri-la, embora seja bom que também sejam legíveis.