Verificar Contraste de Texto de Espaço Reservado WCAG

Verificar Contraste de Texto de Espaço Reservado

O texto de espaço reservado é uma das falhas mais comuns do WCAG na web. O cinza claro padrão que os navegadores aplicam aos espaços reservados quase sempre cai abaixo da proporção de contraste 4.5:1 exigida pelo WCAG AA. Este exemplo testa um cinza de espaço reservado típico (#9ca3af) sobre um fundo branco.

Por Que o Contraste do Espaço Reservado Falha Mais do Que Você Pensa

A maioria dos frameworks CSS fornece cores de espaço reservado que falham WCAG. O placeholder-gray-400 padrão do Tailwind (#9ca3af) dá apenas 3.14:1 de contraste sobre branco. O .form-control::placeholder do Bootstrap usa rgba(0,0,0,.4) que se traduz em aproximadamente #666666, passando apenas com 5.74:1. O espaço reservado padrão do Material UI falha no modo escuro.

O problema é amplificado porque o texto de espaço reservado é tipicamente menor que o texto do corpo (14-16px), o que significa que cai sob o requisito estrito de 4.5:1 em vez do limiar de 3:1 para texto grande.

Exemplos de Contraste de Espaço Reservado

A Solução é Uma Linha de CSS

A maioria dos problemas de contraste de espaço reservado se resume a uma propriedade CSS. Em vez de depender do padrão do navegador ou do framework, sobrescreva explicitamente:

/* Falha WCAG AA */
input::placeholder {
  color: #9ca3af;
}

/* Atende WCAG AA */
input::placeholder {
  color: #6b7280;
}

No Tailwind, use placeholder-gray-500 em vez de placeholder-gray-400:

<!-- Falha -->
<input class="placeholder-gray-400" />

<!-- Atende -->
<input class="placeholder-gray-500" />

Como Usar

1. Insira a cor de texto do seu espaço reservado no campo de primeiro plano
2. Insira a cor de fundo do campo de entrada no campo de fundo
3. Verifique se a proporção atende 4.5:1 para WCAG AA
4. Se falhar, use as sugestões para encontrar um tom mais escuro que passe
5. Copie o CSS atualizado para seus estilos de entrada

Além da Cor: Acessibilidade do Espaço Reservado

O contraste é uma parte da acessibilidade do espaço reservado. O WCAG também exige que o texto de espaço reservado não seja a única forma de rotular uma entrada (SC 1.3.1), e que a entrada tenha um nome acessível (SC 4.1.2). Sempre combine o texto de espaço reservado com um rótulo visível ou aria-label. O Validador Regex pode ajudar a testar padrões de entrada, mas a acessibilidade visual da entrada em si é uma preocupação separada.