Verificador de contraste de cores
Garanta que seu texto seja fácil de ler para todo mundo e receba uma correção quando não for.
Lacrado neste dispositivo
Funciona no seu navegador. Nada é enviado.
Lacrado
Cores
- Taxa de contraste
- Texto normal
- AA · 4,5:1
- AAA · 7:1
- Texto grande
- AA · 3:1
- AAA · 4,5:1
- Elementos de interface e ícones
- AA · 3:1
- Contraste APCA (informativo)
O APCA é um método mais recente em estudo para futuras diretrizes de acessibilidade. A WCAG 2.2 continua sendo a referência hoje.
Prévia
Um texto grande fica assim
O texto normal deve continuar fácil de ler para todo mundo, inclusive para pessoas com baixa visão, no celular sob sol forte ou em uma tela antiga.
Letras miúdas e legendas são as que mais precisam de contraste.
Correções sugeridas
Como funciona
-
Informe suas duas cores
Digite ou escolha a cor do texto e a cor do fundo. Qualquer formato funciona: HEX, RGB, HSL ou um nome CSS.
-
Veja o resultado
Confira a taxa de contraste e se ela passa nos níveis AA e AAA da WCAG 2.2 para texto normal, texto grande e elementos de interface.
-
Aplique uma correção, se precisar
Se um nível falhar, use uma das cores sugeridas: é a mais próxima, com a mesma matiz, que passa.
Perguntas frequentes
De qual taxa de contraste eu preciso?
O nível AA da WCAG 2.2 exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA exige 7:1 e 4,5:1. Ícones, bordas de campos e outros elementos de interface precisam de pelo menos 3:1 em relação ao que está ao lado deles.
O que conta como texto grande?
Texto de pelo menos 18 pontos (24 pixels CSS), ou de pelo menos 14 pontos (cerca de 18,7 pixels CSS) quando está em negrito. Tudo o que for menor é texto normal.
Por que 4,49:1 falha se está tão perto de 4,5:1?
Os limites da WCAG são mínimos rigorosos e a taxa não pode ser arredondada para cima. Por isso este verificador mostra a taxa arredondada para baixo: um valor que parece passar realmente passa.
O que é APCA?
O APCA (Accessible Perceptual Contrast Algorithm) é uma forma mais recente de medir o contraste que leva em conta se o texto é escuro sobre claro ou claro sobre escuro. Ele está em estudo para uma versão futura das diretrizes. Aqui ele aparece só como informação: hoje, as exigências legais e de auditoria se referem à taxa da WCAG 2.
Como as cores sugeridas são escolhidas?
O verificador mantém a matiz e a intensidade da sua cor e muda só a luminosidade, no espaço de cor perceptual OKLCH, até encontrar o valor mais próximo que atinge o nível. Sua cor continua parecida com ela mesma, só um pouco mais clara ou mais escura.
Funciona com cores transparentes?
Sim, para a cor do texto: uma cor de texto semitransparente é primeiro mesclada com o fundo, porque essa é a cor que as pessoas realmente veem. O fundo é tratado como sólido.