Por que existem proporções de contraste
Veja como a visão e a matemática por trás de 4.5 para 1 se relacionam.
Por que existem proporções de contraste é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que contraste realmente significa
Quando você lê um texto, seus olhos comparam o quanto as letras são claras ou escuras em relação ao fundo. Essa diferença é o contraste. 👀
Por que precisamos de um número
Um designer diz que uma cor está boa; outro aperta os olhos. Para resolver a questão, a acessibilidade usa uma proporção de contraste, um único número mensurável que qualquer pessoa pode verificar.
A escala da proporção
A proporção vai de 1:1 a 21:1. Preto sobre branco é o máximo, 21:1, enquanto a mesma cor sobre ela mesma é 1:1 e totalmente invisível.
Luminância, não apenas cor
O cálculo se baseia na luminância, o brilho percebido de uma cor. Dois tons muito diferentes ainda podem se confundir se o brilho deles for muito parecido.
Os olhos não são todos iguais
As regras de contraste existem porque a visão varia. Usuários com baixa visão, olhos mais velhos e leitores cansados precisam de uma diferença maior do que um designer jovem diante de uma tela brilhante.
O mundo real dificulta as coisas
O reflexo da luz do sol, monitores baratos e celulares com brilho reduzido diminuem o contraste. Uma proporção que resiste a essas condições mantém o texto legível em qualquer lugar.
De onde vem 4,5 para 1
A WCAG escolheu 4,5:1 para textos normais como um limite mínimo respaldado por pesquisas. Isso considera aproximadamente uma baixa visão moderada sem exigir preto e branco puros.
Texto maior, exigência menor
Textos grandes são mais fáceis de ler, por isso o limite cai para 3:1. Letras grandes e espessas toleram uma diferença de brilho menor do que um texto pequeno.
Combinação de primeiro plano e fundo
Uma proporção sempre diz respeito a duas cores juntas. Um cinza nunca é legível ou ilegível sozinho, apenas em relação à superfície sobre a qual aparece.
Não se trata apenas de texto
A mesma ideia se aplica aos componentes da interface. Bordas de botões, ícones e contornos de formulários também precisam de contraste suficiente para que os usuários os encontrem.
Uma proporção em CSS real
Essas duas cores formam uma proporção de aproximadamente 4,6:1, superando por pouco o limite para textos normais e proporcionando uma leitura confortável.
p {
color: #595959;
background: #ffffff;
}Verificação rápida
Vamos testar por que essa proporção existe.
Recapitulação: por que as proporções existem
Você aprendeu que uma proporção de contraste transforma a legibilidade em um único número confiável, baseado na luminância, para que o texto funcione para todos. A seguir: atingir os limites AA. ✅
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Por que existem proporções de contraste” é grátis?
Sim — o texto completo de “Por que existem proporções de contraste” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Por que existem proporções de contraste”?
Veja como a visão e a matemática por trás de 4.5 para 1 se relacionam. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Por que existem proporções de contraste”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por que existem proporções de contraste
- Alcançando AA: limites para texto e texto grande
- Nunca dependa apenas da cor
- Verifique o contraste com ferramentas gratuitas