El contraste entre el color del texto y el color del fondo es uno de los aspectos más verificables de la accesibilidad web. Las pautas WCAG 2.1, publicadas por el W3C, establecen valores mínimos de ratio de contraste que permiten distinguir el texto con suficiente claridad, especialmente para personas con baja visión o deficiencias en la percepción del color.

Criterios de éxito relevantes en WCAG 2.1

El criterio 1.4.3 de WCAG 2.1 define el contraste mínimo para texto e imágenes de texto. El criterio 1.4.6 establece un umbral más exigente para el nivel AAA. Adicionalmente, el criterio 1.4.11 se aplica a componentes de interfaz y gráficos informativos.

Criterio 1.4.3 — Contraste (mínimo) — Nivel AA

  • Texto normal (menor de 18pt o 14pt negrita): ratio mínimo 4,5:1
  • Texto grande (18pt o superior, o 14pt en negrita): ratio mínimo 3:1
  • Texto decorativo e inactivo: sin requisito
  • Logotipos: sin requisito

Criterio 1.4.11 — Contraste en componentes — Nivel AA

  • Componentes de interfaz (botones, campos de formulario, pestañas): ratio mínimo 3:1 entre el color del componente y el fondo adyacente
  • Gráficos informativos (líneas de un gráfico, iconos sin texto): ratio mínimo 3:1

Cómo se calcula el ratio de contraste

El ratio de contraste se calcula a partir de la luminancia relativa de los dos colores implicados, según la fórmula definida en las definiciones técnicas de WCAG. El resultado es un número entre 1:1 (sin contraste, colores idénticos) y 21:1 (máximo contraste, negro sobre blanco).

Para verificar el contraste de una combinación concreta de colores, el W3C mantiene herramientas de evaluación de acceso libre, como el procedimiento descrito en la técnica G18. Existen también herramientas de terceros como el Contrast Checker de WebAIM o el módulo de accesibilidad de las herramientas para desarrolladores de navegadores modernos.

Deficiencias en la visión del color y su relevancia práctica

Diagrama de líneas de confusión de color para los diferentes tipos de daltonismo: protanopia, deuteranopia y tritanopia
Líneas de confusión cromática en los principales tipos de daltonismo. Fuente: Wikimedia Commons / CC BY-SA

Las deficiencias en la visión del color afectan a un porcentaje significativo de la población. El tipo más habitual es la deuteranopia (dificultad para distinguir rojo y verde), presente predominantemente en hombres. Las pautas WCAG no exigen diseñar en escala de grises, pero sí que el contraste entre fondo y texto sea suficiente con independencia de la percepción cromática del usuario.

Un error común es confiar en el color como único medio de transmitir información. Por ejemplo, indicar errores en formularios únicamente con texto rojo, sin acompañarlo de un icono o un texto descriptivo, vulnera el criterio 1.4.1 de WCAG (uso del color).

Aplicación en el contexto normativo español

El Real Decreto 1112/2018, de accesibilidad de sitios web del sector público en España, exige el cumplimiento de WCAG 2.1 nivel AA. El organismo de supervisión en España es el Centro de Transferencia de Tecnología (CTT) del Ministerio de Asuntos Económicos y Transformación Digital, que publica informes periódicos sobre el grado de cumplimiento.

Para sitios del sector privado no existe obligación legal directa, aunque el cumplimiento de WCAG 2.1 AA es la práctica recomendada en el sector y puede ser exigida en determinadas contrataciones públicas o para obtener certificaciones de accesibilidad.

Herramientas de evaluación de contraste

Algunos recursos de acceso libre para verificar ratios de contraste:

El contraste no es solo una métrica técnica: es la diferencia entre un contenido legible y uno que excluye a parte de los usuarios antes de que puedan leer la primera frase.

Resumen práctico

Para cumplir el nivel AA de WCAG 2.1 en materia de contraste, los sitios informativos deben asegurarse de que:

  • El texto de cuerpo tiene un ratio de contraste mínimo de 4,5:1 sobre el fondo.
  • Los títulos y texto grande mantienen al menos 3:1.
  • Los bordes de campos de formulario, botones y otros componentes interactivos alcanzan 3:1 respecto al fondo adyacente.
  • Ningún elemento informativo se distingue exclusivamente por el color.