Contraste de color: texto legible para todos

El contraste de color es la diferencia de luminosidad entre el texto y el color que tiene detrás, y decide si la gente puede leer tus palabras. Las Pautas de Accesibilidad para el Contenido Web (WCAG) lo miden como una relación que va de 1:1, donde los dos colores son idénticos, a 21:1, negro sobre blanco. Para el nivel AA, el texto normal necesita al menos 4,5:1 y el texto grande al menos 3:1. Todo lo demás de esta guía trata de alcanzar esas cifras sin volver tímido tu diseño.

El contraste importa a todo el mundo, no solo a las personas con baja visión. Los móviles al sol, los proyectores tenues, los monitores baratos y los ojos cansados reducen la diferencia entre colores. Los diseños con suficiente contraste, sencillamente, se leen más.

Las relaciones de contraste WCAG en palabras sencillas

Tres reglas de WCAG 2 cubren casi todas las decisiones de diseño. Vienen de los criterios de éxito del W3C y son a lo que se refieren la mayoría de las auditorías y normativas de accesibilidad.

Dos detalles pillan a la gente. Primero, «grande» se refiere al tamaño ya renderizado, así que un título de 24 px en un móvil que lo reduce puede dejar de contar como grande. Segundo, un botón desactivado está exento, pero un texto de ejemplo en gris claro que la gente necesita entender no lo está.

Cómo se calcula la relación de contraste

La relación compara la luminancia relativa de los dos colores: cuánta luz emite cada uno, ponderada como la ve el ojo. El verde aporta más, el rojo menos y el azul muy poco, y por eso un azul saturado puede ser sorprendentemente oscuro y un amarillo sorprendentemente claro. La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro.

// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails

No hace falta calcularlo a mano. El comprobador de contraste de WebAIM toma dos códigos hex y te dice qué niveles se superan, y el selector de color de las herramientas de desarrollo de Chrome muestra la relación de cualquier texto que inspecciones.

Pares de colores que pasan y que no

Los colores de marca suelen quedarse en un punto intermedio incómodo, demasiado oscuros para texto oscuro y demasiado claros para texto blanco. Los verdes, naranjas, rosas y azules claros de tono medio son los culpables habituales. Estas son combinaciones comunes, con sus relaciones reales.

Por qué los degradados dificultan el contraste

Un fondo plano tiene una sola relación de contraste. Un degradado tiene una distinta en cada punto. El texto blanco que pasa con facilidad sobre el extremo oscuro de una mezcla puede fallar del todo en el extremo claro, y un titular que se extiende por el degradado aprueba y suspende en la misma línea.

La regla es sencilla: prueba el punto más claro detrás del texto claro, o el más oscuro detrás del texto oscuro. Si el peor punto pasa, pasa toda la línea. Los colores medios y las muestras con el cuentagotas del centro te engañarán.

Cómo arreglar el contraste en un degradado

1. 1

   Lleva las palabras al extremo tranquilo

   Coloca el texto sobre la parte más oscura o más clara del degradado y deja que la transición brillante ocurra lejos de él.

2. 2

   Reduce el rango detrás del texto

   Mantén la parte del degradado que queda detrás de las palabras dentro de un rango pequeño de luminosidad. El resto del lienzo puede ser tan atrevido como quieras.

3. 3

   Añade un velo suave

   Un degradado suave, oscuro o claro, detrás del texto, como uno de transparente a negro al 30%, sube el contraste sin una caja visible.

4. 4

   Hazlo más grande y más grueso

   El texto grande solo necesita 3:1. Un peso más grueso y un tamaño mayor pueden convertir una línea que suspende en una que aprueba.

5. 5

   Prueba en un móvil real

   Comprueba el diseño con el brillo al máximo y con poco brillo, y al aire libre si puedes. Las relaciones son el mínimo, no el objetivo.

.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}

Esta es la idea detrás de la legibilidad de Gradiently: un Mark sabe dónde están tus palabras, mueve detrás de ellas su región más tranquila y de mejor contraste y elige tinta clara u oscura por línea a partir de su propia paleta. Para más técnicas que sirven en cualquier sitio, lee texto sobre un degradado y texto legible sobre fotos. Para interfaces oscuras en concreto, mira diseñar para modo oscuro.