Contraste de Color para WCAG 2.2 AA: Una Guía Práctica para Creadores de Cursos

El contraste de color es la falla de accesibilidad más común en la web — año tras año, encuestas automatizadas de las millones de páginas de inicio más importantes encuentran texto de bajo contraste en más de cuatro de cada cinco de ellas — y también es uno de los problemas más fáciles de solucionar. Para los creadores de cursos, lograr un buen contraste significa que los estudiantes con baja visión, las personas con deficiencias en la percepción del color (aproximadamente 1 de cada 12 hombres), y cualquiera que lea en una pantalla de teléfono brillante bajo la luz del sol pueden realmente leer tu contenido. Esta guía explica los requisitos de contraste de WCAG 2.2 AA en un lenguaje sencillo — las proporciones 4.5:1 y 3:1, qué cuenta como texto "grande", y las reglas frecuentemente olvidadas para botones, íconos y gráficos — y luego te muestra exactamente cómo medir el contraste y corregir las fallas sin desechar tu marca.

Lo que realmente mide la proporción de contraste

Una proporción de contraste es un número que describe la diferencia en luminancia relativa (brillo percibido) entre dos colores — típicamente el texto y el fondo detrás de él. Varía de 1:1 (idéntico, invisible) a 21:1 (negro puro sobre blanco puro). No se trata de matiz: dos colores pueden verse muy diferentes y aún así tener un contraste deficiente si son igualmente brillantes (piensa en texto azul medio sobre un fondo verde medio).

Por eso no puedes juzgarlo a simple vista de manera confiable. Un color que te parece bien en un monitor calibrado en una oficina oscura puede ser ilegible para un estudiante con baja visión en un teléfono barato al aire libre. WCAG convierte el juicio en un umbral medible para que sea comprobable y objetivo.

Las proporciones de contraste que realmente necesitas

Para el Nivel AA, estos son los umbrales a alcanzar:

• 4.5:1 — mínimo para texto normal (WCAG 1.4.3).
• 3:1 — mínimo para texto grande, definido como 18.66px en negrita o 24px regular y superior (aproximadamente 14pt en negrita / 18pt regular).
• 3:1 — mínimo para contraste no textual (WCAG 1.4.11): las partes significativas de los componentes de la interfaz de usuario, como bordes de entrada, estados de alternancia y las formas esenciales de los íconos, además de gráficos necesarios para entender el contenido.

El Nivel AAA eleva el texto normal a 7:1, lo cual es un objetivo a alcanzar en lecturas de formato largo y es cómodamente alcanzable con texto casi negro sobre blanco. Pero AA es la línea base legal, y cumplirla de manera consistente en todo un curso es el objetivo realista. Ten en cuenta que los logotipos y los elementos puramente decorativos están exentos — las reglas se dirigen al contenido que los estudiantes necesitan leer o operar.

Los errores de contraste que más cometen los creadores de cursos

Casi todas las fallas se agrupan en un puñado de patrones, y una vez que los conoces, los verás en todas partes:

• Texto gris claro sobre blanco — elegante en un diseño, ilegible para muchos. Los subtítulos en gris sobre gris y los metadatos tenues son infractores frecuentes.
• Botones de color de marca con texto blanco, donde el color de la marca es demasiado claro para alcanzar 4.5:1 — extremadamente común con paletas de marca pastel o neón.
• Texto sobre imágenes o video sin malla o superposición, por lo que el contraste cambia con cada fotograma y falla en algún lugar.
• Texto de marcador de posición utilizado como etiquetas — generalmente demasiado tenue, y desaparece una vez que se llena el campo.
• Significado solo por color — "haz clic en el botón verde" o rojo/verde para aprobar/reprobar sin ícono o texto, lo que también infringe WCAG 1.4.1 (uso del color).
• Gráficos de bajo contraste donde los segmentos adyacentes son indistinguibles, especialmente para los espectadores con daltonismo — añade etiquetas o patrones.

Cómo medir el contraste

Nunca tienes que adivinar. Usa cualquiera de estas herramientas gratuitas:

• DevTools del Navegador — Chrome y Firefox muestran la proporción de contraste directamente en el selector de color y el inspector de accesibilidad, incluyendo una línea de aprobado/reprobado.
• WebAIM Contrast Checker — pega dos valores hexadecimales y obtén la proporción exacta más aprobado/reprobado para AA y AAA, texto normal y grande.
• axe-core / Lighthouse — escaneos automatizados marcan cada falla de contraste en toda una página a la vez, lo cual es ideal para auditar un curso existente.
• Simuladores de daltonismo — previsualiza tu paleta bajo deuteranopía, protanopía y tritanopía para detectar gráficos y colores de estado que colapsan.

Haz del contraste un paso rutinario en tu auditoría de curso en lugar de una sorpresa en el último día — es mucho más barato corregir un token que recolorear 40 lecciones.

Cómo corregir el contraste sin arruinar tu marca

El contraste y un buen diseño no están en conflicto; solo necesitas un sistema en lugar de ajustes puntuales:

• Oscurece el texto, no toda la paleta. Un tono ligeramente más oscuro de tu color de marca, utilizado específicamente para el texto, a menudo pasa mientras se mantiene reconociblemente en la marca.
• Reserva los tonos claros de la marca para fondos y acentos, nunca para texto normal o íconos críticos.
• Agrega una malla o superposición detrás del texto en imágenes para que la proporción sea estable independientemente de la foto.
• Combina color con forma, ícono o texto para que el significado nunca dependa solo del color.
• Define tokens de color accesibles una vez — un sistema de diseño verificado por contraste (color de texto, color de botón, color de enlace, color de enfoque) significa que cada nueva lección comienza cumpliendo y ningún creador tiene que volver a probar.
• Ten en cuenta una variante de modo oscuro y alto contraste, ya que los mismos tokens deben pasar en ambos fondos.

Un cambio de mentalidad hace que todo esto sea más fácil: deja de pensar en el contraste como una decisión por elemento y comienza a verlo como una propiedad de tu sistema de diseño. Una marca tiene docenas de combinaciones de colores posibles, pero un curso solo necesita un puñado — texto normal, encabezados, enlaces, botones, bordes, enfoque y un par de acentos. Define esos una vez, prueba que cada uno pasa, y la pregunta "¿pasa esto el contraste?" se responde antes de que se escriba cualquier lección. Los creadores que usan tus plantillas nunca tienen que pensar en proporciones en absoluto, que es exactamente como debería ser: accesibilidad que es invisible para las personas que producen contenido porque está integrada en las herramientas de las que parten.

Contraste en modo oscuro, en video y en gráficos

Tres contextos merecen atención especial porque una paleta que pasa en uno puede fallar en otro. El modo oscuro invierte el problema: ahora necesitas texto claro sobre fondos oscuros para alcanzar 4.5:1, y el blanco puro sobre negro puro puede ser incómodamente duro — un blanco roto ligeramente suavizado es más cómodo y sigue siendo conforme. Si ofreces temas claros y oscuros, cada token debe pasar en ambos.

Texto sobre video o imágenes es el caso más difícil porque el fondo cambia constantemente. No puedes garantizar el contraste contra un fotograma desconocido, así que agrega una malla semitranslúcida detrás del texto, o coloca el texto en un panel sólido. El texto de los subtítulos específicamente debe estar sobre un fondo sólido o semitranslúcido para que sea legible sobre cualquier escena.

Gráficos y visualización de datos fallan de una manera diferente: los segmentos adyacentes que son distintos en color pero similares en brillo se vuelven indistinguibles para los espectadores con daltonismo, y una leyenda que depende puramente del color infringe 1.4.1. Corrígelo añadiendo etiquetas directas, patrones o texturas, asegurando 3:1 entre áreas significativas adyacentes, y probando el gráfico a través de un simulador de daltonismo.

Construye un sistema de color accesible en cinco pasos

La solución duradera para el contraste es un pequeño sistema de color probado en lugar de ajustes por página. Aquí hay una secuencia práctica:

1. Elige un color de texto que pase en tu fondo principal. Comienza cerca del negro sobre blanco (o cerca del blanco sobre tu fondo oscuro) y solo aclara/oscurece hasta que estés cómodamente más allá de 4.5:1.
2. Deriva un tono de "texto de marca" accesible. Si tu color de marca es demasiado claro para el texto, define una variante más oscura utilizada específicamente para enlaces y énfasis que aún se lea como tu marca.
3. Define tokens de botón. Elige un fondo de botón lo suficientemente oscuro para que el texto de etiqueta blanco (o oscuro) alcance 4.5:1, y un color de enfoque claramente visible que cumpla 3:1 contra colores adyacentes.
4. Establece un token de UI/borde en 3:1. Los bordes de entrada, alternadores y formas de íconos necesitan contraste no textual (1.4.11), así que no dejes que se desvanezcan en el fondo.
5. Prueba todo el conjunto una vez, luego reutilízalo. Ejecuta cada par de tokens a través de un verificador de contraste, guarda los valores, y construye todas las lecciones a partir de ellos. El nuevo contenido es entonces conforme por construcción.

Apunta a AA en todas partes y AAA (7:1) en texto normal de formato largo donde puedas — cuesta poco con texto casi negro y mejora notablemente la legibilidad para todos.

Un flujo de trabajo eficiente para probar el contraste

Comprobar el contraste color por color no escala a un curso con docenas de lecciones. Un flujo de trabajo más rápido prueba el sistema una vez y luego verifica el contenido:

1. Audita los tokens de diseño, no cada página. Si tus colores de texto, enlace, botón, borde y enfoque pasan contra tu(s) fondo(s), la gran mayoría de tu contenido pasa automáticamente.
2. Ejecuta un escaneo automatizado de página completa con axe-core o Lighthouse en una lección representativa, un cuestionario y el panel de control — estos sacan a la luz fallas de contraste en bloque con los elementos exactos nombrados.
3. Verifica manualmente los tipos de contenido arriesgados: texto sobre imágenes, gráficos, insignias y píldoras de estado, y cualquier color elegido por el creador.
4. Simula el daltonismo en cualquier cosa que use color para transmitir significado.
5. Vuelve a probar solo lo que cambia. Debido a que los tokens son fijos, principalmente necesitas verificar nuevos colores personalizados, no toda la biblioteca nuevamente.

Incorpora esto en tu lista de verificación de publicación para que el contraste se verifique antes de que una lección se publique, no después de que un estudiante se queje. El costo de la prevención es de unos minutos; el costo de la remediación es recolorear todo un curso.

Referencia rápida: proporciones, verificaciones y correcciones

Mantén este resumen a mano cada vez que elijas un color o revises una lección:

• Texto normal: al menos 4.5:1 (AA). Apunta a 7:1 (AAA) en lecturas de formato largo donde puedas.
• Texto grande (24px regular / 18.66px en negrita): al menos 3:1.
• Componentes de UI y formas significativas de íconos/gráficos: al menos 3:1 (contraste no textual).
• Logos y elementos decorativos: exentos.
• Nunca confíes solo en el color: combínalo con texto, un ícono o un patrón.
• Mide, no adivines: WebAIM Contrast Checker, DevTools del navegador, o axe-core/Lighthouse para escaneos de página completa.
• Corrige a nivel de token: oscurece los tonos de texto, reserva los tonos claros para fondos, añade mallas detrás del texto en imágenes, y prueba el sistema una vez.

¿Cuándo vale la pena el esfuerzo adicional de AAA? En lecturas densas y largas — documentación, transcripciones, lecciones extensas — donde la mayor proporción de 7:1 reduce mediblemente la fatiga ocular para todos y es fácil de alcanzar con texto casi negro sobre blanco. Para botones, etiquetas y texto corto de UI, un sólido AA es el objetivo pragmático. De cualquier manera, decidir una vez a nivel del sistema de diseño significa que cada creador hereda un color accesible sin pensar en ello.

Cómo Eduspera maneja el contraste por ti

Eduspera ofrece temas verificados por contraste, por lo que el texto, botones y componentes predeterminados ya cumplen con WCAG 2.2 AA — y un verificador de contraste de marca integrado advierte a los propietarios de academias cuando un color de marca elegido fallaría contra el blanco, sugiriendo una alternativa accesible antes de que llegue a un estudiante. Los estudiantes también obtienen un modo de alto contraste dentro de las ayudas de lectura de la plataforma. El resultado: los creadores obtienen cursos en línea que se mantienen legibles, sin tener que probar manualmente cada combinación de colores.

Todo es parte de una plataforma centrada en la accesibilidad probada contra WCAG 2.2 AA, con un precio de aproximadamente la mitad de las grandes plataformas, y con migración gratuita. Comienza gratis o lee qué hace que un LMS sea genuinamente conforme.

Preguntas frecuentes

¿Cuál es el contraste de color mínimo para WCAG 2.2 AA?

Para texto normal, el mínimo es 4.5:1. Para texto grande (18.66px en negrita o 24px regular y superior) es 3:1. Los componentes de UI y gráficos significativos también necesitan al menos 3:1 (contraste no textual, WCAG 1.4.11). El Nivel AAA eleva el texto normal a 7:1.

¿Qué cuenta como "texto grande" según WCAG?

Texto que tiene al menos 24px (aproximadamente 18pt) regular, o 18.66px (aproximadamente 14pt) en negrita. El texto grande solo necesita una proporción de contraste de 3:1 en lugar de los 4.5:1 requeridos para el texto normal.

¿Cómo puedo comprobar la proporción de contraste de dos colores?

Usa el WebAIM Contrast Checker, el selector de color de DevTools de tu navegador, o un escaneo automatizado con axe-core o Lighthouse. Pega tus colores de primer plano y fondo para ver la proporción exacta y si pasa AA y AAA para texto normal y grande.

¿El contraste de color se aplica también a botones e íconos?

Sí. WCAG 1.4.11 requiere al menos 3:1 de contraste para las partes significativas de los componentes de UI (como bordes de entrada y las formas esenciales de los íconos) y para gráficos necesarios para entender el contenido — no solo para texto. Los logotipos y elementos puramente decorativos están exentos.

¿Eduspera verifica automáticamente el contraste de color?

Sí. Eduspera ofrece temas verificados por contraste que cumplen con WCAG 2.2 AA por defecto y advierte a los propietarios de academias si un color de marca elegido falla contra el blanco, sugiriendo una alternativa accesible — además de un modo de lectura de alto contraste para los estudiantes.