Contraste e acessibilidade visual
Um texto cinza-claro sobre branco pode parecer elegante pra você e ser ilegível pra uma parte real de quem usa a tela.
Esta lição olha pra acessibilidade do lado da percepção: o que faz um contraste ser suficiente ou insuficiente, e por que informação que depende só de cor exclui uma parte real de quem usa sua tela. A implementação em código — label associado, foco visível, HTML semântico — fica pra frente na trilha de Frontend.
O que o número de contraste realmente mede
O WCAG define uma razão de contraste mínima de 4.5:1 entre texto e fundo para texto normal (3:1 pra texto grande). Esse número não é sobre "usar preto e branco" — é sobre a diferença de luminância entre as duas cores ser grande o suficiente pra a maioria das pessoas distinguir o texto sem esforço extra, mesmo com telas de qualidade variável, luz ambiente forte, ou visão reduzida. Texto claro sobre fundo escuro pode passar tão bem quanto texto escuro sobre fundo claro — o que importa é a diferença entre os dois, não qual lado é mais escuro.
/* #cbd5e1 sobre #ffffff: contraste baixo demais para texto de corpo */
.texto-fraco { color: #cbd5e1; background: #ffffff; }
/* #475569 sobre #ffffff: passa no contraste mínimo de 4.5:1 */
.texto-legivel { color: #475569; background: #ffffff; }Cor sozinha nunca deveria carregar a informação inteira
Um erro comum: sinalizar erro de um campo só mudando a cor da borda pra vermelho, sem mais nada. Isso falha pra quem tem daltonismo — o mais comum é a dificuldade de distinguir vermelho de verde — porque a diferença de cor que parece óbvia pra você pode não ser perceptível pra essa pessoa. A cor pode (e deve) reforçar a mensagem, mas nunca deveria ser o único canal.
Exercício
Um formulário de cadastro sinaliza campo obrigatório não preenchido apenas deixando a borda do campo vermelha, sem nenhum outro elemento. Aponte por que isso é insuficiente e o que adicionar.