Verificador de contraste de cores
Verifique se o texto será realmente legível, de acordo com o padrão de acessibilidade.
- Executa no seu navegador — seu texto nunca é enviado a lugar nenhum
- Sem cadastro, sem cotas, grátis para usar quantas vezes quiser
Como funciona
Texto cinza-claro sobre branco é a falha de acessibilidade mais comum na web, e é totalmente evitável. As diretrizes de acessibilidade definem o contraste como uma razão precisa, então saber se uma combinação passa é questão de aritmética, e não de opinião.
Como a razão é calculada
A luminância relativa de cada cor é calculada da forma que as diretrizes especificam — com a correção gama aplicada por canal — e a razão é obtida entre a mais clara e a mais escura. O resultado coincide com o que uma auditoria de acessibilidade vai informar, porque é a mesma fórmula.
Os limites
O texto normal precisa de 4,5:1 para AA e 7:1 para AAA. O texto grande — aproximadamente 24px, ou 18,7px se estiver em negrito — precisa apenas de 3:1 para AA e 4,5:1 para AAA. Componentes de interface e gráficos significativos precisam de 3:1. O AA é o que a maioria das organizações e da legislação exige.
Por que o texto grande exige menos
Letras maiores têm mais pixels em cada traço, então continuam legíveis com menos contraste. É por isso que um título pode usar um cinza mais claro do que o texto do corpo.
O que a razão não captura
Ela não diz nada sobre daltonismo, que é uma verificação à parte, nem sobre se o texto é grande o suficiente ou se a fonte é legível. Uma razão aprovada é o mínimo, não a prova de um design legível.
Verificador de contraste de cores — perguntas
Que razão de contraste eu preciso?
4,5:1 para texto normal no nível AA, 3:1 para texto grande. O AAA eleva esses valores para 7:1 e 4,5:1.
O que conta como texto grande?
Aproximadamente 24px ou mais, ou 18,7px ou mais se estiver em negrito.
Passar significa que meu design é acessível?
Não. O contraste é um requisito entre muitos; ele não diz nada sobre daltonismo, tamanho do texto ou legibilidade.