16 · Leer bien cuando más cuesta

Legibilidad

Tamaño, ancho de línea, contraste y área táctil. Aquí se ajustan y se ven los umbrales que Heliodore fija para sus pantallas.

Laboratorio de lectura

El texto de ejemplo es una indicación de llegada para un paciente (ficticia). Cambia los valores y observa cuándo deja de ser cómodo.

Tamaño: Interlineado: Ancho de línea: Contraste Visión cansada:

Cómo llegar a tu cita

Te esperamos el martes 3 de noviembre a las 9:00 a. m. en el Consultorio Ejemplo, piso 2. Entra por la puerta principal y avisa en recepción. Si llegas antes, puedes esperar en la sala del primer piso. Si necesitas cambiar la hora, responde este mensaje y buscamos otra.

Umbrales de Heliodore

Medida	Umbral	Por qué
Texto base	17 px	Lectura cómoda a la distancia de un escritorio y de un teléfono
Texto mínimo	15 px	Solo notas y pies; nunca información clínica o de cita
Interlineado	1,5 a 1,7	WCAG 1.4.12 exige tolerar 1,5 sin pérdida de contenido
Ancho de línea	45 a 75 caracteres	Más largo, el ojo pierde el renglón
Contraste de texto	4,5:1 (AA) · 7:1 en lo principal	Pantallas con reflejos y ojos cansados
Contraste de componentes	3:1	Bordes de campos, íconos con significado, foco
Zoom	hasta 200 %	Sin perder contenido ni desplazar en dos ejes (WCAG 1.4.4)
Objetivo táctil	44 × 44 px	Más exigente que el mínimo AA de WCAG 2.2 (24 px); es la regla de la casa
Separación táctil	8 px	Evita tocar el botón vecino

Objetivos táctiles

Cambia el tamaño del botón. A 44 px o más pasa la regla de la casa; entre 24 y 43 cumple el mínimo de WCAG pero no el de Heliodore.

Tamaño del botón:

Modo de alto contraste

Un modo aparte para quien lo necesita: se activa desde ajustes, no por defecto.

Cita de hoy

9:00 a. m. · Paciente Ejemplo A

Abrir historia

Normal: Solar como acción y bordes suaves.

Cita de hoy

9:00 a. m. · Paciente Ejemplo A

Abrir historia

Alto contraste: negro, blanco, bordes de 2 px y un único acento.

Fondo y texto: Negro puro y blanco puro: 21:1.
Bordes: 2 px sólidos en todos los campos y botones.
Acento: Un solo amarillo (#ffd23f) para foco y acción principal.
Íconos: Siempre con etiqueta visible.
Se respeta: prefers-contrast: more del sistema, además del ajuste manual.