Verificador de Contraste

Insira uma cor de texto e de fundo para ver a proporção de contraste WCAG e quais níveis AA e AAA são aprovados.

Proporção de contraste
Texto normalAA4.5:1
Texto normalAAA7:1
Texto grandeAA3:1
Texto grandeAAA4.5:1
Interface e gráficos3:1
Insira uma cor de texto e de fundo para verificar.

Cada verificação roda no seu navegador. Nada do que você digita é enviado para o BroBroGo.

FAQ

O que significam os resultados AA e AAA?

AA é o nível que a maioria dos sites busca: exige uma proporção de pelo menos 4.5:1 para texto normal e 3:1 para texto grande. O nível AAA é mais rigoroso — 7:1 para texto normal e 4.5:1 para texto grande. A proporção vai de 1:1 (sem contraste) até 21:1 (preto no branco).

O que é considerado um texto grande?

Textos a partir de 18pt (cerca de 24px), ou 14pt (cerca de 18.5px) quando em negrito. Textos maiores continuam legíveis com menor contraste, por isso passam no nível AA com 3:1 e no AAA com 4.5:1, em vez dos limites mais rígidos para texto normal.

Quais formatos de cor posso inserir?

Digite um valor hexadecimal como #1a1a1a, um valor rgb() como rgb(26, 26, 26) ou um valor hsl() — ou clique em qualquer uma das amostras para escolher uma cor. Use o botão de inverter para trocar as cores do texto e do fundo.

Este teste usa o WCAG 2 ou o novo método APCA?

Ele usa a fórmula do WCAG 2.1 / 2.2, que é a referência atual para regras e auditorias de acessibilidade. O APCA é um método mais novo e baseado na percepção visual que ainda está sendo elaborado para o WCAG 3 — é promissor, mas ainda não é um padrão de conformidade oficial, por isso os resultados de aprovação aqui não o utilizam.