Hay gente que activa el modo oscuro y acaba leyendo peor que antes. No es cosa suya: el texto blanco sobre fondo negro produce un efecto de halo alrededor de las letras que el ojo con astigmatismo no consigue enfocar del todo. Y el astigmatismo no es una rareza. Una revisión sistemática con metaanálisis publicada en Journal of Current Ophthalmology estimó una prevalencia global del 40,4 % en adultos, con un intervalo de confianza del 95 % entre 34,3 y 46,6. Cuatro de cada diez visitantes, y ninguna guía de accesibilidad habla de ellos.
Qué es la halación y por qué aparece de noche
El astigmatismo distorsiona el enfoque porque la córnea no es del todo esférica, y esa distorsión se nota más cuanto más abierta está la pupila. En una pantalla clara, la pupila se cierra y el defecto queda disimulado. En una pantalla oscura, se abre para captar luz y los pocos píxeles brillantes, que son justo las letras, se desbordan sobre el fondo. De ahí que el mismo texto se lea bien de día y emborronado por la noche.
Conviene el matiz: no le pasa a todo el mundo con astigmatismo, y el modo oscuro sí ayuda a otros perfiles, como quien tiene fotofobia o migrañas. Por eso la conclusión no es quitar el tema oscuro, sino suavizarlo y dejar elegir.
Un modo oscuro que no deslumbra
El arreglo consiste en bajar los dos extremos: ni blanco puro ni negro puro. Un gris muy claro sobre un gris muy oscuro mantiene un contraste de sobra para cumplir las WCAG y reduce bastante el halo.
:root {
--texto: #1F2430; /* en vez de #000 */
--fondo: #FAFAF8; /* en vez de #FFF */
}
@media (prefers-color-scheme: dark) {
:root {
--texto: #E4E6EB; /* en vez de #FFF */
--fondo: #1A1C20; /* en vez de #000 */
}
body { font-weight: 350 } /* el texto claro sobre oscuro engorda */
}El ajuste de grosor del último bloque responde a un efecto óptico real: un texto claro sobre fondo oscuro parece más grueso que el mismo texto en negativo. Bajar un punto el peso de la fuente en modo oscuro compensa esa ganancia y afina los contornos.
Espaciado: las cifras que pide la norma
Cuando las letras se desbordan, el espacio entre ellas es lo que permite distinguirlas. El criterio 1.4.12 de las WCAG, de nivel AA, fija los valores que el diseño tiene que aguantar sin romperse si el usuario los fuerza desde el navegador:
- Altura de línea: al menos 1,5 veces el tamaño de la fuente.
- Separación entre párrafos: al menos 2 veces el tamaño de la fuente.
- Espaciado entre letras: al menos 0,12 veces el tamaño de la fuente.
- Espaciado entre palabras: al menos 0,16 veces el tamaño de la fuente.
El criterio no obliga a aplicar esos valores, obliga a que la maqueta siga funcionando cuando alguien los aplica por su cuenta. La forma de comprobarlo es forzarlos en el inspector y ver si el texto se sale de las cajas o se solapa. Es una prueba de dos minutos que descarta media docena de problemas.
A eso conviene sumar una anchura de línea contenida, en torno a 65 o 75 caracteres, que se declara con max-width: 70ch. Las líneas largas obligan a recorrer con la vista un trayecto en el que el ojo con astigmatismo se pierde con más facilidad al saltar de renglón.
Tipografía: trazo uniforme y letras que no se confunden
Las sans serif de trazo uniforme se leen mejor porque hay menos variación de grosor que interpretar. Las decorativas y las manuscritas complican la lectura por el motivo contrario. Más allá de la familia, importa que la fuente no tenga pares ambiguos: la I mayúscula, la l minúscula y el 1 se confunden en muchas tipografías geométricas, igual que el 0 con la O.
Las mayúsculas sostenidas, las cursivas largas y los subrayados decorativos restan claridad cada uno por su lado, y sumados convierten un párrafo en un ejercicio. Y un texto por debajo de 16 píxeles en el cuerpo obliga a acercarse a la pantalla, que es la señal de que algo está mal dimensionado.
Dejar elegir, en la propia web
Cada persona con astigmatismo necesita un ajuste distinto según el grado, la fatiga y la luz de la habitación, así que el control vale más que cualquier ajuste impuesto. Respetar prefers-color-scheme es el mínimo, pero ofrecer el selector de tema en la interfaz evita que alguien tenga que cambiar la configuración de todo el sistema operativo para leer un artículo. Lo mismo con el tamaño de texto: usar unidades relativas en lugar de píxeles fijos hace que el zoom del navegador funcione de verdad.
Y después de todo eso, la prueba que ninguna herramienta sustituye: que lo lea alguien con astigmatismo y cuente qué le cuesta. Un validador de contraste da luz verde a un blanco puro sobre negro puro, que es justo el caso que estamos intentando evitar.
Si quieres seguir por necesidades que las guías estándar tampoco cubren, en UX para usuarios neurodivergentes está el mismo enfoque aplicado a otro perfil, y el proceso completo de revisión está en cómo hacer una auditoría de accesibilidad.
Preguntas frecuentes
¿Por qué el modo oscuro me cansa la vista?
Porque con poca luz la pupila se abre y el defecto de enfoque del astigmatismo se nota más. El texto claro sobre fondo oscuro desborda entonces sus contornos, un efecto conocido como halación. No le ocurre a todo el mundo, pero es frecuente.
¿Qué colores funcionan mejor?
Evitar los extremos. Un gris muy oscuro sobre fondo casi blanco en el tema claro, y un gris claro sobre gris oscuro en el tema oscuro, en lugar de blanco y negro puros. Se mantiene el contraste que exigen las WCAG y se reduce el halo.
¿Cuánta gente tiene astigmatismo?
Una revisión sistemática con metaanálisis publicada en Journal of Current Ophthalmology estimó una prevalencia global del 40,4 % en población adulta, con un intervalo de confianza del 95 % entre 34,3 y 46,6.
¿Qué espaciado de texto pide la norma?
El criterio 1.4.12 de las WCAG, de nivel AA, marca altura de línea de 1,5 veces el tamaño de fuente, separación entre párrafos de 2 veces, 0,12 entre letras y 0,16 entre palabras. No hay que aplicarlos, hay que aguantarlos sin que se rompa la maqueta.
¿Basta con cumplir las WCAG?
No del todo. Las WCAG fijan un contraste mínimo, pero no un máximo, así que un blanco puro sobre negro puro pasa la validación siendo justo la combinación que más molesta a este perfil.
Fuentes
- Hashemi H, Fotouhi A, Yekta A, Pakzad R, Ostadimoghaddam H, Khabazkhoob M. Global and regional estimates of prevalence of refractive errors: systematic review and meta-analysis. Journal of Current Ophthalmology, 2017.
- W3C WAI, Understanding SC 1.4.12 Text Spacing
