Verificador de contraste
Se alguém consegue mesmo ler.
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.
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?
- Não. A razão é simétrica: texto sobre fundo e fundo sobre texto dão o mesmo número.
- 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.