Verificador de contraste (WCAG)

Un ratio de contraste insuficiente entre texto y fondo dificulta la lectura para personas con baja visión o daltonismo. Las pautas WCAG 2.1 (Web Content Accessibility Guidelines) del W3C definen los niveles mínimos de contraste para que un sitio sea accesible. Ingresa los colores HEX de tu texto y tu fondo para saber si cumples los estándares.

Resultado

  • Ratio de contraste
    19.64 : 1
  • AA texto normal (≥4.5)
    ✓ Pasa
  • AA texto grande (≥3)
    ✓ Pasa
  • AAA texto normal (≥7)
    ✓ Pasa

Hecho con LDX Software · ldxsoftware.com.pe

¿Qué es el ratio de contraste WCAG?

El ratio de contraste es una relación numérica entre la luminancia relativa de dos colores, que va de 1:1 (mismo color, sin contraste) a 21:1 (blanco sobre negro, máximo contraste). Lo define la fórmula: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia más alta. WCAG 2.1 establece tres niveles: A (mínimo), AA (estándar) y AAA (mejorado). El nivel AA es el más exigido en normativas de accesibilidad web.

Umbrales WCAG AA y AAA

Nivel AA — texto normal (menos de 18pt / 14pt negrita): ratio ≥ 4.5:1. Nivel AA — texto grande (18pt o más, o 14pt en negrita): ratio ≥ 3:1. Nivel AAA — texto normal: ratio ≥ 7:1. Nivel AAA — texto grande: ratio ≥ 4.5:1. Componentes de interfaz y gráficos informativos: ratio ≥ 3:1 (solo AA). Texto decorativo sin información no está sujeto a estos requisitos.

Ejemplo: texto blanco sobre fondo azul

Color de texto: #FFFFFF (blanco). Color de fondo: #1D4ED8 (azul Tailwind blue-700). Luminancia del blanco: 1.0. Luminancia del azul: ≈ 0.0987. Ratio = (1.0 + 0.05) / (0.0987 + 0.05) ≈ 7.12:1. Resultado: pasa WCAG AA y AAA para texto normal. Si usaras blue-400 (#60A5FA) como fondo, el ratio cae a ≈ 3.1:1 y solo pasaría AA para texto grande.

Cómo mejorar el contraste en tu diseño

Oscurece el color de fondo o aclara el texto hasta alcanzar el ratio objetivo. En HSL, reducir la L del fondo o aumentar la L del texto suele ser suficiente. Evita pares de colores complementarios saturados (ej. rojo sobre verde): tienen ratio bajo aunque parezcan "contrastados" visualmente. Para grises, busca diferencias de luminosidad de al menos 50 puntos en HSL. Usa este verificador durante el diseño, no solo al final.

Preguntas frecuentes

¿WCAG 2.1 es obligatorio por ley?

En muchos países sí, especialmente para sitios de organismos públicos y servicios esenciales. En Perú, el Decreto Legislativo 1412 (Gobierno Digital) y la Ley 29973 de personas con discapacidad establecen principios de accesibilidad digital. En la UE, la Directiva de Accesibilidad Web exige cumplimiento de WCAG 2.1 nivel AA para el sector público. Para el sector privado la exigencia varía, pero es una buena práctica de diseño inclusivo.

¿El ratio de contraste aplica a imágenes?

Las imágenes de texto sí deben cumplir los mismos ratios que el texto real. Las imágenes decorativas sin información están exentas. Si pones texto encima de una fotografía, debes calcular el contraste entre el texto y la parte de la imagen donde aparece (normalmente el área más clara o más oscura).

¿Qué diferencia hay entre WCAG 2.1 y WCAG 3.0?

WCAG 3.0 (en borrador) propone reemplazar el ratio de contraste actual por el modelo APCA (Accessible Perceptual Contrast Algorithm), que considera el tamaño y peso de la fuente de forma más matizada. Mientras WCAG 3.0 se finaliza, WCAG 2.1 nivel AA sigue siendo el estándar de referencia vigente.

¿Puedo usar un color semitransparente y verificar el contraste?

Esta herramienta trabaja con colores opacos en HEX. Para transparencias, primero calcula el color resultante al combinar el color semitransparente con el fondo (mezcla alpha), obteniendo un HEX opaco equivalente, y luego verifica ese color resultante.

Más de Diseño

Conversor de color HEX / RGB / HSLConversor de px a rem

Herramienta gratuita de LDX Software. Resultados referenciales; verifica siempre con la fuente oficial.