Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G18Dar al texto un contraste de al menos 4,5:1 con el fondo

Nombre oficial en el W3C: Garantizar una relación de contraste de al menos 4.5:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto

En pocas palabras

El color de las letras y el del fondo deben diferenciarse lo suficiente. En texto normal, la relación de contraste mínima es 4,5:1. Es el nivel AA que exigen la mayoría de las normas. En el nivel AAA, esta misma cifra de 4,5:1 se aplica al texto grande.

Por qué es importante

Un texto gris claro sobre blanco cuesta de leer a muchas personas. Afecta sobre todo a personas con baja visión, a personas mayores y a quien tiene dificultades para distinguir colores.

También afecta a cualquiera que lea en el móvil a pleno sol. Es un requisito de nivel AA (criterio 1.4.3), el que exigen la norma EN 301 549 y el Real Decreto 1112/2018.

Cómo se hace

  1. Mida la relación de contraste entre el color del texto y el del fondo. En texto normal debe ser de 4,5:1 o más.
  2. El texto grande puede bajar a 3:1 en el nivel AA (técnica G145). 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.
  3. Si busca el nivel AAA, el texto grande necesita 4,5:1 y el normal, 7:1 (técnica G17).
  4. Si el fondo es una foto o un degradado, mida justo detrás de las letras, en el punto menos favorable. Si no llega, oscurezca o aclare esa zona, o añada un contorno fino alrededor de las letras.
  5. Ojo con los grises claros en textos de ayuda y con el texto blanco sobre colores corporativos claros. Son los fallos más frecuentes.
  6. Quedan fuera los logotipos, el texto decorativo y el de los controles desactivados.

Ejemplo práctico

Los textos secundarios en gris claro y los botones con letras blancas sobre colores corporativos claros son los fallos de contraste más comunes (criterio 1.4.3). El texto normal necesita una relación de al menos 4,5:1 con su fondo.

Así no: Tarjeta de cita previa con gris claro y botón azul claro

La nota usa #999999 sobre blanco (2,9:1). El botón tiene texto blanco sobre #44AFE4 (2,5:1). Los dos textos miden 16 px y no van en negrita, así que necesitan 4,5:1.

Captura de pantalla del ejemplo incorrecto: Tarjeta de cita previa con gris claro y botón azul claro
Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto
<style>
  .tarjeta { max-width: 340px; padding: 12px 16px; border: 1px solid #c9c9c9; border-radius: 8px; }
  .tarjeta h2 { margin: 0 0 6px; color: #0B2239; font-size: 20px; }
  .nota { color: #999999; margin: 0 0 12px; }
  .boton { font: inherit; padding: 10px 18px; border: 0; border-radius: 6px; background: #44AFE4; color: #fff; }
  .boton:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<div class="tarjeta">
  <h2>Cita previa en el registro</h2>
  <p class="nota">Plazas limitadas. Recibirá la confirmación por correo electrónico.</p>
  <button type="button" class="boton">Pedir cita</button>
</div>

Así sí: Los mismos colores corporativos, con contraste suficiente

La nota pasa a #595959 (7:1 sobre blanco). El texto del botón pasa a #0B2239 sobre el mismo azul #44AFE4 (6,5:1). El diseño se mantiene y los dos textos superan 4,5:1.

Pruébelo aquí:

Ver el código del ejemplo correcto
<style>
  .tarjeta { max-width: 340px; padding: 12px 16px; border: 1px solid #c9c9c9; border-radius: 8px; }
  .tarjeta h2 { margin: 0 0 6px; color: #0B2239; font-size: 20px; }
  .nota { color: #595959; margin: 0 0 12px; }
  .boton { font: inherit; padding: 10px 18px; border: 0; border-radius: 6px; background: #44AFE4; color: #0B2239; }
  .boton:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<div class="tarjeta">
  <h2>Cita previa en el registro</h2>
  <p class="nota">Plazas limitadas. Recibirá la confirmación por correo electrónico.</p>
  <button type="button" class="boton">Pedir cita</button>
</div>

Cómo comprobarlo

Herramientas del navegador

  1. Abra las herramientas del navegador (F12) y pase el selector de elementos por el texto. La etiqueta emergente muestra la relación de contraste.
  2. En la pestaña «Estilos», pulse la muestra de color de color. El selector indica la relación y marca las líneas de 4,5:1 (AA) y 7:1 (AAA).
  3. Compruebe también los estados :hover, :focus y desactivado si tienen texto con información. Puede forzarlos con «:hov».

Colour Contrast Analyser (TPGi)

  1. Use el cuentagotas sobre el color del texto y sobre el fondo que hay justo detrás de las letras.
  2. En textos sobre imágenes o degradados, mida en la zona menos favorable: el fondo más claro bajo texto claro o el más oscuro bajo texto oscuro.
  3. Tenga en cuenta el tamaño. Desde 24 px (18 pt), o 18,5 px (14 pt) en negrita, basta 3:1.

Validación automática

  1. La regla color-contrast de axe DevTools y los «Contrast Errors» de WAVE detectan este caso cuando el texto y el fondo son colores CSS planos.
  2. No miden bien el texto sobre imágenes, degradados, transparencias o pseudoelementos, ni el texto dentro de imágenes. En esos casos hay que revisarlo a mano.

Errores frecuentes en auditorías

  • Textos de ayuda, marcadores de posición (placeholder) y precios antiguos tachados en grises claros, como #999 o #aaa.
  • Botones con texto blanco sobre un color corporativo claro (azul, verde o naranja) sin medir el contraste.
  • Textos sobre fotografías o carruseles sin un velo ni un fondo detrás de las letras.
  • Medir solo el estado normal y olvidar el paso del ratón o el foco, donde cambia el color del texto.

Para saber más, en nuestro blog

Ver el texto completo del W3C (traducción al español)

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. Para el criterio de conformidad 1.4.3, esta técnica describe la relación de contraste mínima para el texto de menos de 18 puntos (si no es negrita) y de menos de 14 puntos (si es negrita). Para el criterio de conformidad 1.4.6, esta técnica relaja el requisito de relación de contraste de 7: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 luminancia relativa del texto puede mantenerse asegurándose de que cada una de las letras del texto tenga una relación de contraste de 4.5: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 4.5:1 con el fondo situado inmediatamente detrás de ellas, aunque no tengan esa relación de contraste con el fondo completo.

Por ejemplo, si una letra es más clara en la parte superior que en la inferior, puede resultar difícil mantener la relación de contraste entre la letra y el fondo en toda la letra. En ese caso, el diseñador podría oscurecer el fondo situado detrás de la letra o añadir un contorno negro fino (de al menos un píxel de anchura) alrededor de la letra para mantener la relación de contraste entre la letra y el fondo por encima de 4.5:1.

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.

Por ejemplo, si una página es muy clara en un borde y se va oscureciendo hasta ser muy oscura en el borde opuesto, no existe ningún color que pueda recorrer toda la página y cumplir las pautas de contraste en ambos bordes. Una forma de resolverlo sería cambiar también la claridad de las letras, de modo que cada letra cumpla siempre la relación de contraste respecto al fondo situado inmediatamente detrás de ella.

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, 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 4.5:1 con el texto negro escrito sobre la fotografía.

    Consulte también las muestras de contraste en los recursos relacionados.

Pruebas

Procedimiento

  1. 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.

  2. Medir la luminancia relativa de los píxeles del fondo inmediatamente contiguos a la letra utilizando la misma fórmula.

  3. 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.
  4. Comprobar que la relación de contraste es igual o superior a 4.5: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

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.

Solicitar una auditoría

Basado en la técnica G18 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.