Técnica Técnicas generales WCAG 2.2
G145Dar al texto grande un contraste de al menos 3:1 con el fondo
Nombre oficial en el W3C: Garantizar 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 pocas palabras
El texto grande se lee mejor que el pequeño, así que pide menos contraste. En el nivel AA basta una relación de 3:1 con el fondo, en lugar de 4,5:1. Es texto grande el de 24 px (18 pt) o más, o el de unos 18,5 px (14 pt) o más en negrita.
Por qué es importante
Las personas con baja visión, las personas mayores y quien lee en el móvil a pleno sol necesitan que las letras se distingan bien del fondo.
Con letras grandes se puede bajar algo el contraste sin perder legibilidad. Pero por debajo de 3:1, incluso un título grande se vuelve difícil de leer.
Cómo se hace
- Identifique el texto grande: títulos, cifras destacadas, textos de portada.
- Mida la relación de contraste entre el color de las letras y el del fondo. Debe ser de 3:1 o más.
- Si el fondo es una foto o un degradado, mida justo detrás de las letras, en la zona menos favorable.
- Si no llega, oscurezca o aclare la zona de detrás, ponga una capa semitransparente o añada un contorno a las letras.
- Calcule el tamaño en píxeles CSS: 1 pt equivale a unos 1,333 px.
- Para el texto normal sigue valiendo 4,5:1 (técnica G18).
Cómo comprobarlo
- Compruebe el tamaño del texto con las herramientas del navegador (pestaña «Calculado»).
- Mida el contraste con un analizador de contraste, como Colour Contrast Analyser.
- En fondos con imagen, mida varios puntos junto a las letras, sobre todo los más claros u oscuros.
- Confirme que todas las mediciones dan 3:1 o más.
Para saber más, en nuestro blog
-
Los mejores analizadores de contraste de colorDescubre 7 herramientas que te ayudarán a dotar de un buen contraste a tu web o a tus documentos
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G145 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G145 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.