Pular para o conteúdo

Calculadora de taxa de contraste

Verifique a taxa de contraste WCAG entre uma cor de texto e uma cor de fundo, veja quais níveis de acessibilidade são aprovados e obtenha sugestões de cores que atingem o limite.

#
#

Resultado da taxa de contraste

Taxa de contraste

-

Digite duas cores.

Amostra de texto grande

Amostra de texto de corpo em tamanho normal, o tipo mais afetado por falhas de contraste.

AA, texto normal (4,5:1)
-
AA, texto grande (3:1)
-
AAA, texto normal (7:1)
-
AAA, texto grande (4,5:1)
-

Cores de texto sugeridas que passam no AA

As cores abaixo atingem pelo menos 4,5:1 em relação ao seu fundo. Selecione uma para testar como cor de texto.

Como funciona

A taxa de contraste é a diferença de luminância entre uma cor de primeiro plano e uma cor de fundo, calculada como (L1 + 0,05) dividido por (L2 + 0,05) conforme as diretrizes WCAG, onde L1 é a luminância relativa da cor mais clara e L2 a da mais escura. O WCAG AA exige 4,5:1 para texto normal e 3:1 para texto grande.

  1. Digite ou escolha duas cores

    Digite um valor hexadecimal ou use os seletores de cores.

  2. Leia a taxa e os níveis

    Cada nível WCAG mostra aprovação ou reprovação para essa taxa.

  3. Teste uma cor sugerida

    Escolha uma amostra abaixo para atingir instantaneamente o AA com seu fundo atual.

A fórmula de contraste WCAG

taxa = (L1 + 0,05) ÷ (L2 + 0,05)

A luminância relativa L vem do sRGB linearizado: cada canal é convertido de 0-255 com correção gama para luz linear usando a função de transferência sRGB, depois ponderado como 0,2126R + 0,7152G + 0,0722B para corresponder à eficiência luminosa humana. A taxa máxima possível é 21:1, preto puro sobre branco puro.

A quem se aplica a regra de 4,5:1

A proporção de 4,5:1 do WCAG aplica-se especificamente a texto e imagens de texto. Imagens decorativas, logotipos e ícones puramente visuais sem alternativa textual estão isentos. Componentes de interface não textuais, como botões, bordas de campos de formulário e indicadores de foco, precisam apenas de 3:1 conforme o WCAG 1.4.11, um limite menor porque traços finos de caracteres exigem mais contraste para permanecer legíveis do que uma forma simples.

Temas escuros podem falhar mesmo quando parecem legíveis

O algoritmo do WCAG usa luminância linearizada em sRGB, que não é linear em relação ao brilho percebido. Temas escuros frequentemente combinam texto cinza médio sobre um fundo quase preto, onde a proporção fica abaixo de 4,5:1 mesmo parecendo legível. Por exemplo, #999999 sobre #1A1A24 resulta em cerca de 3,6:1, falhando no nível AA; clarear o texto para aproximadamente #ABABAB ou mais claro atinge o limite necessário.

Perguntas frequentes

Qual proporção de contraste o WCAG AA exige para corpo de texto?

O WCAG 2.1 Nível AA exige uma proporção de contraste mínima de 4,5:1 para texto de peso normal abaixo de 18px ou negrito abaixo de 14px, e 3:1 para texto grande (18px ou mais em peso normal, ou 14px ou mais em negrito). O Nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande. A proporção máxima possível é 21:1, preto puro (#000000) sobre branco puro (#FFFFFF).

Como a proporção de contraste do WCAG é calculada?

A fórmula é (L1 + 0,05) dividido por (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 da mais escura. A luminância relativa vem de valores sRGB linearizados: cada canal é convertido de 0-255 com correção gama para luz linear usando a função de transferência sRGB, e então ponderado como 0,2126R + 0,7152G + 0,0722B para corresponder à eficiência luminosa humana.

Uma taxa de contraste de 4,5:1 é obrigatória para todos os elementos de interface?

Não. A taxa de 4,5:1 do WCAG se aplica especificamente a texto e imagens de texto. Imagens decorativas, logotipos e ícones puramente visuais sem alternativa textual são isentos. Componentes de interface sem texto (botões, campos de formulário, indicadores de foco) exigem apenas contraste de 3:1 conforme o WCAG 1.4.11. O limite mais rigoroso de 4,5:1 existe porque a legibilidade do texto depende de traços finos dos caracteres.

Por que meu design em modo escuro falha no WCAG mesmo parecendo legível?

O algoritmo do WCAG usa luminância linearizada em sRGB, que não é linear em relação ao brilho percebido. Temas escuros frequentemente combinam texto cinza médio sobre fundos quase pretos, onde o contraste percebido parece suficiente, mas a taxa de luminância fica abaixo de 4,5:1. Por exemplo, #999999 sobre #1A1A24 produz cerca de 3,6:1, falhando no nível AA. Tornar o texto aproximadamente #ABABAB ou mais claro no mesmo fundo atinge o limite necessário.

Os requisitos de contraste de cores se aplicam ao texto de espaço reservado em campos de formulário?

Sim. De acordo com a WCAG 1.4.3, o texto de espaço reservado que transmite conteúdo significativo deve atender à proporção de 4,5:1. Muitos designs usam texto de espaço reservado com baixa opacidade, por exemplo, cinza a 40%, que não atinge esse limite. O Critério de Sucesso 1.4.3 não isenta categoricamente o texto de espaço reservado; a exceção se aplica apenas a componentes de UI inativos ou decoração pura, e não a textos de dica instrucional.