Técnica Técnicas generales WCAG 2.2

G145Garantizar una relación de contraste de al menos 3:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto

En resumen

Esta técnica explica cómo conseguir y medir la relación de contraste mínima de 3:1 que las WCAG admiten para el texto a gran escala (al menos 18 puntos, o 14 puntos en negrita) frente a su fondo. Incluye la fórmula de la luminancia relativa, la equivalencia entre puntos y píxeles CSS y soluciones para fondos con imágenes o degradados, como atenuar el fondo o añadir un halo a las letras. Beneficia a personas con baja visión o con pérdida de sensibilidad al contraste y a quien consulta la web con mucha luz ambiental.

Aplicabilidad

Cualquier tecnología que produzca salida visual.

Descripción

El objetivo de esta técnica es asegurarse de que los usuarios pueden leer el texto que se presenta sobre un fondo. Esta técnica relaja el requisito de relación de contraste de 4.5:1 para el texto de al menos 18 puntos (si no es negrita) o de al menos 14 puntos (si es negrita).

Al evaluar este criterio de conformidad, el tamaño de fuente en puntos debe obtenerse del agente de usuario o calcularse a partir de las métricas de la fuente del mismo modo en que lo hacen los agentes de usuario. Los tamaños en puntos se basan en el tamaño pt de CSS (CSS3 Values). La relación entre los tamaños en puntos y los píxeles CSS es 1pt = 1.333px; por tanto, 14pt y 18pt equivalen aproximadamente a 18.5px y 24px.

Si el fondo es de un color uniforme (o completamente negro o completamente blanco), la relación de contraste del texto a gran escala puede mantenerse asegurándose de que cada una de las letras del texto tenga una relación de contraste de 3:1 con el fondo.

Si el fondo o las letras varían en luminancia relativa (o tienen un patrón), entonces el fondo que rodea las letras puede elegirse o sombrearse de forma que las letras mantengan una relación de contraste de 3:1 con el fondo situado inmediatamente detrás de ellas, aunque no tengan esa relación de contraste con el fondo completo.

La relación de contraste a veces puede mantenerse cambiando la luminancia relativa de las letras a medida que la luminancia relativa del fondo cambia a lo largo de la página.

Otro método consiste en añadir un halo alrededor del texto que proporcione la relación de contraste necesaria cuando la imagen o el color de fondo no presenten por sí mismos una diferencia suficiente de luminancia relativa.

Ejemplos

Se elige un fondo negro para poder utilizar letras de color claro que coincidan con el logotipo de la empresa.

Se coloca un texto a gran escala sobre una fotografía del campus universitario. Como en la fotografía aparece una gran variedad de colores y tonos, la zona situada detrás del texto se atenúa con un velo blanco, de modo que la fotografía queda muy tenue y su punto más oscuro sigue siendo lo bastante claro para mantener una relación de contraste de 3:1 con el texto negro escrito sobre la fotografía.

Pruebas

Procedimiento

Medir la luminancia relativa de cada letra (salvo que todas sean uniformes) mediante la fórmula:
- L = 0.2126 * R + 0.7152 * G + 0.0722 * B donde R, G y B se definen como:
  - si R sRGB <= 0.04045, entonces R = R sRGB /12.92; en caso contrario, R = ((R sRGB +0.055)/1.055) ^ 2.4
  - si G sRGB <= 0.04045, entonces G = G sRGB /12.92; en caso contrario, G = ((G sRGB +0.055)/1.055) ^ 2.4
  - si B sRGB <= 0.04045, entonces B = B sRGB /12.92; en caso contrario, B = ((B sRGB +0.055)/1.055) ^ 2.4
  y R sRGB, G sRGB y B sRGB se definen como:
  - R sRGB = R 8bit /255
  - G sRGB = G 8bit /255
  - B sRGB = B 8bit /255
  El carácter «^» es el operador de exponenciación.
En el caso de letras con suavizado de bordes (aliasing), utilizar el valor de luminancia relativa que se encuentre dos píxeles hacia el interior desde el borde de la letra.
Medir la luminancia relativa de los píxeles del fondo inmediatamente contiguos a la letra utilizando la misma fórmula.
Calcular la relación de contraste mediante la siguiente fórmula.
- (L1 + 0.05) / (L2 + 0.05), donde
  - L1 es la luminancia relativa del color más claro de entre el de primer plano y el de fondo, y
  - L2 es la luminancia relativa del color más oscuro de entre el de primer plano y el de fondo.
Comprobar que la relación de contraste es igual o superior a 3:1

Resultados esperados

La comprobación n.º 4 es verdadera.

Antes de mayo de 2021, el valor 0.04045 de la definición era distinto (0.03928). Se había tomado de una versión anterior de la especificación y se ha actualizado. No tiene ningún efecto práctico en los cálculos en el contexto de estas pautas.

Recursos

TPGi Colour Contrast Analyser (CCA) – Application (aplicación de escritorio para analizar el contraste de color)
Contrast Ratio Analyser - online service (servicio en línea para calcular la relación de contraste)
Color Contrast Samples (web.archive.org) (muestras de contraste de color)
Atypical colour response (respuesta atípica al color)
Colors On the Web Color Contrast Analyzer (analizador de contraste de color)

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G145 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.