Técnica Técnicas generales WCAG 2.2
G17Dar al texto un contraste de al menos 7:1 con el fondo
Nombre oficial en el W3C: Garantizar una relación de contraste de al menos 7:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto
En pocas palabras
El texto debe destacar mucho sobre su fondo. Esta técnica pide una relación de contraste de 7:1 o más entre el color de las letras y el del fondo. Es el nivel más exigente (AAA) y facilita la lectura a las personas con baja visión. El texto grande puede quedarse en 4,5:1.
Por qué es importante
Muchas personas distinguen mal los colores parecidos: personas con baja visión, personas mayores o con cataratas. También cualquiera que mire el móvil al sol o con poco brillo.
Con un contraste de 7:1, el texto se lee sin esfuerzo. La persona no necesita ampliar la pantalla ni cambiar los colores con otras herramientas. Es el nivel AAA del criterio 1.4.6 (contraste mejorado).
Cómo se hace
- Mida la relación de contraste entre el color del texto y el del fondo. En texto normal debe ser de 7:1 o más.
- En texto grande basta 4,5:1. Es grande el texto de 24 px (18 pt) o más, o de unos 18,5 px (14 pt) o más en negrita.
- Si el fondo es una foto o un degradado, mida en el punto menos favorable, justo detrás de las letras. Si no llega, ponga un velo o una franja de color sólido detrás del texto.
- Otra opción es añadir un contorno o una sombra marcada alrededor de las letras para separarlas del fondo.
- La regla incluye el texto dentro de imágenes. Quedan fuera los logotipos, el texto decorativo y el de los controles desactivados.
- Defina la paleta con colores que ya cumplan. Por ejemplo, gris oscuro
#333333sobre blanco da 12,6:1.
Cómo comprobarlo
- Abra las herramientas del navegador (F12). En «Estilos», pulse la muestra de color del texto: Chrome indica la relación de contraste y marca la línea de AAA.
- También puede usar Colour Contrast Analyser, un programa gratuito de TPGi. Use el cuentagotas sobre el texto y sobre el fondo.
- En fotos y degradados, mida en la zona del fondo que menos contraste da con las letras.
- Revise también los estados al pasar el ratón y al recibir el foco, y el texto dentro de imágenes.
Ejemplo
Colores de texto que superan 7:1 sobre fondo blanco y sobre un pie de página oscuro.
/* Texto normal: gris oscuro sobre blanco (12,6:1) */
body { color: #333333; background: #ffffff; }
/* Pie: blanco sobre azul marino (16,1:1) */
footer { color: #ffffff; background: #0b2239; }
/* Enlaces: azul oscuro sobre blanco (7,1:1) */
a { color: #005a9c; }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 G17 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 va más allá de la técnica de contraste 4.5:1 para ofrecer un nivel de contraste superior que facilite la lectura a las personas con baja visión.
Si el fondo es de un color uniforme (o completamente negro o completamente blanco), la relación de contraste del texto puede mantenerse asegurándose de que cada una de las letras del texto tenga una relación de contraste de 7: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 7: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 sobre una fotografía del campus universitario. Como en la fotografía aparece una gran variedad de colores y tonos oscuros, 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 7: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 7: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 análisis de contraste de color)
- Contrast Ratio Analyser - online service (servicio en línea de análisis de 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 de Colors On the Web)
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 G17 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.