Contraste WCAG

El contraste WCAG es la medida de legibilidad entre un color de texto y su fondo, definida por las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C. Cumplirlo no es solo una buena práctica: en muchos países es un requisito legal para sitios web del sector público y de empresas con cierto tamaño.

Los niveles de conformidad

WCAG 2.1 define tres niveles (A, AA y AAA), de los que AA es el objetivo estándar para la mayoría de proyectos web:

Tipo de contenido	Nivel AA	Nivel AAA
Texto normal (< 18 pt, < 14 pt bold)	4,5:1	7:1
Texto grande (≥ 18 pt, o ≥ 14 pt bold)	3:1	4,5:1
Componentes de UI e iconos	3:1	—
Texto decorativo o en logos	Sin requisito	Sin requisito

En tipografía web: 18 pt equivale a 24 px y 14 pt en negrita equivale a 18,67 px en negrita.

Cómo se calcula el ratio

El cálculo sigue dos pasos:

Paso 1 — Luminancia relativa de cada color:

Convierte cada canal RGB de 0-255 a un rango 0-1.
Linealiza (elimina la corrección gamma): si el valor es ≤ 0,04045 → divide entre 12,92; si es > 0,04045 → ((valor + 0,055) / 1,055)^2,4.
Calcula L = 0,2126 × R_lineal + 0,7152 × G_lineal + 0,0722 × B_lineal.

Paso 2 — Ratio de contraste:

Ratio = (L_claro + 0,05) / (L_oscuro + 0,05)

Donde L_claro es la luminancia del color más brillante.

Ejemplos de ratio

Par de colores	Ratio	¿Cumple AA texto normal?
Negro (#000) sobre blanco (#FFF)	21:1	✓
Gris oscuro (#595959) sobre blanco	7:1	✓
Azul corporativo (#2563EB) sobre blanco	4,6:1	✓
Gris claro (#767676) sobre blanco	4,5:1	✓ (justo)
Gris (#999999) sobre blanco	2,9:1	✗
Amarillo (#FFFF00) sobre blanco	1,07:1	✗

El amarillo puro sobre blanco es el caso más extremo de incumplimiento: aunque visualmente parece un contraste «de color», la luminancia de ambos es altísima y el ratio apenas supera 1:1.

Errores habituales de contraste

Grises claros para texto secundario: #999999 sobre blanco solo alcanza 2,9:1. El gris más oscuro que cumple AA en texto normal es #767676.
Texto de color sobre fondos de color: un botón azul con texto blanco suele cumplir, pero un botón amarillo con texto blanco casi nunca lo hace.
Placeholders de formulario: muchos diseños usan grises muy claros para el placeholder, cayendo por debajo de 4,5:1.
Texto sobre imágenes o gradientes: el fondo varía, así que el ratio puede ser correcto en un extremo e insuficiente en otro. Añade una capa semitransparente oscura o una sombra de texto.

Herramientas para verificar el contraste

No es necesario calcular el ratio a mano. Existen calculadoras específicas que automatizan todo el proceso dado el color HEX, RGB o HSL de texto y fondo. También puedes comprobarlo directamente desde el panel de estilos de las DevTools de Chrome o Firefox, que muestran el ratio de contraste al inspeccionar cualquier elemento de texto.

Contraste y diseño de color

El contraste WCAG no debe tratarse como un paso final de revisión, sino como una restricción de diseño desde el principio. Al definir tu paleta de colores, elige los tonos de acento comprobando simultáneamente que alcanzan el ratio requerido sobre tus fondos habituales. En la práctica, esto significa preferir tonos de color de luminancia media-baja para texto y elementos activos sobre fondos claros, y luminancia media-alta para texto sobre fondos oscuros.

Esta información es orientativa. Los requisitos exactos de accesibilidad pueden variar según la legislación de cada país y el contexto del proyecto.

Preguntas frecuentes

¿Cuál es el ratio de contraste mínimo para cumplir WCAG AA?

Para texto normal (menos de 18 pt o 14 pt en negrita) se exige un ratio mínimo de 4,5:1. Para texto grande (18 pt o más, o 14 pt en negrita) basta con 3:1. El nivel AAA sube estos requisitos a 7:1 y 4,5:1 respectivamente.

¿Cómo se calcula el ratio de contraste WCAG?

Se divide la luminancia relativa del color más claro más 0,05 entre la luminancia relativa del más oscuro más 0,05. La luminancia relativa se calcula a partir de los valores RGB linealizados (sin la corrección gamma). El ratio más alto posible es 21:1 (negro sobre blanco) y el mínimo es 1:1 (mismo color).

¿El contraste WCAG se aplica también a iconos y botones?

Sí. Los componentes de interfaz no textuales (iconos, bordes de campos de formulario, indicadores de foco) deben cumplir también el ratio 3:1 frente al fondo adyacente para cumplir WCAG 2.1 nivel AA. Los botones de solo color sin texto necesitan que el color del botón contraste 3:1 con el fondo de la página.