A razão de contraste vai de 1:1, em que o texto fica invisível sobre o fundo, até 21:1, que é preto puro sobre branco puro. Entre esses extremos, quatro limites importam.
| Razão | Nível | Se aplica a |
|---|---|---|
| 4.5:1 | AA | Texto normal do corpo. Trate como o piso. |
| 3:1 | AA | Texto grande, e componentes de interface e anéis de foco. |
| 7:1 | AAA | Texto do corpo, reforçado. |
| 4.5:1 | AAA | Texto grande, reforçado. |
AA é o nível citado pela maior parte da legislação de acessibilidade, então 4.5:1 para o texto do corpo é a exigência prática, não uma aspiração.
O que conta como "texto grande"
Essa é a parte que as pessoas erram, quase sempre a favor delas mesmas.
Grande significa 24 px ou mais, ou 19 px ou mais se for negrito. (A especificação diz 18.66px e 14px em pontos; os valores em pixels são o arredondamento de sempre.) Isso é grande de verdade: maior que quase todo texto de corpo, maior que a maioria dos subtítulos.
A armadilha é raciocinar ao contrário: seu cinza sobre branco fica em 3.4:1, isso reprova no AA para texto normal, então você decide que 18 px conta como grande e segue em frente. Não conta, e quem usa leitor de tela ou tem baixa visão não se importa com o que você decidiu. Se a razão reprova, mude a cor.
De onde vem o número
A razão de contraste é calculada a partir da luminância relativa: quanta luz cada cor emite, ponderada pela sensibilidade da visão humana ao vermelho, ao verde e ao azul. O verde responde por cerca de 72% do brilho percebido, o vermelho por 21% e o azul por 7%.
Essa ponderação explica algo que, de outro jeito, parece errado. Azul puro sobre branco dá 8.6:1 e passa em tudo, enquanto amarelo puro sobre branco dá 1.07:1 e é praticamente invisível, embora os dois sejam "uma cor saturada sobre branco". O azul é escuro para o olho; o amarelo é quase tão claro quanto o branco. A saturação não tem nada a ver com isso.
Ou seja, não dá para avaliar isso no olho. É preciso medir, que é o que o verificador de contraste daqui faz: você dá uma cor de texto e um fundo, e ele informa a razão, marca AA e AAA como aprovado ou reprovado nos dois tamanhos de texto e mostra o par em tamanhos reais para você ver o que o número significa. Se você só tem uma cor e quer a razão contra texto preto e branco puros, o conversor de cores mostra isso também.
As duas coisas que a razão não diz
1. Ela não diz nada sobre daltonismo
Texto vermelho e texto verde podem ter, os dois, contraste excelente sobre um fundo branco e ser completamente indistinguíveis entre si para cerca de 8% dos homens. A razão mede cada cor contra o fundo dela, não as cores entre si.
A regra que sai daí: nunca use só o matiz para carregar significado. Acrescente um ícone, um rótulo, um padrão, uma posição. "Clique no botão verde" é uma instrução que parte dos seus usuários não consegue seguir.
2. Passar é um piso, não uma meta
Um texto exatamente em 4.5:1 está em conformidade e ainda assim cansa numa leitura longa. Se você está compondo o corpo de um artigo, mire mais alto: 7:1 ou melhor é confortável, e não custa nada além de um cinza um pouco mais escuro.
A moda do texto de corpo em cinza claro sobre branco é a falha de acessibilidade mais comum da web moderna, e é inteiramente autoinfligida. #999 sobre branco é 2.8:1. Reprova.
Casos que pegam as pessoas de surpresa
- Texto de placeholder. É texto. Precisa de 4.5:1. Os padrões do navegador normalmente não alcançam isso, então, se você depende de placeholders para rotular campos —o que já é um problema em si— são duas falhas empilhadas.
- Controles desabilitados. Isentos da exigência, o que é uma lacuna real da especificação e não uma permissão para deixá-los ilegíveis.
- Texto sobre imagens. A razão precisa se sustentar contra o pior pixel atrás do texto, não contra a média. Uma camada de escurecimento ou um painel sólido costuma ser a única solução confiável.
- Indicadores de foco. Precisam de 3:1 contra o que está ao lado deles. O contorno padrão do navegador normalmente passa; o
outline: noneque as pessoas acrescentam para "dar uma limpada" é uma regressão real de acessibilidade. - Logos. Realmente isentos.
- Modo escuro. Conferir o tema claro e supor que o escuro está certo é o motivo de metade dos modos escuros sair quebrada. São sistemas de cor separados e precisam de conferências separadas.
Um atalho que funciona
Em vez de testar cores uma a uma até alguma passar, fixe o matiz e varra a luminosidade. Escolha o matiz da sua marca, gere uma escala do muito claro ao muito escuro e confira a razão em cada passo. Você termina com um conjunto pequeno de combinações que sabe que funcionam —esta cor de texto sobre aquele fundo— em vez de decidir tudo de novo toda vez.
É assim que os design systems resolvem isso, e é muito mais rápido que o ciclo de tentativa e erro.
O jeito mais rápido de conferir um par específico é o verificador de contraste: defina a cor do texto e a do fundo, leia a razão e ajuste uma das duas até o AA parar de reprovar. O conversor de cores gera a escala de luminosidade descrita acima, então você consegue achar o passo em que a cor da sua marca começa a passar em vez de chutar.
Se você ficou se perguntando por que a ferramenta oferece HSL quando você pensa em hex, vale a pena dedicar dez minutos: HEX, RGB e HSL explicados mostra por que hex serve bem para guardar uma cor e é péssimo para ajustar uma, que é exatamente o problema que aparece no instante em que uma conferência de contraste reprova.
Perguntas frequentes
Qual razão de contraste é exigida para acessibilidade?
4.5:1 para o texto normal do corpo e 3:1 para o texto grande, para atender ao WCAG AA, que é o nível citado pela maior parte da legislação de acessibilidade. O AAA pede 7:1 no texto do corpo e 4.5:1 no texto grande.
O que conta como texto grande para efeito de contraste?
24px ou mais, ou 19px ou mais se for negrito. Isso é maior que a maioria do texto de corpo e da maioria dos subtítulos, então, na prática, a exigência de 4.5:1 vale para quase todo o texto de uma página típica.
Uma boa razão de contraste significa que minhas cores são seguras para daltônicos?
Não. O contraste mede cada cor contra o fundo dela, não contra outras cores. Texto vermelho e texto verde podem passar os dois e mesmo assim ser indistinguíveis para cerca de 8% dos homens. Nunca use só o matiz para carregar significado.
Texto cinza sobre branco é acessível?
Depende do cinza. #999 sobre branco é 2.8:1 e reprova. #767676 sobre branco é cerca de 4.5:1 e passa por pouco. Texto de corpo em cinza claro é a falha de acessibilidade mais comum da web moderna.
Preciso conferir o contraste separadamente no modo escuro?
Sim. O tema claro e o escuro são sistemas de cor separados, e uma combinação que passa em um costuma reprovar no outro. Conferir só o tema claro é o motivo de a maioria dos modos escuros sair quebrada.
Última atualização 19 de setembro de 2026