DevBentoVerificar Contraste de Texto de Marcador de
Verifique si el texto de marcador de posición de sus campos cumple los requisitos de contraste WCAG AA. El placeholder es un fallo común de accesibilidad.
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 Marcador de Posición
El texto de marcador de posición es una de las fallas más comunes de WCAG en la web. El gris claro predeterminado que los navegadores aplican a los marcadores casi siempre cae por debajo del ratio de contraste 4.5:1 requerido por WCAG AA. Este ejemplo prueba un gris de marcador típico (#9ca3af) sobre un fondo blanco.
Por Qué el Contraste del Marcador Falla Más de lo que Piensas
La mayoría de los frameworks CSS envían colores de marcador 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 marcador predeterminado de Material UI falla en modo oscuro.
El problema se amplifica porque el texto de marcador de posición 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 Marcador
| 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 marcador 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 marcador de posición 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 Marcador
El contraste es una parte de la accesibilidad del marcador. WCAG también requiere que el texto de marcador de posición 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 marcador 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.