🎨Calculadora de contraste de color accesibilidad WCAG

¿Qué es el contraste de color WCAG y por qué importa?

Las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C establecen un ratio mínimo de contraste entre el color del texto y su fondo, para garantizar que el contenido sea legible por personas con baja visión, daltonismo, o simplemente al usar una pantalla con mucho brillo ambiental al aire libre. Un contraste insuficiente no es solo un problema estético — en muchos países es un requisito legal de accesibilidad web (como la Ley ADA en EE. UU. o la Directiva de Accesibilidad Web en la UE). Esta calculadora de contraste WCAG resuelve el ratio exacto entre dos colores al instante, algo que a simple vista es imposible de estimar con fiabilidad.

¿Cómo se calcula el ratio de contraste?

El resultado es un ratio entre 1:1 (sin contraste, mismo color) y 21:1 (contraste máximo, negro puro sobre blanco puro). WCAG define umbrales distintos según el nivel de conformidad y el tamaño del texto: AA exige 4,5:1 para texto normal y 3:1 para texto grande (≥24px, o ≥18,66px en negrita); AAA, el nivel más estricto, exige 7:1 para texto normal y 4,5:1 para texto grande.

Guía paso a paso: cómo comprobar el contraste de tus colores

1) Introduce el "Color del Texto" y el "Color de Fondo", en HEX o usando el selector visual. 2) Ajusta el tamaño y grosor de fuente si tu texto es grande o está en negrita, ya que el umbral exigido cambia según esto. 3) Obtén el ratio exacto, el nivel de accesibilidad alcanzado (AA/AAA) y una vista previa en vivo del texto sobre el fondo elegido. Si tu color no cumple el nivel deseado, cambia al Modo 2: Sugerir Color Accesible para que la herramienta ajuste automáticamente el color hasta alcanzar el objetivo.

Modo 2: sugerencia automática de color accesible

Cuando un color no cumple el contraste mínimo, ajustarlo a mano por prueba y error es lento. El Modo 2 de esta calculadora detecta automáticamente si conviene oscurecer o aclarar tu color de partida (comparando el contraste que obtendrías con negro puro frente a blanco puro sobre tu mismo fondo), y luego ajusta gradualmente su luminosidad —manteniendo el mismo tono y saturación originales, para que el resultado siga pareciéndose a tu color de marca— hasta alcanzar el nivel de contraste que elijas.

Casos de uso: cuándo verificar el contraste de color

Verificar el contraste es imprescindible al definir la paleta de colores de una marca antes de aplicarla a texto sobre fondo, al auditar la accesibilidad de un sitio ya existente frente a normativas como la Ley ADA o el estándar EN 301 549, al diseñar estados de botones e inputs (hover, disabled, focus) que deben seguir siendo legibles, y al preparar informes de accesibilidad para clientes o equipos internos. Si además necesitas trabajar con transparencia en tus colores de texto o fondo, la calculadora de opacidad de color HEX te permite calcular primero el color resultante antes de comprobar su contraste real.

Errores comunes al evaluar contraste de color

El error más frecuente es confiar en la percepción visual en lugar de calcular el ratio real — dos colores pueden parecer suficientemente distintos a simple vista y aun así no alcanzar el 4,5:1 exigido por AA. Otro error habitual es no tener en cuenta el tamaño del texto: un mismo par de colores puede cumplir el umbral para texto grande (títulos) pero fallar para texto normal (párrafos), por lo que hay que verificar cada contexto por separado. Y un tercer error: aplicar contraste suficiente solo al texto principal, olvidando elementos secundarios como placeholders, texto deshabilitado o iconos informativos, que también deben cumplir un umbral mínimo (3:1 para componentes no textuales según WCAG 2.1).

Herramientas y normativas relacionadas con la accesibilidad de color

El cálculo de contraste que usa esta calculadora sigue exactamente la fórmula publicada por el W3C en las Pautas WCAG 2.1, la misma que emplean herramientas profesionales de auditoría como Lighthouse, axe DevTools o WAVE — por lo que un resultado que aprueba aquí también debería aprobar en esas herramientas. Un consejo profesional: no te limites a comprobar el color de texto principal; revisa también los estados de foco (outline), los mensajes de error en formularios (a menudo en rojo sobre blanco, un contraste que conviene verificar) y el texto sobre imágenes de fondo, donde el contraste real depende de la zona más clara u oscura de la imagen bajo el texto, no solo del color declarado en CSS.

Preguntas Frecuentes (FAQ)