Verificador de contraste

Q: O verificador serve para texto de marcador de posição ou desativado?

O texto de marcador de posição placeholder tem de cumprir o mesmo mínimo de 4,5:1 quando transmite informação. Os controlos desativados estão isentos dos requisitos de contraste, mas estados desativados legíveis continuam a ajudar os utilizadores.

Verificador de contraste WCAG grátis. Introduz a cor do texto e do fundo para obteres o rácio de contraste, os resultados AA/AAA e a cor aprovada mais próxima.

Cor do texto

Cor de fundo

Rácio de contraste

–

Resultados WCAG 2.2

	AA	AAA
Texto normal
Texto grande
Componentes de interface e gráficos		–

Pré-visualização

Texto normal (16 px). Um pequeno jabuti xereta viu dez cegonhas felizes.

Texto grande (24 px)

Texto grande em negrito (18,66 px negrito)

Botão

Sugestões

Objetivo

Cor de texto aprovada mais próxima

–

Cor de fundo aprovada mais próxima

–

Como usar o verificador de contraste

Introduz a Cor do texto e a Cor de fundo. Usa as amostras de cor ou escreve qualquer valor CSS nos campos: um código HEX como #595959, rgb(89 89 89), hsl(0 0% 35%) ou um nome como navy.
O Rácio de contraste atualiza-se à medida que escreves, de 1:1 (sem contraste) a 21:1 (preto sobre branco).
A tabela Resultados WCAG 2.2 mostra Passa ou Falha para Texto normal, Texto grande e Componentes de interface e gráficos, nos níveis AA e AAA.
Vê a Pré-visualização: mostra texto normal, texto grande, texto grande em negrito, o contorno de um botão e um ícone com as tuas duas cores.
Se um nível falhar, escolhe um Objetivo em Sugestões. A ferramenta propõe a Cor de texto aprovada mais próxima e a Cor de fundo aprovada mais próxima. Clica em Usar para aplicar uma delas. Trocar cores troca o texto com o fundo.

Tudo é calculado no teu navegador; nada é enviado para lado nenhum.

Como é calculado o rácio de contraste

As WCAG 2.x definem o rácio como (L1 + 0,05) / (L2 + 0,05), em que L1 é a luminância relativa da cor mais clara e L2 a da mais escura. A luminância relativa é calculada a partir dos canais sRGB linearizados: cada canal é descodificado com a curva de transferência sRGB e depois L = 0,2126 R + 0,7152 G + 0,0722 B. O verde é o que mais pesa porque os nossos olhos são mais sensíveis a ele, e é por isso que um verde puro parece muito mais claro do que um azul puro da mesma «intensidade».

O rácio nunca é arredondado para cima. #777777 sobre branco dá cerca de 4,48:1 e falha o nível AA para texto normal, apesar de parecer «4,5». Esta ferramenta trunca o valor apresentado a duas casas decimais, para que o que vês seja o que as WCAG verificam.

Se a cor do texto for semitransparente (por exemplo rgb(0 0 0 / 60%)), é primeiro misturada com o fundo, tal como o navegador a desenharia. A transparência da cor de fundo é ignorada, porque não se sabe o que está por trás da página.

Níveis WCAG num relance

Conteúdo	AA	AAA
Texto normal	4,5:1	7:1
Texto grande (24 px, ou 18,66 px em negrito)	3:1	4,5:1
Componentes de interface e gráficos com significado	3:1	–

«Texto grande» significa pelo menos 18 pt (24 píxeis CSS), ou 14 pt em negrito (cerca de 18,66 px). Os logótipos e o texto puramente decorativo não têm requisitos. A regra de 3:1 para componentes de interface (critério de sucesso 1.4.11) aplica-se às bordas de campos e botões, aos indicadores de foco, aos ícones e às linhas de gráficos que os utilizadores precisam de ver.

Como funcionam as sugestões

As cores sugeridas mantêm a tonalidade e o croma da tua cor no espaço OKLCH e só alteram a luminosidade, para mais escuro ou mais claro, até atingirem o rácio pretendido. A ferramenta escolhe depois a direção visualmente mais próxima da tua cor original, medida em OKLab. O resultado é verificado de novo depois de arredondado para código HEX, para garantir que passa mesmo. Se nenhuma luminosidade atingir o objetivo (7:1 contra um cinzento médio, por exemplo), a ferramenta avisa.

Sobre o APCA

O APCA (Accessible Perceptual Contrast Algorithm) é um modelo de contraste mais recente, considerado para uma futura WCAG 3. Tem em conta a espessura e o tamanho da letra e a polaridade (escuro sobre claro ou claro sobre escuro). Ainda é um rascunho e não é um requisito legal nem normativo, por isso esta ferramenta apresenta os resultados WCAG 2.x, que continuam a ser a referência da norma europeia de acessibilidade EN 301 549, da Section 508 e da maioria das leis.

Perguntas frequentes

Que rácio de contraste preciso para o texto corrido?

Pelo menos 4,5:1 para o nível AA, que é o nível exigido pela maioria das leis e políticas. Aponta para 7:1 (AAA) em textos longos ou para públicos com baixa visão.

Texto branco sobre a cor da minha marca passa?

Introduz branco como cor do texto e a cor da tua marca como fundo. Muitos azuis, laranjas e verdes de tom médio só chegam a 3:1: serve para títulos grandes e botões com rótulos grandes, não para texto pequeno. Usa a cor de fundo sugerida se precisares do nível AA para texto normal.

Porque é que a ordem das cores não altera o rácio?

A fórmula divide sempre a luminância mais clara pela mais escura, por isso escuro sobre claro e claro sobre escuro dão o mesmo rácio. O contraste percebido pode ainda assim ser ligeiramente diferente, que é um dos problemas que o APCA tenta resolver.

4,49:1 é suficiente para passar?

Não. Os limites das WCAG são mínimos rigorosos: 4,49:1 falha o nível AA para texto normal. Usa a sugestão para obteres uma cor que passe de facto.

O verificador serve para texto de marcador de posição ou desativado?

O texto de marcador de posição (placeholder) tem de cumprir o mesmo mínimo de 4,5:1 quando transmite informação. Os controlos desativados estão isentos dos requisitos de contraste, mas estados desativados legíveis continuam a ajudar os utilizadores.