🎨
← Volver a guías

Contraste de color accesible: pautas WCAG explicadas para diseñadores

· Etiquetas: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Contraste de color accesible: pautas WCAG explicadas

El contraste de color es uno de los aspectos más importantes de la accesibilidad web. Afecta directamente a si los usuarios pueden leer tu contenido, navegar por tu interfaz y completar sus tareas. Sin embargo, los fallos de contraste siguen estando entre los problemas de accesibilidad más comunes en la web — a menudo porque los diseñadores eligen colores que se ven bien en sus propias pantallas sin verificar los índices.

Esta guía explica todo lo que necesitas saber sobre los requisitos de contraste de color WCAG, cómo cumplirlos y cómo diseñar interfaces accesibles sin sacrificar la calidad visual.

¿Qué es el índice de contraste de color?

El contraste de color es una medida de la diferencia en la luminancia percibida entre dos colores — normalmente el primer plano (texto) y el fondo. El contraste se expresa como un índice que va de 1:1 (colores idénticos, texto invisible) a 21:1 (texto negro sobre fondo blanco, el máximo posible).

El índice de contraste se calcula usando la luminancia relativa, que tiene en cuenta cómo los ojos humanos perciben diferentes longitudes de onda de la luz. La fórmula es:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Donde L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. El ojo humano es más sensible a la luz verde que a la roja o azul, por lo que el cálculo de la luminancia pondera los canales de manera diferente.

No necesitas calcular esto manualmente. Cada herramienta de verificación de contraste, incluido nuestro conversor de colores, lo hace al instante.

Requisitos de contraste WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen tres niveles de conformidad: A, AA y AAA. Los requisitos de contraste de color se aplican en los niveles AA y AAA.

Nivel AA de WCAG (mínimo recomendado)

AA es el estándar mínimo para la mayoría de los sitios web y es obligatorio por ley en muchas jurisdicciones (incluida la Ley Europea de Accesibilidad y las regulaciones de accesibilidad en EE. UU., Canadá y Australia).

| Categoría de texto | Índice mínimo | Ejemplo de gris conforme sobre blanco | |---------------|--------------|-------------------------------------| | Texto normal (menos de 18px / 14px en negrita) | 4.5:1 | #767676 sobre blanco | | Texto grande (18px+ en negrita o 24px+ normal) | 3:1 | #9A9A9A sobre blanco | | Componentes de UI (bordes, iconos, campos de formulario) | 3:1 | Bordes de componentes, indicadores de enfoque | | Gráficos no decorativos | 3:1 | Gráficos, infografías, iconos |

Nivel AAA de WCAG (mejorado)

AAA es un estándar más alto que proporciona una mejor legibilidad, especialmente para usuarios con baja visión o problemas de sensibilidad al contraste.

| Categoría de texto | Índice mínimo | Ejemplo de gris conforme sobre blanco | |---------------|--------------|-------------------------------------| | Texto normal | 7:1 | #595959 sobre blanco | | Texto grande | 4.5:1 | #777777 sobre blanco |

AAA no es obligatorio para el cumplimiento de la mayoría de las regulaciones, pero se recomienda para sitios que atienden a adultos mayores o usuarios con discapacidades visuales.

Qué cubren estos requisitos

Los requisitos de contraste WCAG se aplican a:

  • Texto — Todo el texto del cuerpo, encabezados, etiquetas, pies de foto y texto de enlaces
  • Texto en imágenes — Texto que es parte de una imagen (excepto el texto decorativo)
  • Componentes de UI — Botones, campos de formulario, controles deslizantes, interruptores y sus bordes
  • Iconos — Iconos esenciales que transmiten información (no decorativos)
  • Indicadores de enfoque — Los contornos de enfoque del teclado deben tener un contraste de 3:1 contra el fondo adyacente

Qué NO cubren estos requisitos

  • Logotipos — Texto que es parte de un logotipo de marca o nombre de empresa
  • Elementos decorativos — Imágenes puramente decorativas sin propósito funcional
  • UI inactiva — Botones deshabilitados o controles de formulario (aunque deben seguir siendo perceptibles)
  • Texto sensorial — Texto que es parte de una imagen de fondo donde el texto no es esencial

Fallos de contraste comunes y cómo corregirlos

1. Texto gris claro

El texto gris claro sobre fondos blancos es, con diferencia, el fallo de contraste más común. Un tono como #CCCCCC sobre blanco tiene un índice de contraste de solo 1.6:1 — muy por debajo del mínimo de 4.5:1.

Corrección: oscurece tu texto gris. Para el texto del cuerpo sobre blanco, apunta al menos a #595959 (conforme con AAA). Incluso #767676 (mínimo AA para texto de 14px) es notablemente más oscuro que la mayoría de las opciones de gris "sutil".

2. Colores de marca usados para el texto del cuerpo

Los colores de marca a menudo son demasiado claros cuando se aplican como texto. Un azul medio como #3366CC sobre blanco tiene un índice de aproximadamente 3.5:1 — por debajo del estándar de 4.5:1.

Corrección: reserva los colores de marca para encabezados y acentos. Usa casi negro (#1A1A1A a #333333) para el texto del cuerpo. Verifica que cualquier texto coloreado cumpla el índice.

3. Indicadores de enlace solo por color

Los enlaces que se diferencian del texto del cuerpo solo por el color fallan el Criterio de éxito 1.4.1 de WCAG (Uso del color). Los usuarios con daltonismo pueden no percibir la diferencia.

Corrección: proporciona siempre un indicador no cromático para los enlaces. Enfoques comunes:

  • Subrayar los enlaces (la solución más robusta)
  • Añadir un icono (flecha o símbolo de enlace externo)
  • Usar peso en negrita para los enlaces en línea
  • Proporcionar un resaltado de fondo

4. Texto sobre imágenes de fondo

El texto colocado sobre fotos o degradados rara vez tiene contraste suficiente en toda la imagen.

Corrección:

  • Añade una superposición semitransparente entre la imagen y el texto
  • Usa text-shadow para un efecto sutil de contorno
  • Coloca el texto en un recuadro de color sólido superpuesto
  • Asegura que cualquier porción de la imagen que pueda aparecer detrás del texto cumpla el índice mínimo

5. Texto de marcador de posición con bajo contraste

Los marcadores de posición de formularios como #BDBDBD sobre blanco (1.9:1) son comunes pero fallan los requisitos de contraste.

Corrección: oscurece los marcadores de posición al menos a #757575 (4.6:1). Mejor aún, usa etiquetas en lugar de marcadores de posición: las etiquetas siempre son visibles y nunca desaparecen cuando los usuarios empiezan a escribir.

Cómo probar el contraste de color

Herramientas automatizadas

  • DevTools del navegador — Chrome y Firefox tienen verificación de contraste integrada. Inspecciona un elemento y busca el índice de contraste en el panel "Styles" o "Accessibility".
  • Verificadores de contraste en línea — Introduce dos colores y obtén al instante el estado de aprobado/rechazado para AA y AAA.
  • Complementos de herramientas de diseño — Stark, A11y y Contrast están disponibles para Figma, Sketch y Adobe XD. Estos verifican el contraste directamente en tus archivos de diseño.
  • Lighthouse — La auditoría Lighthouse de Google reporta automáticamente los fallos de contraste.

Pruebas manuales

Las herramientas automatizadas solo pueden verificar el contraste del texto. Para una revisión completa de accesibilidad:

  1. Apaga tu monitor — ¿Puedes distinguir todos los elementos de la interfaz?
  2. Usa un filtro de escala de grises — ¿La información se transmite correctamente sin color?
  3. Prueba con un simulador de daltonismo — Herramientas como Colorblindly (extensión de Chrome) muestran cómo se ve tu sitio para usuarios con varios tipos de deficiencia en la visión del color.
  4. Prueba bajo luz solar directa — La alta luz ambiental reduce el contraste percibido.

Diseñar para el daltonismo

Aproximadamente 1 de cada 12 hombres (8 %) y 1 de cada 200 mujeres (0.5 %) tienen alguna forma de deficiencia en la visión del color. Los tipos más comunes son:

  • Deuteranopía (daltonismo al verde, 6 % de los varones) — Dificultad para distinguir el rojo del verde
  • Protanopía (daltonismo al rojo, 2 % de los varones) — El rojo aparece más oscuro, confusión con el verde
  • Tritanopía (daltonismo al azul, raro) — Dificultad para distinguir el azul del amarillo

Estrategias de diseño

  1. Nunca te apoyes solo en el color — Cualquier información transmitida a través del color (estados de error, indicadores de estado, categorías de gráficos) también debe transmitirse a través de texto, iconos, patrones o posición.

  2. Evita las combinaciones problemáticas — Rojo/verde, azul/púrpura, verde/marrón y verde/azul son los pares más comúnmente confundidos.

  3. Usa patrones y texturas — En gráficos y diagramas, usa líneas punteadas, rellenos tramados y diferentes formas además del color.

  4. Añade etiquetas directamente — En las visualizaciones de datos, etiqueta los puntos de datos directamente en lugar de depender de una leyenda codificada por colores.

  5. Prueba con simuladores — Cada diseño debe probarse con simuladores de deuteranopía y protanopía antes de publicarse.

Cómo construir un sistema de color accesible

Paso 1: elige colores base accesibles

Empieza con colores que proporcionen naturalmente un buen contraste. Los azules profundos, los verdes oscuros y los rojos intensos pueden ser colores base accesibles cuando se combinan adecuadamente.

Paso 2: genera una escala conforme

Crea una escala de luminosidad donde cada paso mantenga un contraste suficiente tanto con los vecinos más claros como con los más oscuros. OKLCH es ideal para esto porque su canal de luminosidad es perceptualmente uniforme:

--text-primary: oklch(10% 0.01 0);    /* Casi negro, ~19:1 sobre blanco */
--text-secondary: oklch(35% 0.02 0);  /* Gris oscuro, ~9:1 sobre blanco */
--text-muted: oklch(45% 0.02 0);      /* Gris medio, ~5.5:1 sobre blanco */
--text-disabled: oklch(60% 0.02 0);   /* Gris claro, ~3:1 sobre blanco */

Paso 3: verifica cada combinación

Cada par de primer plano y fondo en tu sistema de diseño debe verificarse:

  • Texto primario sobre superficie — mínimo de 4.5:1 (7:1 recomendado)
  • Texto secundario sobre superficie — mínimo de 4.5:1
  • Texto atenuado sobre superficie — mínimo de 3:1 (solo para texto no esencial)
  • Elementos interactivos — mínimo de 3:1 para estados
  • Indicadores de enfoque — mínimo de 3:1

Lista de verificación práctica para desarrolladores

  • [ ] Todo el texto del cuerpo cumple o supera el índice de contraste 4.5:1
  • [ ] Todo el texto grande cumple o supera el índice de contraste 3:1
  • [ ] Los enlaces tienen un indicador no cromático (subrayado, icono o cambio de peso)
  • [ ] Los campos de formulario tienen bordes o fondos visibles (no solo texto de marcador de posición)
  • [ ] Los indicadores de enfoque tienen un contraste de 3:1 contra los fondos adyacentes
  • [ ] Los estados de error combinan el color con texto o iconos
  • [ ] Los gráficos y diagramas usan patrones o etiquetas directas además del color
  • [ ] El texto de marcador de posición cumple el mínimo de 4.5:1
  • [ ] Los elementos deshabilitados son visualmente distinguibles pero aún perceptibles
  • [ ] El diseño se ha probado con simuladores de daltonismo

Conclusión

El contraste de color accesible no es opcional — es un requisito fundamental del diseño web inclusivo. Cumplir los estándares AA de WCAG hace que tu contenido sea accesible para usuarios con discapacidades visuales, mejora la legibilidad para todos y a menudo resulta en diseños más limpios e intencionales. Empieza con la verificación del contraste en tu flujo de trabajo, usa el color como complemento — no como sustituto — de otros indicadores visuales, y prueba siempre tus diseños a través de la lente de la accesibilidad.

Usa nuestro conversor de colores en línea gratuito con verificación de contraste integrada para verificar tus combinaciones de colores contra los estándares AA y AAA de WCAG.