Perceptible Distinguible Nivel AA WCAG 2.0, 2.1, 2.2

1.4.3 Contraste (mínimo)

Meta El texto puede ser visto y leído por más personas, incluidas aquellas con visión moderadamente baja.
Qué hacer Proporcionar suficiente contraste entre el texto y su fondo: 4,5:1 para texto normal, 3:1 para texto grande.
Por qué importa Algunas personas no pueden leer textos con contraste débil, especialmente con visión baja o daltonismo.

En esta página:

Criterio · ¿Qué es? · Relaciones de contraste · Excepciones · ¿Por qué importa? · ¿Quién se ve afectado? · Implementación · Ejemplos · Técnicas · Errores · Relacionados

Criterio de éxito oficial

1.4.3 Contraste (mínimo) Nivel AA
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.

Fuente: WCAG 2.2 — Criterio de éxito 1.4.3 (W3C)

¿Qué es?

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.

Relaciones de contraste

Texto grande vs. texto normal

Texto grande

24 px regular (18 pt)

19 px negrita (14 pt)

Mínimo 3:1

Texto normal

Menor de 24 px (o menor de 19 px negrita). Tamaño base recomendado: 16 px.

Mínimo 4,5:1
Puntos vs. píxeles: La relación es 1 pt = 1,333 px. Las relaciones de contraste no se redondean: un valor de 4,499:1 no cumple el umbral de 4,5:1.

Excepciones al criterio

Texto grande

≥ 24 px regular o ≥ 19 px negrita solo requiere ratio 3:1.

Incidental

Texto decorativo, invisible o en componentes inactivos no tiene requisitos.

Logotipos

El texto dentro de logotipos o marcas está exento del requisito.

Controles inactivos

Botones deshabilitados u otros controles no operativos están exentos.

¿Por qué importa?

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.

Discapacidades cognitivas: Algunas personas pueden necesitar combinaciones de colores con menos contraste. WCAG permite ofrecer mecanismos para ajustar los colores, siempre que exista una opción que restaure los valores requeridos.

¿Quién se ve afectado?

Personas con 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.

Personas con daltonismo

Perciben los tonos de forma diferente. Un buen contraste de luminancia asegura la legibilidad independientemente del tipo de daltonismo.

Personas mayores

La percepción del contraste se deteriora con la edad. Una agudeza visual de 20/40 es habitual a los 80 años aproximadamente.

Cómo implementar 1.4.3

Verificar el contraste

Usa herramientas de verificación especializadas:

Especificar siempre primer plano y fondo juntos

Si no configuras un color de fondo específico, los navegadores usarán el color predeterminado del usuario. Establece siempre ambos colores:

CSS — Correcto
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;
}

Texto de marcador de posición (placeholder)

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.

CSS — Placeholder accesible
input::placeholder {
  color: #767676; /* ≥ 4,5:1 sobre fondo blanco */
}

Ejemplos prácticos

Situación A — Texto normal con contraste suficiente

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.

Situación B — Texto grande con contraste mínimo

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.

Excepción — Botón deshabilitado

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.

Técnicas recomendadas

Técnicas suficientes para el criterio 1.4.3
CódigoTécnicaSituació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

Errores comunes

F24 — Color de primer plano sin fondo (o viceversa)

Especificar colores de primer plano sin especificar el color de fondo correspondiente, o viceversa. El fondo queda indeterminado y el contraste no puede calcularse.

F83 — Imágenes de texto con contraste insuficiente

Incumplir los criterios de contraste para imágenes de texto que se pueden ver en la interfaz de usuario.

Estética minimalista que sacrifica contraste

Usar texto gris claro sobre fondo blanco (ej. #cccccc) en nombre del diseño minimalista, sin verificar los ratios.

Texto sobre imagen de fondo o degradado sin verificar

No comprobar el contraste del texto sobre imágenes de fondo, gradientes o capas transparentes donde el color exacto del fondo varía.

Criterios relacionados