Verificador de contraste de cores
Verifique o contraste WCAG 2.1 e APCA de duas cores — ou solte uma captura de tela e veja exatamente onde traços finos tornam o texto difícil de ler. Tudo local, sem upload.
How to capture solid material
Browser zoom does not increase resolution, and snipping tools on HiDPI displays often capture logical instead of physical pixels. Use Chrome DevTools → Elements panel → right-click the element → "Capture node screenshot", or Firefox's right-click screenshot — both capture at device resolution.
| # | Occurrences | Stroke width | WCAG nominal → effective | APCA nominal → effective |
|---|
Note — the analysis runs entirely locally in your browser; the screenshot never leaves your device. Clicking a table row steps the loupe through that group's occurrences.
Por que uma razão aprovada ainda pode ser difícil de ler
Todo verificador de contraste recebe dois valores de cor e devolve uma razão. Esse número é honesto sobre as cores — e cego para todo o resto. Um par de 4,5:1 que passa no WCAG AA pode ser realmente difícil de ler quando a fonte é fina e pequena: o que chega ao olho não é a cor nominal do texto, e sim a mistura de anti-aliasing entre texto e fundo que foi de fato desenhada na tela. Quanto mais fino o traço, maior a parte de cada letra formada por esses pixels de borda desbotados — e o contraste efetivo cai abaixo do que os dois valores hexadecimais prometiam. É essa lacuna que a ferramenta fecha: além da verificação clássica de duas cores, ela analisa uma captura da sua interface real e mede onde os traços são mais finos e qual é o contraste efetivo exatamente nesses pontos.
A ferramenta sempre mostra as duas referências: a razão WCAG 2.1, o padrão de conformidade atual (4,5:1 para texto normal, 3:1 para texto grande), e o Lc do APCA, o modelo perceptual candidato para o WCAG 3, que considera a polaridade claro/escuro. Na prática, Lc 90 é ideal para texto corrido, Lc 75 é a meta para texto normal, Lc 60 basta para texto grande ou em negrito, e abaixo de Lc 45 não deveria haver texto algum. Quando os dois valores se contradizem, siga o mais pessimista.
Contraste efetivo baixo não é caso raro: a sensibilidade ao contraste diminui com a idade e despenca com catarata, degeneração macular ou astigmatismo; luz solar direta e telas com pouco brilho agravam o problema, assim como texto todo em maiúsculas. As correções saem direto das medições: traços abaixo de 2 px → aumentar o peso da fonte (400 → 500/600); contraste insuficiente → escurecer a cor do texto; texto pequeno demais → aumentá-lo primeiro. Para valores confiáveis, use uma captura em resolução 2× (Retina). A análise roda inteiramente no seu navegador — a captura nunca sai do seu dispositivo.
Privacidade desde a concepção
Todo o processamento acontece dentro do seu navegador. Seus arquivos nunca chegam a um servidor — não há nada para armazenar, transmitir ou compartilhar.
Saiba mais na nossa política de privacidadePerguntas frequentes
É grátis, sem cadastro, e nada é enviado. Tanto a verificação de cores quanto a análise completa da captura rodam no seu navegador — você pode desconectar da internet depois que a página carregar e tudo continua funcionando.
Como regra geral, Lc 90 é ideal para texto corrido, Lc 75 é a meta para texto normal, Lc 60 é aceitável para texto grande ou em negrito, e abaixo de 45 não deveria haver texto algum. O APCA considera a polaridade — claro sobre escuro e escuro sobre claro pontuam diferente, ao contrário da razão WCAG.
Porque a razão descreve apenas as duas cores nominais. Em pesos finos, o anti-aliasing mistura a maior parte de cada traço com o fundo: o contraste realmente exibido é menor. A análise mede esses pixels reais nos pontos mais finos — esse é o valor que seus leitores percebem.