Contraste de color y accesibilidad: el origen de la fórmula WCAG, sus límites y la ley

Un texto gris claro queda elegante en una maqueta vista en un monitor calibrado. La misma página en un móvil a pleno sol, en un portátil con el brillo bajado para ahorrar batería o ante una persona de setenta años es otra experiencia. El contraste no es una concesión para una minoría: determina lo rápido y lo bien que lee todo el mundo cuando las condiciones no son ideales.

Este artículo repasa de dónde salen las reglas de contraste, hasta qué punto fiarse de sus números, qué exige de verdad la normativa en varios mercados y dónde suelen fallar las paletas reales. Para calcular tus propios colores, usa el comprobador de contraste de color.

A quién perjudica un contraste bajo

Las personas con baja visión son el grupo evidente, pero la población afectada es mucho mayor.

La vista que envejece. El cristalino amarillea y dispersa la luz, y la pupila se reduce, así que llega menos luz a la retina. Personas que aún sacan buena nota en la tabla de agudeza pierden sensibilidad al contraste, y el texto gris pálido es lo primero que cuesta leer.
Malas condiciones de visualización. Los reflejos en exteriores, las pantallas atenuadas por el ahorro de energía y los paneles baratos con poco contraste nativo comprimen el contraste que tuviera el diseño. La constante 0,05 de la fórmula de WCAG existe precisamente para modelar ese reflejo ambiental.
Daltonismo. Alrededor del 8 % de los hombres y el 0,5 % de las mujeres de ascendencia norte-europea tienen deficiencia de visión rojo-verde; en hombres de Asia oriental las tasas son menores, en torno al 4-7 %. Perciben normalmente el contraste de luminosidad, pero pierden la información transmitida solo por el tono.

Un umbral de contraste es un único número que sustituye a la pregunta «¿se seguirá leyendo cuando las cosas no sean perfectas?».

De dónde sale 4,5:1

Cuando WCAG 2.0 fijó sus reglas de contraste en 2008, el punto de partida fue la pantalla de ordenador, no el papel. La fórmula deshace la curva gamma de sRGB para estimar la luz que emite cada color (luminancia relativa) y compara ambos valores. El documento explicativo del W3C da este razonamiento:

ISO 9241-3, la norma ergonómica para pantallas de oficina, recomendaba un contraste de luminancia mínimo de 3:1 para personas con visión normal.
Se asume que una persona con agudeza 20/40 (unos 0,5 en la escala decimal habitual en España y Latinoamérica) pierde sensibilidad al contraste en un factor de aproximadamente 1,5, así que 3 × 1,5 = 4,5 pasó a ser el umbral AA para el texto normal. Es un nivel frecuente en personas mayores.
Teniendo en cuenta una visión de alrededor de 20/80 se obtiene el nivel AAA de 7:1.
El texto grande tiene trazos más gruesos y sigue siendo legible con menos contraste, así que el texto de al menos 18 puntos, o 14 en negrita, baja un escalón: 3:1 para AA.

WCAG 2.1 (2018) añadió el criterio 1.4.11, que pide 3:1 para los elementos no textuales necesarios para entender la interfaz: bordes de campos, iconos con significado, indicadores de foco. El fallo clásico es un campo de formulario dibujado con un contorno gris pálido sobre blanco.

Conviene recordar que estos números no se validaron uno a uno con grandes estudios de lectura. Son un umbral consensuado a partir de una norma previa y de datos de agudeza visual. No hay un precipicio de legibilidad entre 4,49 y 4,51. Aun así, las auditorías tratan los umbrales como absolutos y no redondean: 4,49:1 suspende.

Las críticas y qué es APCA

La fórmula de WCAG 2 ha sobrevivido casi dos décadas por su sencillez, pero sus debilidades están bien documentadas.

Ignora la polaridad. Gris sobre blanco y blanco sobre ese mismo gris puntúan igual, aunque el texto claro sobre fondo oscuro se percibe de otra forma, con más sensación de difuminado.
Sobrevalora los pares oscuros. Combinaciones turbias, como gris oscuro sobre azul marino, pueden aprobar, mientras que otras claramente legibles, como blanco sobre naranja saturado, suspenden a menudo.
Trata tamaño y grosor en dos categorías gruesas. Una fuente web de peso 300 a 16 px y otra de peso 700 a 16 px tienen el mismo requisito.

El Accessible Perceptual Contrast Algorithm (APCA), desarrollado por Andrew Somers, intenta corregir esto. Se basa en un modelo perceptivo, trata de forma distinta el texto oscuro sobre claro y el claro sobre oscuro, y lee su resultado (un valor Lc) junto a una tabla de tamaños y pesos de fuente.

Aquí aparece el malentendido habitual: muchos artículos afirman que «WCAG 3 usa APCA». No es así. APCA figuró como contenido exploratorio en borradores tempranos de WCAG 3, pero se retiró del borrador de trabajo de julio de 2023, y el borrador actual indica que el algoritmo de contraste está por determinar. WCAG 3 sigue siendo un borrador y se espera que tarde años en convertirse en Recomendación. Para cualquier cuestión legal o contractual hoy, la referencia es WCAG 2.x. APCA sirve mejor durante el diseño, como segunda opinión sobre si un par que aprueba la fórmula antigua es realmente cómodo de leer.

Qué exige la ley en cuatro mercados

Casi todas las normativas toman sus cifras de contraste directamente de WCAG. Las diferencias están en quién está obligado a cumplirlas.

Unión Europea

El Acta Europea de Accesibilidad (Directiva 2019/882) se aplica desde el 28 de junio de 2025. Cubre productos y servicios dirigidos a consumidores, como comercio electrónico, banca, libros electrónicos y servicios de transporte de viajeros, con una exención para los servicios prestados por microempresas (menos de 10 empleados y volumen de negocio o balance anual de hasta 2 millones de euros). La norma armonizada que da presunción de conformidad es la EN 301 549, cuyos apartados web incorporan WCAG 2.1 AA. Los sitios del sector público ya estaban cubiertos por la Directiva de accesibilidad web (2016/2102), transpuesta en España por el Real Decreto 1112/2018. Cada Estado miembro aplica el Acta mediante su propia transposición nacional, así que conviene revisar la ley del país concreto.

Estados Unidos

Las agencias federales están sujetas a la Sección 508 de la Ley de Rehabilitación; los estándares 508 revisados en 2017 incorporan WCAG 2.0 AA. Para gobiernos estatales y locales, el Departamento de Justicia publicó en abril de 2024 una norma final bajo el Título II de la ADA que adopta WCAG 2.1 AA. Las fechas originales eran abril de 2026 para entidades que atienden a 50.000 habitantes o más y abril de 2027 para las menores; una norma final provisional de abril de 2026 las retrasó un año, a abril de 2027 y abril de 2028. Las empresas privadas del Título III aún no tienen un estándar técnico web específico en reglamento, pero WCAG es la vara de medir a la que recurren tribunales y acuerdos.

Japón

La norma técnica es JIS X 8341-3:2016, revisada para coincidir en contenido con WCAG 2.0 (convertida en la norma internacional ISO/IEC 40500:2012), así que sus reglas de contraste son las de WCAG 2.0 AA. Las directrices del Ministerio de Asuntos Internos y Comunicaciones piden a las administraciones públicas apuntar al nivel AA y publicar sus resultados de prueba. Una reforma de la ley contra la discriminación por discapacidad, en vigor desde abril de 2024, hizo obligatorio también para las empresas privadas el «ajuste razonable», aunque eso no convierte por sí solo la conformidad con JIS en obligación legal para todo sitio privado.

Corea del Sur

La ley de prohibición de la discriminación contra personas con discapacidad prohíbe discriminar en el acceso a la información a través de sitios web. La referencia técnica son las Pautas coreanas de accesibilidad web (KWCAG) 2.2, publicadas como KS X OT0003:2022 y revisadas en diciembre de 2022: 4 principios, 14 pautas y 33 puntos de control. El punto de contraste exige al menos 4,5:1 entre texto y fondo y admite 3:1 para texto grande (18 pt, o 14 pt en negrita) y contenido ampliable. En la práctica equivale a WCAG 2.x AA.

La conclusión práctica: en cualquiera de estos mercados, cumplir 4,5:1 para el texto normal y 3:1 para el texto grande y los componentes de interfaz te deja a salvo en lo que respecta al contraste.

Dónde fallan las paletas reales

Conocer la regla y mantenerla en todo un producto son cosas distintas. Estos son los puntos donde las auditorías siguen encontrando problemas.

Colores de marca como relleno de botones. Los verdes, naranjas y azules celestes de marca casi nunca alcanzan 4,5:1 con texto blanco. Hay tres salidas: cambiar la etiqueta a un color oscuro, definir una variante más oscura de la marca para los elementos interactivos, o agrandar la etiqueta (negrita de 18,5 px o más) para que se aplique 3:1. El comprobador de contraste propone el tono más cercano que aprueba manteniendo tono y saturación, que suele ser la variante que el equipo de diseño acepta.

Texto secundario y marcadores de posición. Fechas, pies de foto y textos de ayuda en los campos suelen aclararse porque son «menos importantes», pero el criterio no tiene esa excepción. Sobre blanco, el gris más claro que aprueba ronda #767676. Algo más pálido exige un tamaño mayor.

Estados. Hover, foco, seleccionado y error crean cada uno un par de colores nuevo, y hay que comprobarlos todos. Los anillos de foco en particular necesitan 3:1 frente al fondo contiguo según 1.4.11. Los controles desactivados están exentos; los activos que solo parecen desactivados, no.

Modo oscuro. Invertir la paleta clara no basta. El blanco puro sobre negro puro (21:1) genera quejas de halo, por lo que muchos sistemas de diseño usan una superficie gris oscura como #121212 y un blanco algo atenuado, que sigue superando 4,5:1 con holgura. El fallo más común son los colores de acento saturados que funcionaban sobre blanco y pierden contraste sobre fondo oscuro.

Texto sobre imágenes. Mide contra la parte más clara (u oscura) de la foto detrás de las letras, no contra la media. Una capa oscura semitransparente arregla la mayoría de las cabeceras. Para conocer el color compuesto real, haz una captura y muestrea los píxeles detrás del texto con el selector de color.

El color como única señal. Una leyenda de gráfico que separa series solo por rojo y verde, o un campo obligatorio marcado solo con un borde rojo, incumple WCAG 1.4.1 sea cual sea la relación de contraste. Añade iconos, etiquetas de texto o estilos de línea.

Gestionarlo con tokens de diseño

Arreglar el contraste pantalla a pantalla no dura: la siguiente funcionalidad reintroduce el problema. La solución duradera es validar las combinaciones a nivel de token.

Separa los tokens de fondo (surface, surface-muted, brand) de los de primer plano (text, text-muted, on-brand).
Construye una matriz de pares permitidos y anota la relación en cada celda. Marca lo que quede por debajo de 4,5 como «solo texto grande» o «no usar».
Crea los escalones de luminosidad en un espacio perceptualmente uniforme como OKLCH en lugar de HSL. Una luminosidad HSL del 50 % se percibe muy distinta en amarillo y en azul, así que las escalas basadas en HSL dan contrastes desiguales entre tonos. El conversor de colores permite pasar valores entre estos espacios.

Con esa matriz, quien desarrolla un componente nuevo consulta una celda en vez de recalcular el contraste cada vez.

Ideas equivocadas frecuentes

«Hay que apuntar a AAA en todo.» El propio W3C no recomienda AAA como política general para sitios completos; un texto a 7:1 limita mucho la identidad visual. Las normativas exigen AA.
«El comprobador automático aprobó, así que hemos terminado.» Las herramientas automáticas leen los colores declarados en CSS. Se les escapa con frecuencia el texto dentro de imágenes, sobre degradados o en estados hover.
«Con contraste alto, las personas daltónicas están cubiertas.» La relación de contraste mide texto frente a fondo. Si dos colores de datos se distinguen entre sí es otra comprobación.
«APCA es la nueva norma.» Como se ha visto, no forma parte de ninguna norma definitiva.

El umbral de contraste no es un modelo completo de legibilidad. Es un suelo común que todo el mundo mide igual. Una vez por encima, leer la página en un teléfono real, con mucha luz y con poca, sigue siendo la mejor prueba.