Verifique o contraste do texto antes de escolher suas cores
O mesmo verde, um fundo diferente e um resultado diferente. Quatro pares que você pode testar você mesmo.
Um verde que fica bem em uma paleta pode ser difícil de ler como um rótulo pequeno. Verifique a cor do texto junto com o fundo antes de usá-la em um design.
Aqui estão quatro combinações que você pode reproduzir no Estúdio de cores. A terceira usa exatamente o mesmo verde que a segunda; apenas o fundo muda.
Mudar o fundo pode deixar o contraste abaixo do mínimo
| Amostra | Texto / fundo | Proporção de contraste |
|---|---|---|
| 1 | #8DAA91 / #FFFFFF |
2.53:1 |
| 2 | #647C66 / #FFFFFF |
4.55:1 |
| 3 | #647C66 / #F3E7CE |
3.71:1 |
| 4 | #4B7051 / #F3E7CE |
4.59:1 |
As amostras 2 e 4 passam no limite de contraste AA do WCAG para texto normal. As amostras 1 e 3 não passam. Os números mostrados aqui são arredondados para exibição; as verificações usam os valores calculados completos.
Mudar o branco para creme fez a amostra 2 falhar. Escurecer o verde na amostra 4 trouxe de volta acima do limite. Estas são cores de exemplo, não uma paleta obrigatória para o seu projeto. Baixe o CSS delas para testá-las no seu próprio layout.
Verifique também o tamanho do texto
A orientação de contraste de texto do WCAG define uma proporção mínima de 4.5:1 para texto normal no nível AA. Texto grande tem um limite menor de 3:1. “Grande” significa pelo menos 24 pixels CSS para texto regular, ou cerca de 18.67 pixels CSS para texto em negrito.
Essa distinção importa para um rótulo pequeno abaixo de um título. Um par de cores pode passar para o título e ainda falhar para o rótulo. Avalie cada um no tamanho real exibido, inclusive quando uma imagem social é reduzida em um feed.
Não arredonde um valor reprovado para cima para fazê-lo passar. Um resultado de 4.499:1 ainda está abaixo de 4.5:1.
Experimente os quatro pares na ferramenta
- Abra o Estúdio de cores e escolha Contraste.
- Insira o primeiro par em Cor do texto e Cor de fundo.
- Confira Texto normal AA e depois compare com Texto grande AA.
- Repita com os outros pares. Para as amostras 2 e 3, mude apenas o fundo para ver por que ambos os valores importam.
- Coloque o par escolhido no design real e leia-o no tamanho final. Verifique rótulos e links menores, não apenas o título grande da amostra.
No celular, a pré-visualização e as configurações aparecem uma após a outra. As verificações usam os mesmos valores do desktop.
Cores sólidas são apenas o ponto de partida
O verificador compara duas cores opacas e sólidas. Ele não inspeciona cada pixel atrás do texto em uma foto ou gradiente, nem considera uma sobreposição parcialmente transparente. Verifique as áreas mais claras e mais escuras sob o texto, ou dê ao texto um painel sólido cuja cor você possa testar.
Experimente o design nos temas claro e escuro, se você os oferecer. Passar em um cartão branco não diz nada sobre o mesmo texto em um menu escuro. Letras finas também podem ser mais difíceis de ler do que a proporção sugere, então deixe uma margem acima do mínimo em vez de ficar no limite da aprovação.
O que verificamos
Em 5 de outubro de 2026, executamos todos os quatro pares pela mesma função de contraste do Estúdio de cores. O arquivo de resultados registra as proporções exatas e as decisões de AA. O CSS e a ilustração para download usam esses mesmos valores de cor.
Isso verifica o contraste do texto, não a acessibilidade de uma página inteira. Não avalia acesso por teclado, rótulos, ordem de leitura ou se alguém consegue entender seu conteúdo.