Verificador de contraste
Se alguém consegue mesmo ler.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
0 caracteres
Resultado
Cole ou digite acima para ver o resultado aqui.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Exemplo
Exemplo prático — Verificador de contraste
Insira as linhas na ordem e use as configurações abaixo. Compare o resultado com as linhas de saída.
| Item | Valor |
|---|---|
| Entrada 1 | #000000 |
| Fundo, quando só uma cor é dada | #ffffff |
| Saída 1 | #000000 sobre #ffffff |
| Saída 2 | Razão 21,00 : 1 |
| Saída 3 | Texto corrido AA passa (mínimo 4,5) |
| Saída 4 | Texto corrido AAA passa (mínimo 7) |
| Saída 5 | Texto grande AA passa (18,66 px em negrito ou 24 px, mínimo 3) |
| Saída 6 | Texto grande AAA passa (mínimo 4,5) |
| Saída 7 | Bordas, ícones passa (mínimo 3) |
Preto sobre branco tem contraste de 21:1 e passa nas verificações AA e AAA de texto da ferramenta.
Como funciona
- Escreva um par por linha: #333 sobre #fff. Uma vírgula, uma barra ou só um espaço também servem.
- Dê uma cor sozinha e ela é comparada com o fundo indicado acima.
- Leia primeiro a razão; todo o resto decorre dela.
- 4,5 é o número a superar para texto corrido.
Perguntas frequentes
- O que AA e AAA exigem exatamente?
- AA pede 4,5 : 1 para texto corrido e 3 : 1 para texto grande — 24 px, ou 18,66 px em negrito. AAA pede 7 : 1 e 4,5 : 1. Bordas, ícones e os contornos de campos de formulário precisam de 3 : 1.
- Por que meu cinza reprova?
- #777 sobre branco dá 4,48 : 1 e perde o AA por dois centésimos. É a quase-aprovação clássica, e justamente o motivo de se conferir: para quem escolheu a cor parece ótimo, e para muita gente é genuinamente difícil de ler. #757575 passa.
- Importa qual cor eu ponho primeiro?
- Com cores opacas, não: a razão é simétrica, e texto sobre fundo e fundo sobre texto dão o mesmo número. Com uma cor transparente (#33333380, rgba(…)), sim: a primeira é posta sobre a segunda, e um fundo transparente, sobre uma página branca; então escreva primeiro a cor do texto.
- Passar na razão basta para chamar de acessível?
- Não. Contraste é um requisito entre muitos e não diz nada sobre estados de foco, áreas de toque, movimento, nem sobre a cor estar carregando sozinha um significado. É um piso, não um veredito.
Ferramentas relacionadas
◒ Conversor de cor HEX, RGB, HSL e CMYK — mais a razão de contraste que decide a legibilidade. ◒ Formatador CSS Uma declaração por linha — ou o arquivo inteiro em uma. ◉ Ferramentas de imagem Conta-gotas de cor da imagem Um clique para um código de cor, um botão para a paleta da imagem. ‹› Formatador HTML Recuado para ler, ou espremido para publicar.