La presentación visual del texto y de las imágenes de texto tiene una relación de contraste de al menos 4,5:1, excepto: texto de gran tamaño (3:1), texto incidental y logotipos.
El contraste es la diferencia de color y brillo entre el texto y el fondo. Letras negras sobre fondo blanco tienen un alto contraste (21:1), mientras que letras gris claro sobre fondo blanco tienen un contraste muy bajo. El texto con bajo contraste es difícil de leer porque se confunde con el fondo.
La accesibilidad web mejora la experiencia de todos los usuarios.
✗ 2,1:1 — InsuficienteLa accesibilidad web mejora la experiencia de todos los usuarios.
✓ 5,65:1 — Cumple AATexto grande
24 px regular (18 pt)
19 px negrita (14 pt)
Mínimo 3:1Texto normal
Menor de 24 px (o menor de 19 px negrita). Tamaño base recomendado: 16 px.
Mínimo 4,5:1≥ 24 px regular o ≥ 19 px negrita solo requiere ratio 3:1.
Texto decorativo, invisible o en componentes inactivos no tiene requisitos.
El texto dentro de logotipos o marcas está exento del requisito.
Botones deshabilitados u otros controles no operativos están exentos.
Si no hay suficiente contraste entre el texto y el fondo, puede resultar difícil distinguir las palabras y las letras. El contraste se calcula basándose en la luminancia relativa, no en el tono de color, lo que garantiza la legibilidad tanto para personas con daltonismo como para quienes tienen baja visión.
Tienen una sensibilidad al contraste reducida. Sin contraste suficiente, las letras se difuminan con el fondo y el texto se vuelve ilegible.
Perciben los tonos de forma diferente. Un buen contraste de luminancia asegura la legibilidad independientemente del tipo de daltonismo.
La percepción del contraste se deteriora con la edad. Una agudeza visual de 20/40 es habitual a los 80 años aproximadamente.
Usa herramientas de verificación especializadas:
Si no configuras un color de fondo específico, los navegadores usarán el color predeterminado del usuario. Establece siempre ambos colores:
body {
color: #333333;
background-color: #ffffff;
/* Ratio: 12,63:1 — supera AA y AAA */
}
/* Gris más claro aceptable para texto secundario */
.text-muted {
color: #767676; /* 4,54:1 sobre blanco */
background: #fff;
}El criterio se aplica a todo el texto visible, incluyendo texto de placeholder, tooltips y texto mostrado al pasar el ratón o al recibir foco.
input::placeholder {
color: #767676; /* ≥ 4,5:1 sobre fondo blanco */
}El cuerpo de texto usa #333333 sobre #FFFFFF. La relación de contraste es 12,63:1, que supera ampliamente el mínimo de 4,5:1. Si se necesita un texto más claro, #767676 sobre #FFFFFF da exactamente 4,54:1.
Los títulos usan 28 px con #555555 sobre #FFFFFF. La relación es 7,46:1, que cumple sobradamente el mínimo de 3:1 para texto grande.
Un botón de envío está deshabilitado hasta que se completan los campos requeridos. El texto del botón tiene contraste bajo (2:1) con su fondo gris. Al ser un componente inactivo, no se exige contraste mínimo. Una vez activado, debe cumplir los requisitos.
| Código | Técnica | Situación |
|---|---|---|
| G18 | Asegurar una relación de contraste de al menos 4,5:1 entre texto y fondo | Texto normal |
| G145 | Asegurar una relación de contraste de al menos 3:1 entre texto grande y fondo | Texto grande |
| G148 | No especificar colores, dejando los valores predeterminados del navegador | Ambas |
| G174 | Proporcionar un control que permita a los usuarios cambiar a una presentación con mayor contraste | Ambas |
Especificar colores de primer plano sin especificar el color de fondo correspondiente, o viceversa. El fondo queda indeterminado y el contraste no puede calcularse.
Incumplir los criterios de contraste para imágenes de texto que se pueden ver en la interfaz de usuario.
Usar texto gris claro sobre fondo blanco (ej. #cccccc) en nombre del diseño minimalista, sin verificar los ratios.
No comprobar el contraste del texto sobre imágenes de fondo, gradientes o capas transparentes donde el color exacto del fondo varía.