Contraste · WCAG Actualizado: 19 de junio de 2026

Contraste de color en la web: criterios WCAG y herramientas de verificación

Los umbrales de contraste mínimo establecidos por WCAG 2.1 para texto normal, texto grande y componentes de interfaz, con el procedimiento para calcular el ratio de contraste y las herramientas disponibles para comprobarlo.

Diagrama que muestra los ratios de contraste seguros según las pautas WCAG para contenido web
Diagrama de ratios de contraste web seguros según WCAG. Fuente: Wikimedia Commons, dominio público.

Qué es el contraste de color en accesibilidad web

El contraste de color es la diferencia de luminosidad relativa entre el color del texto y el color del fondo sobre el que se muestra. En el contexto de la accesibilidad web, esta diferencia se expresa mediante un ratio de contraste, que oscila entre 1:1 (sin contraste, mismo color) y 21:1 (máximo contraste, negro sobre blanco).

Un contraste insuficiente dificulta la lectura a personas con visión reducida, daltonismo u otras condiciones visuales. También afecta a usuarios en entornos con iluminación intensa, como pantallas al aire libre bajo luz solar directa.

Criterios de contraste en WCAG 2.1

Las Pautas de Accesibilidad para el Contenido Web 2.1, publicadas por el W3C en 2018, establecen en su criterio de éxito 1.4.3 (Contraste mínimo) los siguientes umbrales:

Nivel AA — Requisito mínimo recomendado

Texto normal (menos de 18 pt o 14 pt en negrita): ratio de contraste mínimo de 4,5:1.
Texto grande (18 pt o superior, o 14 pt en negrita): ratio de contraste mínimo de 3:1.

Nivel AAA — Requisito de contraste mejorado (criterio 1.4.6)

Texto normal: ratio de contraste mínimo de 7:1.
Texto grande: ratio de contraste mínimo de 4,5:1.

Componentes de interfaz y gráficos

El criterio de éxito 1.4.11 (Contraste de componentes de la interfaz de usuario y objetos gráficos), incorporado en WCAG 2.1, exige un ratio de contraste mínimo de 3:1 para los siguientes elementos:

  • Componentes de la interfaz de usuario activos: bordes de campos de formulario, botones, selectores.
  • Partes de gráficos o diagramas necesarias para comprender el contenido (ejes de gráficas, iconos funcionales).

Este criterio no aplica a componentes inactivos (deshabilitados) ni a aquellos cuya presentación esté determinada exclusivamente por el agente de usuario.

Cómo se calcula el ratio de contraste

El ratio de contraste se calcula a partir de la luminancia relativa de cada color, definida en el espacio de color sRGB. El procedimiento es el siguiente:

  1. Convertir cada componente de color (R, G, B) a un valor lineal dividiendo el valor de 8 bits por 255 y aplicando la corrección gamma correspondiente.
  2. Calcular la luminancia relativa L de cada color: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
  3. Calcular el ratio: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia mayor y L2 la menor.

Este cálculo está definido en la especificación WCAG 2.x y es el que utilizan todas las herramientas de verificación de conformidad.

Herramientas de verificación de contraste

Existen diversas herramientas, tanto en línea como integradas en los entornos de desarrollo, que permiten calcular el ratio de contraste de dos colores y verificar su conformidad con los criterios WCAG.

Herramientas en línea

  • WebAIM Contrast Checker (webaim.org): permite introducir dos colores en hexadecimal y obtiene el ratio de contraste con indicación de cumplimiento en los niveles AA y AAA.
  • Accessible Colors (accessible-colors.com): dado un color de texto, sugiere el ajuste mínimo necesario para alcanzar el nivel de conformidad deseado.
  • Colour Contrast Analyser de TPGi: aplicación de escritorio para Windows y macOS que permite seleccionar colores directamente de la pantalla con un cuentagotas.

Herramientas integradas en navegadores

Los navegadores Chrome, Firefox y Edge incluyen en sus herramientas para desarrolladores información sobre el ratio de contraste de los elementos de texto seleccionados. En Chrome DevTools, al inspeccionar el color de un elemento de texto en el panel Styles, se muestra el ratio de contraste junto a un indicador de conformidad con los niveles AA y AAA.

Excepciones al requisito de contraste

WCAG 2.1 establece las siguientes excepciones al criterio de contraste mínimo:

  • Texto decorativo: texto que forma parte de una imagen con contenido visual significativo donde el texto no es necesario para comprender el contenido.
  • Logotipos y marcas comerciales: el texto que forma parte de un logotipo o nombre de marca no tiene requisito de contraste.
  • Componentes inactivos: elementos de interfaz en estado deshabilitado no tienen requisito de contraste.
  • Texto puramente decorativo: texto sin función informativa ni interactiva.

Contraste y diseño de paletas de color

El cumplimiento de los requisitos de contraste WCAG no implica renunciar a la identidad visual de un sitio. Es posible diseñar paletas de color accesibles que mantengan la coherencia visual. Algunas consideraciones prácticas:

  • Los colores oscuros sobre fondo claro suelen ofrecer mejores ratios de contraste que los esquemas de color inverso.
  • Los tonos de color medios (sobre todo en gamas de azul, verde y rojo) tienden a ofrecer un contraste más bajo sobre fondos blancos del esperado visualmente.
  • Al diseñar estados de hover o focus, es importante asegurar que el estado alternativo también cumpla el requisito de contraste.
  • Herramientas como Figma disponen de extensiones (A11y — Color Contrast Checker) que permiten verificar el contraste durante la fase de diseño.

Referencias y fuentes

Actualizado: 19 de junio de 2026