Solución: Error al guardar cambios en un Tipo de Evento por bajo contraste de color

Guía paso a paso para resolver la advertencia de contraste insuficiente (normas WCAG) al personalizar colores de marca en WaclisCAL y lograr guardar tus ajustes visuales exitosamente.

1. Síntoma

Al intentar guardar un nuevo color de marca en la configuración de apariencia o dentro de un Tipo de Evento, el botón Guardar aparece bloqueado o se muestra una alerta en rojo que dice:

"El color seleccionado no cumple con las pautas mínimas de contraste accesible (WCAG AA). Por favor elija un tono más oscuro o con mayor contraste."

2. Causas probables

WaclisCAL implementa por diseño un evaluador automático de accesibilidad web basado en el estándar internacional WCAG 2.1 AA:

1. Color de fondo demasiado claro para texto blanco: Si el color elegido tiene un tono muy luminoso (como amarillo pastel, verde lima claro o celeste pálido), el texto blanco de los botones se vuelve casi invisible.
2. Color con ratio de contraste inferior a 4.5:1: El algoritmo matemático detecta que personas con visión reducida o clientes que reserven en sus teléfonos móviles bajo la luz directa del sol no podrán leer los botones de confirmación.

3. Comprobaciones previas

1. Observa el código hexadecimal del color que intentas aplicar.
2. Comprueba si el selector de color de WaclisCAL muestra una barra de contraste con puntaje inferior a 4.5.
3. Ten a mano una variante ligeramente más oscura o saturada de tu color de marca corporativo.

4. Solución paso a paso

Paso 1: Oscurece ligeramente la luminosidad del color

1. En el selector de color de WaclisCAL, abre la paleta interactiva.
2. Desplaza el cursor de luminosidad ligeramente hacia abajo o hacia la derecha (hacia una tonalidad con mayor profundidad).
3. Ejemplos prácticos de ajuste accesible:

- Si tu color es un amarillo claro (#FACC15), cámbialo a un tono ámbar dorado (#D97706 o #B45309).

- Si tu color es un celeste pálido (#38BDF8), cámbialo a un azul zafiro (#0284C7 o #0369A1).

- Si tu color es un verde lima (#A3E635), cámbialo a un verde bosque o esmeralda (#15803D o #047857).

Paso 2: Observa el indicador de contraste en tiempo real

1. A medida que ajustes el tono, observa el indicador de estado:

- Rojo: Contraste insuficiente (Bloqueado).

- Verde: Contraste óptimo (Aprobado WCAG AA con ratio mayor a 4.5:1).

1. En cuanto el indicador cambie a verde, la advertencia desaparecerá.

Paso 3: Guarda los cambios

1. Haz clic en el botón superior derecho Guardar cambios.
2. El sistema guardará la configuración y aplicará el nuevo color a todos tus servicios.

5. Cómo verificar que quedó resuelto

1. Abre tu página de reservas en tu teléfono móvil o en una ventana de incógnito.
2. Comprueba que el botón principal de confirmación se distinga con fuerza y que el texto interior se lea con total claridad y nitidez.

6. Cuándo escalar el problema

Si el manual de identidad visual estricto de tu empresa exige el uso de un color muy claro que no puede modificarse:

• Consulta con el soporte técnico de Waclis para activar la regla de inversión tipográfica, que fuerza texto en color negro (#000000) sobre fondos claros en lugar de texto blanco, permitiendo cumplir la norma de accesibilidad sin cambiar el color de tu marca.

7. Artículos relacionados

• Personaliza los colores de tu página de reserva con la identidad de tu marca
• Cómo ve tu cliente la página de reservas y cómo reservar en 3 simples pasos
• Configura la duración, nombre y enlace personalizado de tu servicio