La relación de contraste de color explicada con ejemplos verificados

Qué mide un ratio de contraste

WCAG 2.2 define el ratio de contraste como (L1 + 0.05) / (L2 + 0.05). L1 es la luminancia relativa del color más claro y L2 la del más oscuro. Como el valor más claro siempre va arriba, el resultado no depende de cuál se denomine primer plano. La misma pareja conserva el mismo ratio cuando se intercambian el texto y el fondo.

contrast = (Llighter + 0.05) / (Ldarker + 0.05)
minimum = 1:1
maximum = 21:1

Dos colores idénticos producen 1:1. El negro sRGB ideal contra el blanco sRGB ideal produce 21:1. El ratio describe la separación entre claro y oscuro, no la distancia de tono: dos tonos visiblemente diferentes pueden tener luminancias parecidas y poco contraste de texto. Por eso elegir colores complementarios o mover un control de tono no demuestra la legibilidad.

Cómo los canales sRGB se convierten en luminancia relativa

Para un color sRGB opaco, empieza con los valores de sus canales rojo, verde y azul. Normaliza cada canal de 8 bits del intervalo 0–255 al 0–1, linealízalo con la función de transferencia sRGB y combina después los canales lineales. WCAG asigna en la luminancia relativa los pesos 0.2126 al rojo, 0.7152 al verde y 0.0722 al azul. Por tanto, el verde aporta al número de luminancia mucho más que el azul.

const linear = value => {
  const channel = value / 255;
  return channel <= 0.04045
    ? channel / 12.92
    : ((channel + 0.055) / 1.055) ** 2.4;
};

const luminance = (red, green, blue) =>
  0.2126 * linear(red) +
  0.7152 * linear(green) +
  0.0722 * linear(blue);

• Interpreta los canales sRGB finales; no calcules a partir de un nombre de color ni de una estimación visual.
• Linealiza cada canal antes de aplicar los pesos de luminancia.
• Calcula ambas luminancias, coloca la más clara en L1 y conserva suficiente precisión.
• Muestra un valor redondeado a las personas, pero compara el resultado sin redondear con el umbral.
• Si intervienen transparencia o una imagen, determina primero el fondo efectivo renderizado.

Los umbrales AA y AAA dependen del texto

El Criterio de Conformidad 1.4.3 de WCAG corresponde al nivel AA. Exige al menos 4.5:1 para texto normal y 3:1 para texto a gran escala. El Criterio de Conformidad 1.4.6 corresponde al nivel AAA: al menos 7:1 para texto normal y 4.5:1 para texto a gran escala. El cálculo del ratio es idéntico en todos los niveles; solo cambia el umbral empleado para interpretarlo.

• Texto normal AA: 4.5:1 o superior.
• Texto a gran escala AA: 3:1 o superior.
• Texto normal AAA: 7:1 o superior.
• Texto a gran escala AAA: 4.5:1 o superior.

WCAG define gran escala como texto de al menos 18 puntos, o de al menos 14 puntos si está en negrita, con consideraciones de tamaño equivalentes para fuentes CJK. Los píxeles CSS y los puntos no son etiquetas intercambiables: en la conversión de referencia CSS habitual, 18 pt corresponden a 24 px CSS y 14 pt a unos 18,67 px CSS. Hay que comprobar el peso, el tamaño de fuente entregado y la función real del texto, no deducirlos de una captura.

Parejas comprobadas y el límite de redondeo

Los valores siguientes utilizan colores sRGB opacos de seis dígitos y la fórmula de luminancia relativa de WCAG 2.2. Aprobar y suspender se refieren al texto normal, no al grande. Se muestran cuatro decimales para que sigan visibles los resultados cercanos al umbral.

#767676 sobre blanco supera 4.5:1, mientras que #777777, ligeramente más claro, no lo hace. Una pantalla que redondease a un decimal podría etiquetar ambos como 4.5:1, pero los umbrales WCAG no se redondean antes de evaluarse. Un 4.4781:1 calculado sigue por debajo de 4.5:1. Una herramienta fiable evalúa el número con toda su precisión y solo redondea la etiqueta presentada a la persona.

Transparencia, degradados, imágenes y estados

Un color alfa no tiene un único ratio de contraste hasta que se compone sobre un fondo conocido. Por ejemplo, el negro con un 50% de opacidad se convierte en un gris medio sobre blanco, pero en un resultado mucho más oscuro sobre una superficie azul pálido. Compara el primer plano efectivo renderizado con el fondo efectivo renderizado, no el token de origen sin componer. La opacidad de un elemento padre también puede cambiar tanto el texto como su superficie.

• Para texto translúcido, compón el color del texto sobre cada fondo que pueda cubrir realmente.
• En degradados, comprueba el punto de menor contraste detrás de toda el área del texto.
• En fotografías o vídeo, verifica fotogramas representativos y desfavorables; una capa sólida puede hacer determinista el resultado.
• Comprueba por separado los estados predeterminado, hover, foco, seleccionado, error y otros relevantes cuando sus colores difieran.
• No tomes un píxel suavizado del borde como color declarado del texto; parte de los colores especificados de primer plano y fondo.

Excepciones y requisitos que este ratio no cubre

El criterio de contraste mínimo del texto contiene excepciones explícitas. El texto de un componente de interfaz inactivo, la decoración pura, el contenido invisible para cualquiera, el texto incidental dentro de una imagen con otro contenido visual importante y el texto de un logotipo o nombre de marca no reciben el mismo requisito de contraste según el Criterio de Conformidad 1.4.3. La excepción es limitada: un cuerpo de texto con estilo de marca no se convierte en logotipo solo por usar colores de marca.

El contraste del texto tampoco agota la revisión del color. Los límites de componentes de interfaz y los gráficos significativos se tratan en requisitos de contraste no textual. Enlaces, errores, gráficos y estados no deben depender únicamente del tono cuando el color es la única forma de comprender la información. El teclado, la visibilidad del foco, el zoom, el reflujo, las etiquetas, la semántica y el texto alternativo requieren verificaciones aparte.

• Determina si el contenido es texto, una imagen de texto, un objeto gráfico o un componente de interfaz.
• Usa el criterio correspondiente en vez de aplicar 4.5:1 a cada píxel.
• Documenta las excepciones reales, pero no las utilices para justificar contenido ordinario difícil de leer.
• Considera el contraste automatizado como una prueba determinista dentro de una revisión de accesibilidad más amplia.

Lista reproducible para revisar el contraste

• Captura el primer plano y el fondo finales en el estado renderizado que se revisa.
• Resuelve variables CSS, colores con nombre, alfa, herencia, capas y mezcla antes de calcular.
• Convierte los canales sRGB efectivos en luminancia relativa con toda la precisión.
• Calcula (L1 + 0.05) / (L2 + 0.05), colocando primero la luminancia más clara.
• Clasifica el contenido como texto normal, texto a gran escala u otro tipo con un criterio diferente.
• Compara el resultado sin redondear con 4.5, 3, 7 o 4.5 según corresponda.
• Prueba cada estado materialmente distinto y la zona de menor contraste de los fondos variables.
• Registra colores, ratio, clase de contenido, umbral, resultado y fecha para que otra persona pueda reproducirlo.
• Continúa con comprobaciones no textuales, de interacción, semántica, teclado, zoom y usabilidad humana.

Color Atlas mantiene separadas las piezas deterministas: valores sRGB almacenados, luminancia calculada, ratio exacto y etiquetas de umbral. Esa estructura hace reproducibles los resultados y permite que otro artículo compare varios colores de texto candidatos sobre un fondo sin inventar prosa ni afirmar que un número certifica toda la interfaz.