DevBentoVerificar Contraste de Texto de Posicionador WCAG
Verifica si el texto de posicionador de tus campos de entrada cumple con los requisitos de contraste WCAG. El placeholder gris claro es un fallo común.
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
Verificar Contraste de Texto de Posicionador
El texto de posicionador es una de las fallas más comunes de WCAG en la web. El gris claro predeterminado que los navegadores aplican a los posicionadores casi siempre cae por debajo del ratio de contraste 4.5:1 requerido por WCAG AA. Este ejemplo prueba un gris de posicionador típico (#9ca3af) sobre un fondo blanco.
Por Qué el Contraste del Posicionador Falla Más de lo que Piensas
La mayoría de los frameworks CSS envían colores de posicionador que fallan WCAG. El placeholder-gray-400 predeterminado de Tailwind (#9ca3af) solo da 3.14:1 de contraste sobre blanco. El .form-control::placeholder de Bootstrap usa rgba(0,0,0,.4) que se traduce en aproximadamente #666666, pasando apenas con 5.74:1. El posicionador predeterminado de Material UI falla en modo oscuro.
El problema se amplifica porque el texto de posicionador es típicamente más pequeño que el texto del cuerpo (14-16px), lo que significa que cae bajo el requisito estricto de 4.5:1 en lugar del umbral de 3:1 para texto grande.
Ejemplos de Contraste de Posicionador
| Color | Sobre blanco (#ffffff) | Ratio | WCAG AA |
|---|---|---|---|
| #cccccc | Gris claro | 1.61:1 | Falla |
| #9ca3af | Tailwind gray-400 | 3.14:1 | Falla |
| #767676 | Gris mínimo que pasa | 4.54:1 | Pasa |
| #6b7280 | Tailwind gray-500 | 5.32:1 | Pasa |
| #525252 | Tailwind gray-600 | 7.46:1 | Pasa |
| #404040 | Gris oscuro | 9.67:1 | Pasa |
La Solución es Una Línea de CSS
La mayoría de los problemas de contraste de posicionador se reducen a una propiedad CSS. En lugar de depender del predeterminado del navegador o del framework, sobrescríbalo explícitamente:
/* Falla WCAG AA */
input::placeholder {
color: #9ca3af;
}
/* Cumple WCAG AA */
input::placeholder {
color: #6b7280;
}En Tailwind, use placeholder-gray-500 en lugar de placeholder-gray-400:
<!-- Falla -->
<input class="placeholder-gray-400" />
<!-- Cumple -->
<input class="placeholder-gray-500" />Cómo Usar
- Ingrese el color de texto de su posicionador en el campo de primer plano
- Ingrese el color de fondo del campo de entrada en el campo de fondo
- Verifique si el ratio cumple con 4.5:1 para WCAG AA
- Si falla, use las sugerencias para encontrar un tono más oscuro que pase
- Copie el CSS actualizado para sus estilos de entrada
Más Allá del Color: Accesibilidad del Posicionador
El contraste es una parte de la accesibilidad del posicionador. WCAG también requiere que el texto de posicionador no sea la única forma de etiquetar una entrada (SC 1.3.1), y que la entrada tenga un nombre accesible (SC 4.1.2). Siempre combine el texto de posicionador con una etiqueta visible o aria-label. El Validador Regex puede ayudar a probar patrones de entrada, pero la accesibilidad visual de la entrada en sí es una preocupación separada.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.