Que razão preciso atingir?

4,5:1 para texto normal no AA, que é o nível citado pela maioria das exigências de acessibilidade. Texto grande — 18pt, ou 14pt em negrito — precisa só de 3:1. O AAA sobe esses números para 7:1 e 4,5:1.

Por que uma combinação que me parece boa é reprovada?

A razão é calculada a partir da luminância relativa, não do quanto os dois matizes parecem diferentes. Laranja sobre branco parece bem contrastado e pontua mal, porque os dois são claros. Essa distância é justamente o ponto: o teste é para leitores cujos olhos não separam matiz como os seus.

A razão vale para ícones e bordas também?

Componentes de interface e gráficos com significado precisam de 3:1 contra o que está atrás deles. Formas decorativas, e o texto que faz parte de um logotipo, ficam de fora.

Como conserto uma combinação reprovada sem mexer na cor da marca?

Mexa na luminosidade, não no matiz. Escurecer o texto ou clarear o fundo muda a razão rápido e deixa a cor reconhecível — e normalmente é o fundo que tem mais espaço para se mover.

Início›Ferramentas de cor› Verificador de contrasteNavegador

Verificar o contraste de cor segundo a WCAG

Calcula a razão de contraste WCAG entre a cor do texto e o fundo, e mostra se passa em AA e AAA nos tamanhos normal e grande. A razão se baseia na luminância relativa, não em quão diferentes os tons parecem.

Cor do texto

Fundo

Amostra de texto grandeTexto corrido no tamanho que a maioria das interfaces realmente usa.

5.85:1

Razão de contraste. A WCAG mede luminância relativa, não o quanto os tons parecem diferentes.

AA — texto normalPassa · precisa de 4.5:1
AA — texto grande (18pt+)Passa · precisa de 3:1
AAA — texto normalFalha · precisa de 7:1
AAA — texto grandePassa · precisa de 4.5:1

Como usar

1Defina a cor do texto e a do fundo.
2Leia a razão e as marcas de aprovado ou reprovado para AA e AAA.
3Olhe a amostra ao vivo abaixo para ver como aquela razão realmente fica.

Perguntas frequentes

Que razão preciso atingir?: 4,5:1 para texto normal no AA, que é o nível citado pela maioria das exigências de acessibilidade. Texto grande — 18pt, ou 14pt em negrito — precisa só de 3:1. O AAA sobe esses números para 7:1 e 4,5:1.
Por que uma combinação que me parece boa é reprovada?: A razão é calculada a partir da luminância relativa, não do quanto os dois matizes parecem diferentes. Laranja sobre branco parece bem contrastado e pontua mal, porque os dois são claros. Essa distância é justamente o ponto: o teste é para leitores cujos olhos não separam matiz como os seus.
A razão vale para ícones e bordas também?: Componentes de interface e gráficos com significado precisam de 3:1 contra o que está atrás deles. Formas decorativas, e o texto que faz parte de um logotipo, ficam de fora.
Como conserto uma combinação reprovada sem mexer na cor da marca?: Mexa na luminosidade, não no matiz. Escurecer o texto ou clarear o fundo muda a razão rápido e deixa a cor reconhecível — e normalmente é o fundo que tem mais espaço para se mover.