Configura preferencias visuales y opciones de accesibilidad para personalizar tu experiencia en SupportRetriever.
Resumen
La sección Apariencia en Ajustes permite personalizar el aspecto y el comportamiento de la interfaz, con opciones de accesibilidad para usuarios con distintas necesidades.
Acceder a la configuración de apariencia
- Ve a Ajustes desde el menú lateral
- Baja hasta la sección Apariencia
- Ajusta cualquier opción a tu gusto
- Los cambios se aplican al instante y se guardan solos
Configuración del tema
Temas disponibles
Modo claro
- Fondo crema y luminoso
- Texto oscuro para buena legibilidad
- Interfaz diurna tradicional
Modo oscuro
- Fondos oscuros que reducen la fatiga visual
- Texto claro para ver de noche
- Ahorro de batería en pantallas OLED
Sistema (recomendado)
- Se adapta a la configuración de tu dispositivo
- Cambia entre claro/oscuro según la hora
- Experiencia coherente en todos los dispositivos
Cómo cambiar el tema
- Haz clic en el tema que prefieras: Claro, Oscuro o Sistema
- La interfaz se actualiza al instante
- La preferencia se guarda en tu cuenta
- Se sincroniza en todos tus dispositivos
Tamaño de fuente
Ajusta el tamaño del texto para una lectura cómoda en toda la aplicación.
Tamaños disponibles
| Tamaño | Texto base | Uso |
|---|---|---|
| Pequeño | 14px | Vista compacta, más contenido |
| Por defecto | 16px | Tamaño web estándar, equilibrado |
| Grande | 20px | Lectura cómoda, menos esfuerzo visual |
| Extra grande | 24px | Máxima accesibilidad, ayuda visual |
Qué se escala
Al cambiar el tamaño de fuente, todo escala de forma proporcional:
- Texto y párrafos
- Títulos y encabezados
- Botones y campos de formulario
- Navegación y menús
- Mensajes de conversación
- Estadísticas y gráficos
- Etiquetas e inputs del formulario
Cómo ajustar el tamaño
- Haz clic en el tamaño que prefieras: Pequeño, Por defecto, Grande o Extra grande
- Todo el texto de la app se escala al instante
- La opción se guarda automáticamente
- Funciona en todas las páginas (admin, conversaciones, formularios, estadísticas)
Modos de visión del color
Paletas pensadas para usuarios con daltonismo o preferencias visuales.
Modos disponibles
Colores estándar
- Esquema de color por defecto de SupportRetriever
- Verde menta principal, tonos tierra
- Adecuado para la mayoría
Protanopia (ciegos al rojo)
- Afecta a ~1 % de hombres
- Paleta azul/naranja/morado
- Evita combinaciones rojo/verde
- Distinción clara entre éxito y error
Deuteranopia (ciegos al verde)
- Afecta a ~1 % de hombres
- Misma paleta que Protanopia (azul/naranja)
- Formularioa más común de daltonismo
- Optimizado para claridad y seguridad
Tritanopia (ciegos al azul)
- Muy poco frecuente (~0,001 %)
- Paleta magenta/verde azulado
- Contraste cálido vs frío
- El azul se evita (se ve gris)
Alto contraste
- Máxima legibilidad en cualquier condición
- Cumple WCAG AAA
- Negro/blanco puro con colores fuertes
- Útil para baja visión o luz solar intensa
- Funciona en tema claro y oscuro
Cómo cambian los colores
Cada modo ajusta:
- Colores de acción principal (botones, enlaces)
- Indicadores de éxito
- Mensajes de error
- Avisos
- Elementos de la interfaz en toda la app
Elegir modo de color
- Haz clic en el desplegable Modo de visión del color
- Elige el modo que prefieras
- Los colores se actualizan al instante
- Navega por cualquier página para ver los cambios
- La opción se sincroniza en todos los dispositivos
Altura de línea
Controla el espacio entre líneas para mejorar la legibilidad.
Cómo funciona
- Por defecto: 1,0x (estándar)
- Rango: 0,8x (más compacto) a 1,5x (más espaciado)
- Incrementos de 0,1 para afinar
Cuándo ajustar
Aumentar (1,2x - 1,5x) para:
- Dislexia o dificultades de lectura
- Sesiones largas de lectura
- Menos fatiga visual
- Mejor enfoque línea a línea
Reducir (0,8x - 0,9x) para:
- Preferencia de vista compacta
- Ver más contenido a la vez
- Escaneo de información densa
Cómo ajustar
- Arrastra el control Altura de línea a izquierda o derecha
- Los cambios se ven en tiempo real
- Suelta para guardar automáticamente
- Haz clic en Restablecer para volver a 1,0x
Espaciado entre letras
Controla el espacio entre caracteres para mejorar la legibilidad.
Cómo funciona
- Por defecto: 1,0x (estándar)
- Rango: 0,8x (más compacto) a 1,5x (más amplio)
- Incrementos de 0,1 para precisión
Cuándo ajustar
Aumentar (1,2x - 1,5x) para:
- Apoyo a la dislexia
- Dificultades para distinguir caracteres
- Mejor distinción de palabras
- Menos aglomeración visual
Reducir (0,8x - 0,9x) para:
- Preferencia de texto compacto
- Más texto en pantalla
- Preferencia visual personal
Cómo ajustar
- Arrastra el control Espaciado entre letras
- Los cambios se aplican al instante
- Suelta para guardar automáticamente
- Haz clic en Restablecer para volver al valor por defecto
Combinar opciones
Todas las opciones de accesibilidad se pueden combinar.
Ejemplos
Máxima legibilidad:
- Tamaño de fuente: Extra grande
- Altura de línea: 1,4x
- Espaciado entre letras: 1,3x
- Resultado: texto espaciado y fácil de leer
Apoyo a la dislexia:
- Tamaño: Grande o Extra grande
- Altura de línea: 1,3x - 1,5x
- Espaciado entre letras: 1,2x - 1,4x
- Modo de color: Alto contraste (opcional)
Daltonismo:
- Elige el Modo de visión del color adecuado
- Combínalo con tamaño y espaciado que prefieras
- Funciona en tema claro y oscuro
Vista compacta:
- Tamaño: Pequeño
- Altura de línea: 0,9x
- Espaciado entre letras: 0,9x
- Más contenido, menos desplazamiento
Guardado automático
Todas las opciones de apariencia:
- Se guardan al cambiar
- Se sincronizan en todos tus dispositivos
- Persisten al cerrar/abrir sesión
- Se aplican antes de cargar la página (sin parpadeo)
- Funcionan sin conexión (guardadas localmente)
Sincronización entre dispositivos
Tus preferencias te siguen:
- Ordenadores de escritorio
- Móviles
- Tablets
- Distintos navegadores (con sesión iniciada)
- Dispositivos compartidos (tras iniciar sesión)
Estándares de accesibilidad
Las opciones de accesibilidad de SupportRetriever cumplen:
- WCAG 2.1 (Directrices de accesibilidad al contenido web)
- Requisitos de Section 508
- Estándares ADA (Americans with Disabilities Act)
Cumplimiento concreto
- Escalado de fuente: hasta 150 % (nivel AA de WCAG)
- Alto contraste: ratio de texto 7:1 (nivel AAA de WCAG)
- Independencia del color: la información no depende solo del color
- Accesible por teclado: todos los controles funcionan sin ratón
Probar tus opciones
Tras cambiar opciones, prueba en distintas páginas:
- Panel de administración: Legibilidad de la lista de conversaciones
- Conversaciones: Que el texto de los mensajes sea cómodo
- Estadísticas: Que gráficos y números se vean claros
- Formularioularios: Visibilidad de los campos
- Móvil: Que las opciones funcionen en teléfono o tablet
Restablecer valores por defecto
Para restablecer todas las opciones de apariencia:
- Tema: Elige Sistema
- Tamaño de fuente: Elige Por defecto
- Modo de color: Elige Colores estándar
- Altura de línea: Haz clic en Restablecer (1,0x)
- Espaciado entre letras: Haz clic en Restablecer (1,0x)
Los cambios se aplican al instante.
Solución de problemas
Las opciones no se guardan
Problema: Los cambios se revierten al actualizar
Soluciones:
- Comprueba que el navegador permita localStorage
- Desactiva el modo privado/incógnito
- Borra la caché del navegador
- Prueba otro navegador
- Contacta con soporte si persiste
El texto es demasiado grande o pequeño
Problema: No encuentras un tamaño cómodo
Soluciones:
- Prueba Grande (20px) como punto medio
- Ajusta la altura de línea por separado
- Usa el zoom del navegador como complemento
- Combina con el espaciado entre letras
Los colores no cambian
Problema: El modo de color no parece aplicarse
Soluciones:
- Comprueba que el desplegable muestre tu selección
- Prueba cambiar entre tema claro y oscuro
- Actualiza la página
- Borra la caché del navegador
- Algunos elementos pueden no usar indicadores de color
Problemas de rendimiento
Problema: La app va lenta tras los cambios
Soluciones:
- El tamaño Extra grande puede afectar al renderizado
- Prueba Grande en lugar de Extra grande
- Reduce altura de línea y espaciado entre letras
- Reinicia el navegador
- Cierra pestañas que no uses
Buenas prácticas
Uso diario
- Empieza con tamaño Por defecto y ajusta si hace falta
- Usa el tema Sistema para que cambie solo de día/noche
- Prueba las opciones primero en las páginas que más uses
- Date tiempo para adaptarte a los cambios
Accesibilidad
- Prioriza la legibilidad frente a meter más contenido
- No dudes en usar Extra grande si lo necesitas
- Combina varias opciones para mejores resultados
- Comparte configuraciones que te funcionen con quien tenga necesidades similares
Equipos
- Las opciones de cada usuario no afectan al resto
- Cada usuario tiene sus preferencias
- Recomienda opciones a los miembros del equipo
- El admin no puede anular las opciones de accesibilidad de un usuario
Temas relacionados
- Acceder a Ajustes
- Actualizar tu perfil
- Entender los planes de suscripción
- Experiencia móvil vs escritorio
- Entender los permisos
Recursos adicionales
Herramientas externas
- Zoom del navegador: Complementa el tamaño de fuente de la app
- Lectores de pantalla: Compatibles con las opciones de accesibilidad
- Simuladores de daltonismo: Prueba cómo se ven los colores
- Accesibilidad del sistema operativo: Combina con las opciones del SO
Más información
- Directrices WCAG: w3.org/WAI/WCAG21/quickref
- Daltonismo: Tipos y efectos
- Recursos sobre dislexia: Tipografía y legibilidad
- Accesibilidad web: Buenas prácticas y estándares