Verificador de Contraste

Verificador de Contraste - Herramienta de Accesibilidad WCAG

Un verificador completo de contraste de color que evalúa combinaciones de color de primer plano y fondo contra las pautas WCAG 2.1. Prueba niveles de cumplimiento AA y AAA para texto normal y grande. Esencial para diseñadores, desarrolladores y cualquiera que cree contenido web accesible.

¿Por qué importa la ratio de contraste WCAG AA para mi web?

WCAG 2.1 AA es el referente de accesibilidad citado por la mayoría de leyes de accesibilidad del mundo — la ADA en Estados Unidos, el European Accessibility Act, la Equality Act del Reino Unido y la Section 508 para contratación federal. Fallar el contraste AA (4.5:1 para texto cuerpo, 3:1 para texto grande) significa que lectores con baja visión, degeneración macular relacionada con la edad, daltonismo o simplemente reflejos en la pantalla del móvil no pueden leer tu contenido de forma fiable. También te cuesta dinero: aproximadamente 1 de cada 4 adultos tiene alguna limitación visual funcional, los motores de búsqueda penalizan páginas con baja accesibilidad bajo señales de contenido útil, y las demandas por sitios de comercio inaccesibles han subido año tras año. Tratar AA como el suelo (no el techo) te da seguridad legal, mayor alcance y mejor SEO al mismo tiempo.

¿Cuál es la diferencia entre los niveles WCAG AA y AAA?

AA es el nivel mínimo referenciado legalmente: 4.5:1 de contraste para texto cuerpo normal (menos de 18pt regular o 14pt negrita) y 3:1 para texto grande (18pt regular y mayor, o 14pt negrita y mayor). AAA es el nivel mejorado: 7:1 para texto cuerpo y 4.5:1 para texto grande. AA pretende ser alcanzable preservando la mayoría de decisiones de marca; AAA es para contenido donde la accesibilidad es crítica — servicios gubernamentales, salud, finanzas, educación para mayores. AAA es más difícil porque los colores de marca vibrantes o pasteles rara vez superan 7:1 sobre blanco. La receta pragmática que siguen la mayoría de equipos: apuntar a AA en toda la UI, llevar el cuerpo de texto a AAA cuando sea posible usando negro puro o casi negro sobre superficies blancas puras, y nunca dejar que ningún control activo caiga por debajo de AA.

¿Cómo se calcula exactamente la ratio de contraste?

WCAG usa la fórmula (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 del más oscuro. La luminancia relativa se calcula por píxel: convierte cada canal RGB de 0-255 a fracción 0-1, aplica corrección gamma sRGB (canal / 12.92 si canal ≤ 0.03928, si no ((canal + 0.055) / 1.055)^2.4), luego suma L = 0.2126 R + 0.7152 G + 0.0722 B. Los pesos coinciden con cómo responden las células cono del ojo — el verde domina porque cae en la banda más sensible. La constante 0.05 evita división por cero para negro puro. Negro puro sobre blanco puro da la ratio máxima posible de 21:1; blanco puro sobre blanco da 1:1. Cualquier valor por debajo de 3:1 falla para cualquier tamaño de texto.

¿Y si mi color de marca no pasa — tengo que cambiar la marca?

No — cambias dónde usas el color de marca, no la marca en sí. El patrón que sigue la mayoría de sistemas de diseño: fija el HEX original de marca como token de "marketing" o "decorativo", para logos, fondos hero con texto superpuesto y tipografía display grande donde 3:1 basta. Luego genera derivados accesibles oscureciendo el color de marca hasta superar 4.5:1 sobre blanco (o aclarándolo para temas oscuros), y usa esos derivados para botones, enlaces y texto cuerpo. Tailwind, Material e IBM Carbon entregan rampas emparejadas precisamente por este motivo. Los botones Aclarar y Oscurecer de esta herramienta encuentran el valor más cercano que pasa manteniendo el mismo tono, así que el derivado sigue sintiéndose de marca.

¿Cuándo aplica el umbral de 3:1 en vez de 4.5:1?

Tres situaciones califican para el umbral más bajo de 3:1 bajo WCAG 2.1. Primera, texto grande — definido como al menos 18pt regular (unos 24px) o 14pt negrita (unos 18.5px) — porque las formas de letra más grandes son más fáciles de discriminar. Segunda, componentes UI no textuales como bordes de campos de formulario, contornos de foco, iconos y objetos gráficos (bajo SC 1.4.11): deben alcanzar 3:1 contra colores adyacentes, no 4.5:1. Tercera, texto incidental en logos o decoración pura. Trampas importantes: las etiquetas de botón son texto normal y necesitan 4.5:1 aunque el botón en sí sea grande; el texto placeholder necesita 4.5:1 porque transmite instrucciones; la UI deshabilitada solo está exenta si no se puede interactuar con ella en absoluto. En la duda, apunta a 4.5:1 — cubre la mayoría de casos sin auditorías separadas.

¿Cómo mejoro el contraste sin romper el diseño?

Cinco palancas de bajo riesgo. (1) Oscurece el primer plano en HSL un 10-20% de luminosidad — el tono se mantiene, la marca se siente igual. (2) Pon el texto en negrita: 14pt negrita pasa con 3:1 en vez de 4.5:1, así el peso hace parte del trabajo. (3) Aumenta el tamaño de fuente para cruzar el umbral de texto grande (18pt regular o 14pt negrita) y la ratio requerida baja. (4) Añade un fondo sólido sutil bajo el texto en vez de colocarlo sobre un degradado o imagen cargada — capas de superposición (un velo rgba(0,0,0,0.55)) restauran contraste consistente en secciones enteras. (5) Usa un par de colores completamente distinto para el emparejamiento que falla, aunque el resto de la paleta conserve los colores de marca — por ejemplo, usa el teal de marca para fondos pero pizarra casi negra para cualquier texto sobre tarjeta blanca.

¿Cómo manejo el contraste sobre degradados, fotos o fondos de vídeo?

Los fondos de imagen y degradado cambian de contraste píxel a píxel, así que el verificador no puede evaluar cada posición automáticamente — debes identificar el peor punto. Tres soluciones estándar: (1) Superpón un color plano semi-transparente entre el fondo y el texto (background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("hero.jpg");) para que el primer plano vea un fondo uniforme; muestrea ese color de fondo combinado en el verificador. (2) Envuelve el texto en una tarjeta opaca con su propio relleno sólido para que nunca toque el medio subyacente. (3) Añade una sombra de texto suave (text-shadow: 0 1px 4px rgba(0,0,0,0.65)) para destacar las formas de las letras de áreas cargadas; las sombras no reemplazan contraste pero elevan la ratio efectiva en la mayoría de monitores. WCAG 2.1 SC 1.4.3 sigue aplicando a la combinación texto-sobre-fondo renderizada, así que prueba en un navegador real, no solo en el archivo de diseño.

¿APCA (el algoritmo propuesto para WCAG 3) hace obsoletos estos resultados?

No para el cumplimiento actual. APCA (Accessible Perceptual Contrast Algorithm) es un modelo perceptual sensible a polaridad que se explora para WCAG 3, que sigue en borrador y aún no se referencia legalmente en ningún sitio. WCAG 2.1 y 2.2 — ambas usan la fórmula simple de ratio de luminancia que implementa esta herramienta — siguen siendo el estándar activamente citado en leyes, casos judiciales y directrices de contratación hasta 2026 y casi con seguridad más allá. APCA sí corrige limitaciones reales: la fórmula 2.x infrapondera los contrastes de tonos medios grises y trata claro-sobre-oscuro de manera idéntica a oscuro-sobre-claro aunque el ojo los perciba diferente. La receta pragmática hoy: usa ratios WCAG 2.1 para cumplimiento (esta herramienta), previsualiza también el cuerpo de texto con valor APCA si tu sistema de diseño lo soporta (Sass-WCAG o APCA online), y revisa una vez que WCAG 3 alcance estatus de Candidate Recommendation.

Características Clave

• Cálculo de ratio de contraste en tiempo real
• Verificación de cumplimiento WCAG 2.1 AA
• Verificación de cumplimiento WCAG 2.1 AAA
• Contraste de texto normal (4.5:1, 7:1)
• Contraste de texto grande (3:1, 4.5:1)
• Vista previa en vivo de combinaciones
• Indicadores Pasa/Falla para cada nivel
• Selectores de color interactivos
• Ajuste de color Aclarar/Oscurecer
• Sugerir colores similares que pasen
• Combinaciones predefinidas de alto contraste
• Cálculo de luminancia relativa
• Procesamiento 100% del lado del cliente