Las ratios de contraste de la WCAG explicadas: guía práctica para diseñadores

He aquí un número al que vuelvo una y otra vez: en el informe WebAIM Million de 2025, el texto de bajo contraste fue el fallo de accesibilidad más común de toda la web, presente en el 79,1% del millón de páginas de inicio más visitadas. No el texto alternativo ausente. No los botones sin etiquetar. El contraste. El problema de accesibilidad más detectado del mundo son dos colores demasiado parecidos, y casi todos los equipos que lo publican no tienen ni idea de que lo han hecho.

Yo mismo he publicado ese fallo. Hace años construí un panel "premium" con un elegante texto gris #9CA3AF sobre blanco, aprobado por todos los presentes en la sala porque se veía refinado en una pantalla Retina recién estrenada, en una sala de reuniones a oscuras. Una semana después llegó un ticket de soporte de un usuario en un tren soleado que, literalmente, no podía leer las etiquetas. El texto estaba en torno a 2,6:1. La WCAG pide 4,5:1. Esa brecha es todo el tema de este artículo.

Qué es realmente una ratio de contraste de la WCAG

Una ratio de contraste de la WCAG es un único número que describe cuánto difieren dos colores en luminosidad, expresado como una ratio de 1:1 a 21:1. Blanco sobre blanco es 1:1 (invisible). Negro puro sobre blanco puro es 21:1 (el máximo). Todo lo que diseñas vive en algún punto intermedio, y la WCAG fija el suelo por debajo del cual no se te permite bajar.

Lo crucial que hay que interiorizar pronto: el contraste tiene que ver con la luminancia, no con que los colores "se vean diferentes". El rojo y el verde se ven enormemente distintos para la mayoría de la gente, pero un rojo saturado (#FF0000) sobre un verde saturado (#008000) se sitúa solo en torno a 1,3:1 porque tienen casi la misma luminosidad. Para una persona con daltonismo rojo-verde, o para cualquiera que eche un vistazo a una pantalla de baja calidad, ese emparejamiento es una masa indistinguible. Tu ojo se deja engañar por el tono; la fórmula de contraste no.

La fórmula, en términos sencillos

La ratio se calcula como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la luminancia del más oscuro. Casi nunca la calcularás a mano, pero entender las dos etapas te dice por qué tu intuición te engaña.

Primero, la luminancia relativa de cada color se encuentra tomando sus canales rojo, verde y azul, "linealizándolos" (deshaciendo la curva gamma que aplican las pantallas, con la regla de que los canales iguales o inferiores a 0.03928 se dividen entre 12.92, y los superiores se pasan por ((c + 0.055) / 1.055) ^ 2.4), y luego ponderándolos: 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul. Esos pesos no son arbitrarios. El ojo humano es extraordinariamente sensible al verde y, en comparación, casi ciego al azul.

Este es el aprendizaje más útil de toda la matemática: el verde aporta más o menos diez veces el brillo percibido del azul. Por eso el texto azul puro sobre negro es doloroso y apenas pasa, mientras que la misma "oscuridad" en verde se lee bien. Por eso tus enlaces azules sobre un fondo oscuro se ven débiles por más que los satures. Si solo recuerdas una cosa de la fórmula, recuerda los pesos.

El + 0.05 de la ratio es una constante que modela la luz ambiental que se refleja en la pantalla, de modo que ni siquiera unos negros teóricamente perfectos producen una ratio infinita. Es la razón por la que las ratios de contraste topan en 21:1.

Los tres umbrales que tienes que conocer

La WCAG (las Pautas de Accesibilidad para el Contenido Web, mantenidas por el W3C) define un pequeño conjunto de números. Memoriza estos y habrás cubierto la inmensa mayoría del trabajo real.

• 4,5:1 — el mínimo para el texto del cuerpo normal en nivel AA. Este es el número de trabajo. Si apuntas a un solo valor, apunta a este.
• 3:1 — el mínimo para el texto grande en AA, y también el mínimo para los elementos de interfaz no textuales y los gráficos (más sobre esto abajo).
• 7:1 — texto normal en nivel AAA, el nivel reforzado para usuarios con baja visión. El texto grande en AAA necesita 4,5:1.

Fíjate en el patrón: cada nivel es más o menos el siguiente hacia arriba. El AA-grande y los no textuales comparten 3:1; el AA-normal y el AAA-grande comparten 4,5:1. Es menos de lo que parece para recordar.

AA frente a AAA: ¿cuál debes de verdad?

El AA es el estándar del mundo real. Es lo que referencian la Ley Europea de Accesibilidad, los acuerdos derivados de la ADA en EE. UU., la Sección 508 y prácticamente cualquier contrato de adquisición. Cuando un abogado o un auditor dice "conforme a la WCAG", se refiere al AA. El AAA es el nivel de oro, y las propias pautas dicen explícitamente que la conformidad AAA no se exige como política general para sitios enteros, en parte porque hay contenido que sencillamente no puede alcanzar 7:1 sin verse roto.

Mi opinión honesta tras años con esto: diseña el texto del cuerpo para superar el AA con holgura y luego trata el AAA como un objetivo que alcanzas para el contenido que más importa: la columna de lectura principal de un artículo, los mensajes de error, cualquier cosa que un usuario estresado o con baja visión deba descifrar bajo presión. Perseguir el 7:1 en cada pie de foto y etiqueta deshabilitada es una batalla perdida que aplana toda tu paleta en negro sobre blanco.

Texto normal frente a texto grande, y la trampa que esconde

La WCAG es más indulgente con el texto grande (3:1 en lugar de 4,5:1) porque las formas de letra más grandes y pesadas son legibles con menos contraste. Pero la definición de "grande" es específica y la gente la entiende mal constantemente.

• Grande = 18pt y más, que son 24px con peso normal.
• O 14pt y más, que son unos 18,5px, si el texto está en negrita.

La conversión que confunde a todo el mundo es 1pt = 1,333px, por lo que 18pt se convierten en 24px y 14pt en ~18,5px. Así que un encabezado regular de 19px no es texto grande según la definición de la WCAG: sigue debiendo el 4,5:1 completo. Una etiqueta en negrita de 16px tampoco es grande. He visto diseños "pasar" en la cabeza de alguien porque el encabezado "se veía grande", cuando en píxeles quedaba justo por debajo del umbral y necesitaba la ratio más estricta. En caso de duda, mantén el cuerpo y los subtítulos en 4,5:1 y reclama el descuento de 3:1 solo para tipografía de display genuinamente grande.

Contraste de elementos no textuales: el criterio que todos olvidan (1.4.11)

Aquí es donde fallan la mayoría de los equipos, por lo demás cuidadosos. La WCAG 2.1 añadió el Criterio de Conformidad 1.4.11, Contraste de elementos no textuales, que exige 3:1 para dos categorías que no tienen nada que ver con la lectura:

• Componentes de interfaz de usuario — el límite visual de un control que te dice que existe y en qué estado está. El borde de un campo de texto, el contorno de una casilla sin marcar, el anillo de foco alrededor de un botón, la pista de un interruptor.
• Objetos gráficos — partes de iconos, gráficos y diagramas necesarias para entenderlos. La línea de un minigráfico, las porciones de un gráfico circular, la forma de un icono de advertencia.

La violación clásica: un campo de búsqueda que no es más que una caja #FFFFFF con un borde gris claro #E5E7EB de 1px sobre una página blanca. Ese borde está en torno a 1,2:1. Los usuarios videntes con baja visión, literalmente, no pueden encontrar dónde pulsar. El texto de marcador de posición pálido y los contornos de los botones fantasma fallan de la misma manera. La decoración pura está exenta, y también el texto dentro del componente (eso cae bajo el 1.4.3), pero lo que señala "esto es interactivo" debe alcanzar 3:1 frente a lo que tenga al lado.

Cómo medirlo, y cómo corregirlo

El contraste no se juzga a ojo. Se mide. Mi flujo de trabajo del día a día:

• En el navegador, abre las DevTools e inspecciona el elemento de texto. Tanto Chrome como Firefox imprimen la ratio de contraste justo en el selector de color, con marcas de verificación para AA y AAA, e incluso dibujan una línea en el espacio de color que muestra el umbral que puedes arrastrar.
• Para comprobar un par de códigos hex antes de que lleguen siquiera al código, usa un comprobador dedicado. El generador de paletas de color de este sitio incluye un comprobador de contraste WCAG para que valides las combinaciones mientras todavía las estás eligiendo, en lugar de descubrir el problema en una auditoría.
• Para barridos de páginas enteras, ejecuta una herramienta automatizada. Pero conoce su límite: la automatización detecta el texto sobre color sólido y se le escapa el texto sobre fotos, degradados o superposiciones semitransparentes. Esos los compruebas a mano.

Cuando algo falla, resiste el impulso de retocar el tono. Cambiar la saturación apenas mueve el contraste; cambiar la luminosidad lo mueve mucho. En concreto:

• Oscurece el primer plano o aclara el fondo hasta superar la línea. Mi gris #9CA3AF de antes tuvo que pasar a aproximadamente #6B7280 sobre blanco para alcanzar ~4,5:1: la misma familia, solo unos pasos más profundo.
• Para texto claro sobre color, suele ser más rápido oscurecer el fondo. Una etiqueta #FFFFFF sobre un botón azul #60A5FA falla; baja el botón a #2563EB y superas el AA sin tocar el texto.
• Para gráficos e iconos, añade un trazo más oscuro y fino o un tinte de fondo sutil en lugar de pelear por hacer oscuro cada relleno.

Los errores que veo en equipos reales

• Aprobar en una pantalla perfecta. Un MacBook impoluto en una sala tenue favorece todo. Los usuarios reales tienen reflejos, paneles baratos, filtros de luz azul y el "night shift" calentando los blancos. Diseña para la peor condición de visualización plausible, no para la demo.
• Fiarte del tono por encima de la luminancia. Dos colores vivos pero igualmente claros (otra vez ese rojo sobre verde) pueden ser invisibles para usuarios daltónicos mientras pasan tu prueba a ojo. Calcula el número.
• Olvidar el texto de marcador de posición y los estados deshabilitados. Los marcadores de posición siguen siendo texto y siguen debiendo contraste si transmiten significado. Los controles deshabilitados sí están genuinamente exentos, pero no abuses de eso para esconder contenido activo de bajo contraste tras una apariencia de "deshabilitado".
• Ignorar las superposiciones. El texto blanco sobre una foto de portada pasa sobre la esquina oscura y falla sobre el cielo brillante. Un velo —una capa oscura semiopaca entre la imagen y el texto— es la solución estándar.
• Tratar el 4,5:1 como un objetivo en lugar de como un suelo. Aterrizar exactamente en 4,5:1 es frágil; un diseñador retocando un tono lo vuelve a romper. Deja margen.

Una palabra sobre el futuro: la WCAG 3 está explorando un modelo perceptual llamado APCA que juzga el contraste más como lo hace el ojo humano, teniendo en cuenta el tamaño y el peso del texto juntos en lugar de una ratio plana. Es prometedor y vale la pena seguirlo, pero a día de hoy las ratios de este artículo —respaldadas por Understanding 1.4.3 del W3C— son lo que te hace conforme legal y prácticamente. Constrúyelas, déjate un margen y mide en lugar de adivinar. El 79,1% de los sitios que fallan, fallaron en su mayoría porque nadie comprobó. Comprobar es todo el trabajo.