nTools

Contraste de cores explicado: razões WCAG, texto legível e formatos de cor

Atualizado:

Um texto é fácil de ler quando se destaca do fundo, e as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) transformam isso num número: a razão de contraste. A WCAG 2.2, a versão atual, é Recomendação do W3C desde 12 de dezembro de 2024. Este guia explica como a razão é calculada, os mínimos para texto e para controles, e como as formas comuns de escrever uma cor se relacionam com ela.

Como a razão de contraste é calculada

Cada cor é convertida numa luminância relativa, de 0 para o preto a 1 para o branco. Primeiro, os valores de vermelho, verde e azul voltam a ser intensidade de luz, porque os valores sRGB não são proporcionais à luz: um valor até 0,04045 (numa escala de 0 a 1) é dividido por 12,92, e os maiores seguem uma curva de potência 2,4. Depois, são ponderados pelo brilho que o olho percebe: 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul. Antes de maio de 2021 o limite era escrito 0,03928; o W3C observa que a mudança não tem efeito prático.

A razão é (L1 + 0,05) ÷ (L2 + 0,05), sendo L1 a cor mais clara. Vai de 1:1 para duas cores iguais a 21:1 para preto sobre branco. Ela nunca é arredondada: a explicação oficial da WCAG diz que 4,499:1 não atinge 4,5:1, e é por isso que verificadores que arredondam para uma casa decimal podem mostrar como aprovado o que não está.

Verificador de contraste de cores

Os mínimos

A WCAG tem três níveis, A, AA e AAA; o AA é o nível buscado pela maioria das políticas e auditorias de acessibilidade. Três critérios de sucesso definem mínimos de contraste:

CritérioVale paraMínimoNível
1.4.3 Contraste (mínimo)Texto normal4,5:1AA
1.4.3 Contraste (mínimo)Texto grande3:1AA
1.4.6 Contraste (melhorado)Texto normal7:1AAA
1.4.6 Contraste (melhorado)Texto grande4,5:1AAA
1.4.11 Contraste não textualControles, indicadores de foco, ícones e partes de gráficos3:1AA

Texto grande quer dizer pelo menos 18 pontos, ou 14 pontos em negrito, que o W3C situa em cerca de 24 e 18,5 pixels CSS. Texto de logotipo, texto puramente decorativo e o texto de controles desativados não têm exigência de contraste. O contraste não textual cobre o que é preciso ver para usar uma página: a borda de um campo de texto, uma caixa de seleção, o indicador de foco, um ícone sem rótulo, as linhas de um gráfico.

Quais cores passam sobre o branco

Razões sobre o branco, cortadas em duas casas decimais como o verificador mostra:

Texto / fundoContrasteEm que passa
#000000 / #ffffff21:1O máximo: passa em tudo
#0000ff / #ffffff8,59:1Passa em AAA para todo texto
#595959 / #ffffff7:1AAA exato para texto normal
#767676 / #ffffff4,54:1Passa em AA para texto normal
#777777 / #ffffff4,47:1Não passa em AA para texto normal; só texto grande e gráficos
#ff0000 / #ffffff3,99:1Só texto grande e gráficos
#949494 / #ffffff3,03:1Só texto grande e gráficos
#959595 / #ffffff2,99:1Não passa em nada, nem bordas nem ícones
#ffff00 / #ffffff1,07:1Quase invisível

#777777 e #767676 parecem iguais, mas uma reprova e a outra passa: a fronteira é fina assim. O vermelho puro, comum em mensagens de erro, chega só a 3,99:1 sobre o branco, o bastante para um ícone ou texto grande, mas não para uma mensagem de erro em texto normal; um vermelho um pouco mais escuro, como #ee0000, chega a 4,53:1.

Por que 4,5:1

O W3C explica que 4,5:1 compensa a perda de sensibilidade ao contraste que costuma acompanhar uma visão de cerca de 20/40, comum com a idade, e 7:1, a de uma visão de cerca de 20/80. Um bom contraste também ajuda todo mundo: um celular no sol, uma tela barata, um projetor numa sala clara.

Formatos de cor e o que dizem sobre o contraste

#1a73e8, rgb(26 115 232), hsl(214 82% 51%) e oklch(57.4% 0.195 257.9) são o mesmo azul escrito de quatro formas. HEX e RGB dão diretamente as quantidades de vermelho, verde e azul; o HEX pode ganhar um quarto par para a transparência, como #1a73e880 para 50%. O HSL descreve matiz, saturação e luminosidade, mas essa luminosidade não é a que o olho vê: amarelo e azul com 50% de luminosidade HSL têm 96,8% e 45,2% de luminosidade OKLCH, e é por isso que o texto azul passa sobre o branco e o amarelo não.

O OKLCH, da CSS Color nível 4, foi feito para que passos iguais de luminosidade pareçam iguais, o que o torna o formato mais útil para montar uma paleta com contraste previsível. Os navegadores o suportam desde o Chrome e o Edge 111, o Firefox 113 e o Safari 15.4, e ele é Baseline amplamente disponível desde novembro de 2025. O contraste continua sendo calculado com a cor sRGB que é de fato exibida, então confira o par final num verificador de contraste.

Conversor de cores

Como corrigir uma cor que não passa

Além da WCAG 2

Os rascunhos da WCAG 3 testaram outro método de contraste, muitas vezes chamado de APCA, que leva em conta o tamanho e o peso da fonte e trata de outra forma o texto claro sobre fundo escuro. É um rascunho, não uma norma, então auditorias e leis continuam usando a razão da WCAG 2. Na União Europeia, o Ato Europeu de Acessibilidade (Diretiva 2019/882) se aplica desde 28 de junho de 2025 a muitos produtos e serviços, entre eles o comércio eletrônico.

Perguntas frequentes

4,47:1 é quase 4,5:1?

Não. A razão não é arredondada, então 4,47:1 não atinge o mínimo de 4,5:1 para texto normal. Ela atende 3:1 para texto grande e gráficos.

O que conta como texto grande?

Pelo menos 18 pontos, cerca de 24 pixels CSS, ou 14 pontos em negrito, cerca de 18,5 pixels CSS.

Bordas e ícones precisam de contraste?

Sim, quando são necessários para entender ou usar a página: 3:1 em relação às cores ao lado. A borda de um campo de texto, uma caixa de seleção e o indicador de foco são exemplos.

O modo escuro muda as regras?

Não. As mesmas razões valem para qualquer esquema de cores, então confira também a paleta escura.

Mais contraste sempre lê melhor?

Até certo ponto. Um contraste muito alto, como branco puro sobre preto puro, pode incomodar alguns leitores; a partir de 7:1 a leitura é confortável para a maioria dos textos.

Referências

  1. W3C — Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 12 December 2024
  2. W3C WAI — Understanding Success Criterion 1.4.3: Contrast (Minimum)
  3. W3C WAI — Understanding Success Criterion 1.4.11: Non-text Contrast
  4. W3C — CSS Color Module Level 4
  5. Web platform features explorer — oklab() and oklch()
  6. Directive (EU) 2019/882 on the accessibility requirements for products and services (European Accessibility Act)

Guias relacionados