⇄ Inverter as cores

Como usar

1. Escolha uma cor de primeiro plano (texto) e uma cor de fundo.
2. A razão de contraste é atualizada instantaneamente.
3. Verifique as notas WCAG (AA/AAA) para texto normal e grande.
4. Clique em Inverter para trocar as cores.

Perguntas frequentes

O que é WCAG ?

WCAG (Web Content Accessibility Guidelines) são as normas internacionais para tornar o conteúdo web acessível. O nível AA é o padrão mais comumente exigido. O nível AAA é o mais alto.

O que conta como « texto grande » ?

O texto grande é definido como pelo menos 18 pt (24 px) ou 14 pt (18,66 px) em negrito. Tem uma exigência de contraste mais baixa porque é mais fácil de ler.

Qual razão de contraste buscar ?

Para o corpo do texto, busque pelo menos 4,5 : 1 (AA). Para a melhor acessibilidade, busque 7 : 1 (AAA). Títulos e textos grandes precisam de pelo menos 3 : 1.

O que a WCAG realmente mede

«Contraste» na acessibilidade web não é «o quão diferentes as cores parecem», é uma razão precisa de luminância relativa entre duas cores. A luminância é uma aproximação perceptual de quão brilhante uma cor aparenta ser para um observador de visão típica. A razão vai de 1:1 (duas cores com luminância idêntica, invisíveis uma sobre a outra) até 21:1 (preto puro #000000 sobre branco puro #ffffff). Três critérios de sucesso normativos da WCAG usam essa razão:

• 1.4.3 Contraste (Mínimo), Nível AA: pelo menos 4,5:1 para texto normal, 3:1 para texto grande.
• 1.4.6 Contraste (Aprimorado), Nível AAA: pelo menos 7:1 normal, 4,5:1 grande.
• 1.4.11 Contraste Não Textual, Nível AA (acrescentado na WCAG 2.1), pelo menos 3:1 para componentes de interface e objetos gráficos significativos em relação às cores adjacentes.

O piso de 4,5:1 não é arbitrário. A própria derivação da WCAG usa uma linha de base ANSI de 3:1 para a visão normal, multiplicada por 1,5 para usuários com acuidade 20/40 (o limiar frequentemente usado para definir «baixa visão» legal). 4,5 = 3 × 1,5. O limiar AAA de 7:1 estende a mesma lógica para cerca de 20/80 de acuidade. Logotipos, nomes de marca e texto incidental ou decorativo são isentos, mas todo o resto se enquadra na regra.

A fórmula

A fórmula de contraste da técnica G18 da WCAG tem três passos. As entradas são valores de canal sRGB de 8 bits (0-255), cada um primeiro convertido para um intervalo de 0-1:

1. Linearizar o sRGB (desfazer a curva gama). Para cada canal V: se V ≤ 0.04045, V_linear = V ÷ 12.92; caso contrário, V_linear = ((V + 0.055) ÷ 1.055)^2.4. (Documentos mais antigos da WCAG usavam 0.03928; o W3C corrigiu via errata para 0.04045 a fim de corresponder à especificação formal do sRGB, a diferença numérica é desprezível.)
2. Calcular a luminância relativa: L = 0.2126·R + 0.7152·G + 0.0722·B (linearizados). Os pesos vêm da função de luminosidade fotópica do observador padrão CIE 1931, o olho humano é mais sensível ao verde (~71%), depois ao vermelho (~21%), depois ao azul (~7%). É por isso que texto azul puro sobre branco pode reprovar no contraste mesmo que as cores pareçam muito diferentes.
3. Tirar a razão: (L1 + 0.05) ÷ (L2 + 0.05), em que L1 é a cor mais clara e L2 a mais escura. O deslocamento de 0.05 modela o brilho ambiente de um monitor típico e evita que a razão dispare quando uma das cores é quase preta.

Exemplo resolvido para preto sobre branco: o branco tem L = 1.0, o preto tem L = 0, então a razão é (1 + 0.05) ÷ (0 + 0.05) = 21. Esse é o contraste máximo possível em sRGB.

O que conta como «texto grande»?

A WCAG define texto de larga escala como pelo menos 18 pt (peso normal) ou 14 pt em negrito. Convertido para pixels CSS pela definição do W3C de 1 pt = 1,333 px:

• 18 pt = 24 px normal
• 14 pt em negrito = 18,66 px negrito

A maioria dos navegadores usa 16 px / 12 pt como padrão para o corpo do texto, o que não é grande. Um erro comum é tratar qualquer título como grande; um <h3> estilizado em 18 px normal ainda se enquadra na regra de 4,5:1 para texto normal.

O famoso caso-limite: #767676 sobre branco

Designers em busca de minimalismo costumam escolher cinzas intermediários para o corpo do texto. Dois valores que parecem idênticos ao olho ficam em lados opostos da linha da WCAG:

Primeiro plano	Plano de fundo	Razão	AA Normal
#000000	#ffffff	21.00	Passa (máximo)
#595959	#ffffff	~7.0	Passa + AAA
#767676	#ffffff	4.54	Passa (no limite)
#777777	#ffffff	4.48	Reprova
#959595	#ffffff	3.00	Reprova (só grande)
#ffff00	#ffffff	1.07	Reprova

Uma mudança de um único caractere no hex, a diferença entre #767676 e #777777, faz o mesmo cinza aparente passar de aprovado a reprovado, porque a WCAG proíbe explicitamente arredondar as razões para cima. O WebAIM cita especificamente #777777 como um «tom de cinza comumente usado» que não atende ao AA. Essa única cilada responde por uma parcela mensurável das falhas de auditoria automatizada em varreduras de sites do mundo real.

Onde a fórmula deixa a desejar

A fórmula de luminância relativa é rápida e determinística, mas tem falhas perceptuais bem documentadas:

• Simetria. A WCAG 2 retorna a mesma razão quer você ponha texto claro sobre fundo escuro, quer texto escuro sobre fundo claro. Estudos empíricos de leitura mostram que o claro-sobre-escuro precisa de mais contraste do que o escuro-sobre-claro para parecer igualmente legível, em parte por causa da dilatação da pupila e da «halação» em glifos brilhantes sobre campos escuros. Interfaces em modo escuro que passam no WCAG 2 AA ainda podem parecer desbotadas.
• Cegueira espacial. A fórmula ignora o peso da fonte, a espessura do traço e o tamanho da fonte além do limiar de texto grande. Uma fonte fina de 18 px e uma fonte de peso 900 de 18 px são tratadas de forma idêntica.
• Aprovação excessiva no modo escuro. Segundo a documentação do APCA, a fórmula superestima sistematicamente o contraste para cores escuras. Dois cinzas escuros que passam matematicamente no WCAG 2 podem ser visualmente indistinguíveis em um monitor real.

APCA (Accessible Perceptual Contrast Algorithm) é o candidato a substituto que está sendo prototipado para a WCAG 3. Ele retorna um único valor Lc com sinal, de cerca de −108 a +106, leva em conta a polaridade e inclui uma consulta de peso / tamanho da fonte. O APCA é atualmente uma referência beta não comercial, não um alvo legal de conformidade (sites em produção ainda devem mirar a WCAG 2.1 / 2.2 AA), mas é uma verificação de legibilidade mais precisa, especialmente para o modo escuro. O Chrome DevTools tem uma prévia do APCA embutida no seu seletor de cores.

Por que isso importa juridicamente

A WCAG 2.2 tornou-se uma Recomendação do W3C em 5 de outubro de 2023, mas os critérios de contraste seguem inalterados desde a 2.1. O contraste de cor é uma das questões mais citadas em processos judiciais de acessibilidade digital, e várias jurisdições efetivamente o tornam obrigatório:

• Estados Unidos, Section 508 (revisada em 2017) está harmonizada com a WCAG 2.0 AA, então 4,5:1 é obrigatório para as compras públicas federais. As decisões judiciais do Título III da ADA têm citado repetidamente a WCAG AA como o padrão de facto para sites comerciais voltados ao público. O DOJ adotou uma regra do Título II em abril de 2024, exigindo que o conteúdo web dos governos estaduais e municipais atenda à WCAG 2.1 AA, com prazos escalonados ainda nesta década.
• A União Europeia, EN 301 549 incorpora a WCAG 2.1 AA. O prazo de conformidade da Lei Europeia de Acessibilidade (Diretiva 2019/882) foi 28 de junho de 2025, abrangendo sites, apps móveis, e-commerce, bancos, e-books e mais. As microempresas são isentas no caso de serviços. As penalidades variam conforme o Estado-membro.
• Reino Unido, Equality Act 2010: o dever de «ajustes razoáveis» se aplica aos setores público e privado. Os órgãos do setor público estão sujeitos aos regulamentos de acessibilidade de 2018 que incorporam a EN 301 549 / WCAG 2.1 AA.
• O Canadá, AODA (Ontário) e a federal Accessible Canada Act exigem WCAG 2.0 AA, sendo que os prazos escalonados da AODA já passaram há muito tempo.

Contraste de cor vs. daltonismo

Um ponto comum de confusão: a razão da WCAG é baseada em luminância e continua útil para a maioria dos usuários daltônicos, uma razão de 4,5:1 derivada da luminância corresponde a um forte sinal perceptual mesmo quando as pistas de matiz se perdem. É por isso que os critérios de contraste convivem com um critério separado, 1.4.1 Uso da Cor, que proíbe depender apenas da cor para transmitir informação. O contraste não diz se um gráfico que distingue vermelho de verde é legível para alguém com deuteranopia, apenas se cada cor contrasta individualmente com o fundo do gráfico. Gráficos e interfaces com estado precisam de padrões, rótulos ou formas sobrepostos à cor.

Checklist prático

• Texto de corpo sobre branco: fique em #595959 ou mais escuro para AAA; #767676 é o cinza mais claro que ainda passa no AA Normal.
• Azuis de marca: muitos caem na faixa de 3-4,5. O #1976d2 é um azul Material típico, em cerca de 4,59:1, e passa por pouco no AA Normal sobre branco. O #42a5f5, em cerca de 2,6:1, reprova.
• Bordas de formulário: uma borda 1px solid #ccc sobre branco fica em cerca de 2,13:1 e reprova no 1.4.11. Use #767676 ou mais escuro.
• Indicadores de foco precisam atingir 3:1 em relação ao fundo. O contorno padrão do navegador é frequentemente sobrescrito por CSS de reset sem um substituto que atinja o limiar.
• Texto de placeholder é tecnicamente incidental, mas os usuários o leem, então trate-o como se 4,5:1 se aplicasse.
• Não confie no olho para o modo escuro. As razões da WCAG 2 aprovam em excesso, de forma sistemática, os fundos escuros. Faça uma verificação cruzada com o APCA no Chrome DevTools.

Mais perguntas

Por que o amarelo puro sobre branco reprova, mesmo parecendo brilhante?

O amarelo (#ffff00) sobre branco é 1,07:1, quase nenhum contraste. A fórmula de luminância pondera o verde em 71% e o vermelho em 21%, então o amarelo (R+G) tem uma luminância muito próxima à do branco. O amarelo sobre preto, por outro lado, é 19,56:1, uma das combinações mais legíveis que existem, e é por isso que é usado em placas de trânsito e avisos de capacete.

Devo sempre buscar o AAA?

Não. A própria WCAG diz: «Não se recomenda exigir a conformidade de Nível AAA como política geral para sites inteiros, porque não é possível satisfazer todos os Critérios de Sucesso de Nível AAA para alguns conteúdos.» O AA é o alvo legal em quase todo lugar; o AAA é para leitura informativa de alto risco (conteúdo de formato longo, documentos governamentais destinados ao público geral, publicações que priorizam a acessibilidade).

As ferramentas automatizadas detectam todas as falhas de contraste?

Não. O axe-core, o Lighthouse e auditorias semelhantes sinalizam de forma confiável as falhas de texto sobre cor chapada, mas não conseguem testar texto sobreposto a imagens de fundo, gradientes CSS, fundos de pseudoelementos ou cores de borda CSS, que são sinalizados como «incompletos» e precisam de revisão manual. Um seletor ao vivo como este é particularmente útil para amostrar a cor de fundo dominante de uma imagem e verificar só o par texto/fundo antes de publicar.

Esta ferramenta suporta transparência / alpha?

Esta página verifica pares de hex opacos. Se o seu texto ou fundo usa alpha, o contraste real depende do que estiver atrás dele, e você precisará primeiro calcular o primeiro plano composto e verificar a cor opaca resultante.

Algo é enviado a um servidor?

Não. A fórmula de luminância e a razão são calculadas no seu navegador; as cores nunca saem do seu dispositivo. A página funciona offline depois de carregada.

Ferramentas relacionadas