Lección 3 de 10 · 10 min de lectura · Revisado el 26/10/2026
Contraste de texto: 1.4.3 y 1.4.6, cómo se calcula y cómo se mide
Un texto gris claro sobre fondo blanco puede parecer elegante en la pantalla calibrada de un diseñador y resultar ilegible al sol, en un portátil barato o para alguien con baja visión, cataratas o 60 años. El contraste entre texto y fondo es una de las variables más medibles de la accesibilidad y una de las que más se incumplen. Esta lección explica qué exigen las WCAG, cómo se calcula el ratio de contraste y qué herramientas utilizar para comprobarlo.
Qué exigen los criterios
El criterio 1.4.3 Contraste (mínimo), de nivel AA, establece que el texto y las imágenes de texto tienen un ratio de contraste de al menos 4,5:1 respecto a su fondo, con tres excepciones:
- Texto grande: basta 3:1. Se considera grande el texto de al menos 18 puntos (unos 24 píxeles CSS) o 14 puntos en negrita (unos 18,66 píxeles CSS).
- Texto incidental: texto de componentes inactivos (un botón deshabilitado), texto puramente decorativo, texto que no es visible para nadie o texto que forma parte de una imagen con otro contenido visual significativo.
- Logotipos: el texto que forma parte de un logotipo o nombre de marca no tiene requisito.
El criterio 1.4.6 Contraste (mejorado), de nivel AAA, eleva los ratios a 7:1 para texto normal y 4,5:1 para texto grande. No es exigible en la mayoría de normativas (el RD 1112/2018 (PDF, se abre en una ventana nueva) y la EN 301 549 (PDF, se abre en una ventana nueva) piden nivel AA), pero es un objetivo razonable para contenidos de lectura larga o dirigidos a personas mayores.
Cómo se calcula el ratio
El ratio de contraste compara la luminancia relativa de los dos colores (la conociste en la lección anterior), un valor entre 0 (negro) y 1 (blanco) que se obtiene de los componentes RGB con una fórmula que corrige la percepción no lineal del ojo. El ratio es:
(L1 + 0,05) / (L2 + 0,05)donde L1 es la luminancia del color más claro y L2 la del más oscuro. El resultado va de 1:1 (mismo color) a 21:1 (negro puro sobre blanco puro). Algunas referencias útiles:
| Combinación | Ratio aproximado | Cumple AA (texto normal) |
|---|---|---|
| Negro #000000 sobre blanco #FFFFFF | 21:1 | Sí |
| Gris #767676 sobre blanco | 4,54:1 | Sí, justo |
| Gris #777777 sobre blanco | 4,48:1 | No, por poco |
| Gris #999999 sobre blanco | 2,85:1 | No |
| Blanco sobre azul #0056B3 | 7,0:1 | Sí (también AAA) |
| Blanco sobre naranja #FF8C00 | 2,3:1 | No |
El ejemplo del #767676 frente al #777777 ilustra algo importante: el ratio es una medida objetiva con un umbral fijo. Un diseñador no puede «negociar» un 4,4:1; o cumple o no cumple.
Casos que confunden
Texto sobre imágenes o degradados
El contraste se mide contra el fondo real que hay detrás de cada letra. Si el texto está sobre una fotografía, hay que medir en la zona peor (la más clara si el texto es blanco). Soluciones habituales: una capa semitransparente oscura sobre la imagen, una caja de color sólido detrás del texto, o una sombra bien marcada (que cuenta como fondo si rodea las letras).
Texto en enlaces y estados
El contraste se exige en todos los estados: enlace normal, visitado, en hover y con foco. Un enlace azul que pasa a gris claro al pasar el ratón incumple en ese estado.
Marcadores de posición (placeholder)
El texto de placeholder es texto visible y debe cumplir 4,5:1. Los grises claros que se suelen elegir para él (y, según el navegador y su versión, el gris por defecto) no lo cumplen, y es uno de los fallos más comunes en formularios.
Texto deshabilitado
Está exento, pero si el texto deshabilitado es la única forma de leer una información importante (un precio que no se puede cambiar, por ejemplo), replantea el diseño: la exención es para controles inactivos, no para contenido.
Ejemplo
La sede electrónica de un ayuntamiento usa el color corporativo, un verde #4CAF50, para el texto de los enlaces sobre fondo blanco. Ratio: 2,8:1. No cumple. El equipo de diseño oscurece el verde a #2E7D32 (ratio 5,1:1) para el texto y descarta el #4CAF50 incluso como fondo de botones con texto blanco grande (2,8:1, por debajo de 3:1): lo reserva para ilustraciones y elementos decorativos. La identidad corporativa se mantiene; el texto se lee.
Herramientas para medir
- Herramientas de desarrollo del navegador: en Chrome y Edge, al inspeccionar un texto, el selector de color muestra el ratio y si cumple AA y AAA. Firefox incluye un «comprobador de contraste» en el inspector de accesibilidad.
- Colour Contrast Analyser (TPGi): aplicación gratuita para Windows y macOS con cuentagotas; permite medir cualquier cosa en pantalla, incluidas imágenes y PDF.
- WebAIM Contrast Checker: web donde introduces dos colores hexadecimales y obtienes el ratio.
- axe DevTools y WAVE: detectan automáticamente textos con contraste insuficiente, aunque no pueden evaluar texto sobre imágenes o degradados (lo marcan para revisión manual).
- Plugins de Figma (Stark, Contrast, A11y - Color Contrast Checker): para comprobar en la fase de diseño, antes de que exista código.
Error frecuente
Confiar solo en la herramienta automática. axe y WAVE comprueban texto sobre colores sólidos, pero no texto sobre imágenes, degradados, vídeos ni texto dentro de imágenes. Esos casos hay que medirlos a mano con un cuentagotas, y son justo los que más suelen fallar en las cabeceras y banners; los tratamos a fondo en la lección sobre fondos complejos.
Pruébalo tú
Abre en Chrome o Edge la página de inicio de tu ayuntamiento. Haz clic derecho sobre un texto gris (una fecha, un pie de foto, un texto legal) y elige «Inspeccionar». En el panel de estilos, pulsa el cuadradito de color de la propiedad color: el selector muestra el ratio de contraste y si cumple AA y AAA. Repite con el texto de un enlace y con el placeholder de un campo de búsqueda. ¿Alguno no llega a 4,5:1?
Punto clave
4,5:1 para texto normal y 3:1 para texto grande (AA); 7:1 y 4,5:1 (AAA). Es un cálculo objetivo: mide en el fondo real, en todos los estados y también en los placeholders.
Resumen
- 1.4.3 Contraste (mínimo), AA: 4,5:1 texto normal, 3:1 texto grande (24 px o 18,66 px en negrita). Exentos: texto incidental, deshabilitado y logotipos.
- 1.4.6 Contraste (mejorado), AAA: 7:1 y 4,5:1.
- El ratio compara luminancias relativas: (L1 + 0,05) / (L2 + 0,05), de 1:1 a 21:1.
- Mide sobre el fondo real (imágenes, degradados), en todos los estados del enlace y en los placeholders.
- Herramientas: inspector del navegador, Colour Contrast Analyser, WebAIM, axe/WAVE y plugins de Figma.
Comprueba lo que has aprendido
Esta lección se puede leer libremente. Para hacer su test de 3 preguntas, los ejercicios prácticos con páginas reales, guardar tu avance y optar al examen y al certificado, matricúlate en el curso.