# Contraste de color: texto legible para todos

[Canonical HTML page](https://gradiently.design/es/guide/color-contrast-accessibility)

El contraste es la diferencia entre palabras que se leen y palabras que se saltan. Las cifras de WCAG en cristiano, cómo comprobarlas y qué cambia cuando el fondo es un degradado.

## The short version

- El contraste de color es la diferencia de luminosidad entre el texto y su fondo, medida como una relación de 1:1 (sin diferencia) a 21:1 (negro sobre blanco).
- El nivel AA de WCAG 2 pide al menos 4,5:1 para el texto normal y 3:1 para el texto grande, que son unos 24 px en normal o 18,66 px en negrita.
- Los iconos, los bordes de los campos y otras partes de una interfaz que la gente necesita ver también requieren al menos 3:1 frente a lo que las rodea.
- Sobre blanco, `#767676` es el gris liso más claro que supera 4,5:1 para el texto normal, y `#777777` no llega por poco.
- En un degradado, el contraste cambia de un punto a otro, así que hay que probar el peor punto detrás de las palabras, no el color medio.

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](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) y son a lo que se refieren la mayoría de las auditorías y normativas de accesibilidad.

| Qué | Nivel AA | Nivel AAA | Notas |
| --- | --- | --- | --- |
| Texto normal | 4.5:1 | 7:1 | Texto de cuerpo, pies de foto, etiquetas, botones |
| Texto grande | 3:1 | 4.5:1 | Al menos 18 pt (unos 24 px), o 14 pt en negrita (unos 18,66 px) |
| Iconos y partes de la interfaz | 3:1 | 3:1 | Bordes de campos, líneas de gráficos que transmiten significado, iconos sin etiqueta |
| Logos y decoración | Ninguno | Ninguno | Los logotipos de marca y el texto meramente decorativo están exentos |

El nivel AA es el objetivo habitual. El AAA es más estricto y merece la pena en lecturas largas.

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.

```js
// 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
```

El cálculo entero cabe en una docena de líneas. Útil para revisar una paleta de marca en bloque.

No hace falta calcularlo a mano. El [comprobador de contraste de WebAIM](https://webaim.org/resources/contrastchecker/) 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.

| Texto sobre fondo | Relación | Texto normal | Texto grande |
| --- | --- | --- | --- |
| Blanco sobre violeta `#7c3aed` | 5.7:1 | Pasa | Pasa |
| Blanco sobre violeta claro `#8b5cf6` | 4.2:1 | No pasa | Pasa |
| Blanco sobre azul `#2563eb` | 5.2:1 | Pasa | Pasa |
| Blanco sobre azul cielo `#3b82f6` | 3.7:1 | No pasa | Pasa |
| Blanco sobre verde `#10b981` | 2.5:1 | No pasa | No pasa |
| Casi negro `#0b0b10` sobre verde `#10b981` | 7.7:1 | Pasa | Pasa |
| Blanco sobre ámbar `#f59e0b` | 2.2:1 | No pasa | No pasa |
| Gris `#999999` sobre blanco | 2.9:1 | No pasa | No pasa |
| Gris `#6b7280` sobre blanco | 4.8:1 | Pasa | Pasa |

Un pequeño cambio puede decidirlo: dos azules que parecen casi iguales caen a lados opuestos de 4,5:1.

> **Cambia el texto, no la marca** Cuando el blanco no pasa sobre un color de marca brillante, prueba con texto casi negro. El verde, el ámbar y el coral suelen pasar con holgura con tipografía oscura, y el color queda exactamente como está. [Elegir los colores de una marca](https://gradiently.design/es/guide/how-to-choose-brand-colors) explica cómo integrarlo en una paleta desde el principio.

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

De medianoche a violeta y rosa: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

El texto blanco puntúa 18:1 a la izquierda, 5,7:1 sobre el violeta y 2,7:1 en el extremo rosa. Un degradado, tres veredictos.

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

```css
.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;
}
```

El velo oscurece solo donde el degradado se aclara, así que el lado izquierdo queda intacto.

Una publicación vertical donde el titular Abrimos a las siete cruza una zona brillante del degradado y se vuelve difícil de leer

Las palabras pasan justo por la parte más brillante del campo y su contraste cae.

La misma publicación vertical con una zona más oscura y tranquila del degradado detrás del titular, de modo que se lee con claridad

El mismo diseño con la región tranquila y oscura movida detrás de las palabras.

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](https://gradiently.design/es/guide/text-on-gradient) y [texto legible sobre fotos](https://gradiently.design/es/guide/text-over-image). Para interfaces oscuras en concreto, mira [diseñar para modo oscuro](https://gradiently.design/es/guide/dark-mode-design).

## FAQ

### ¿Cuál es una buena relación de contraste de color?

Al menos 4,5:1 para el texto normal y 3:1 para el texto grande cumple el nivel AA de WCAG. Para lecturas largas, 7:1 (nivel AAA) es más cómodo.

### ¿Qué cuenta como texto grande en WCAG?

Texto de al menos 18 puntos, unos 24 px, o de al menos 14 puntos en negrita, unos 18,66 px. El texto grande solo necesita 3:1 en el nivel AA.

### ¿Cuál es el gris más claro que puedo usar sobre blanco?

`#767676` es el gris liso más claro que llega a 4,5:1 sobre blanco. `#777777` mide 4,48:1 y no pasa para el texto normal.

### ¿Tienen los logos que cumplir los requisitos de contraste?

No. WCAG exime al texto que forma parte de un logo o nombre de marca y al texto meramente decorativo. Todo lo que la gente necesita leer o usar sí cuenta.

### ¿Cómo compruebo el contraste sobre un fondo degradado?

Mide el color del texto contra el punto más claro detrás del texto claro, o el más oscuro detrás del texto oscuro. Si ese peor punto pasa, pasa toda la línea.