Verificar o contraste de cores

Escolha a cor do texto e a do fundo para saber se o seu design é legível e acessível. Indicamos o rácio de contraste, se cumpre os níveis AA e AAA das diretrizes WCAG e, se não chegar, a cor de texto mais parecida que cumpre.

Texto e fundo

Aceita HEX, rgb(), hsl(), oklch() ou nomes CSS. Se o texto for semitransparente, é misturado com o fundo.

Texto grande de exemplo

Este é um texto de tamanho normal. A acessibilidade web consiste em qualquer pessoa, incluindo quem tem baixa visão ou daltonismo, conseguir ler e usar a sua página.

Botão

Rácio de contraste

Texto normal (4,5:1) AA
Texto normal (7:1) AAA
Texto grande (3:1) AA
Texto grande (4,5:1) AAA
Ícones e componentes (3:1) AA

O que é o rácio de contraste?

O rácio de contraste compara a luminância relativa de duas cores e vai de 1:1 (a mesma cor) a 21:1 (preto sobre branco). É definido pelas diretrizes de acessibilidade WCAG 2 do W3C e é a referência usada pela legislação de acessibilidade (em Portugal, o Decreto-Lei n.º 83/2018 e a norma europeia EN 301 549) e por ferramentas como o Lighthouse.

Níveis AA e AAA

AA é o nível habitualmente exigido: 4,5:1 para o texto normal e 3:1 para o texto grande (a partir de 24 px, ou 18,66 px em negrito). AAA é o nível reforçado: 7:1 e 4,5:1, respetivamente. Os ícones, os limites dos campos de formulário e outros componentes da interface precisam de pelo menos 3:1 face às cores à sua volta.

Os logótipos e o texto puramente decorativo ou de elementos desativados estão isentos.

Como melhorar o contraste

Quase sempre basta escurecer o texto (ou clareá-lo sobre fundos escuros) sem mudar de tom: por isso propomos a mesma cor com outra luminosidade, calculada no espaço OKLCH para que a alteração seja a menor possível. Evite texto cinzento-claro sobre branco e texto sobre imagens sem uma camada escura intermédia.