Capturas accesibles para App Store: contraste, tamaño de texto y texto alternativo
Las capturas de pantalla de la App Store no son navegables con un lector de pantalla de la misma forma que una página web — Apple no expone el texto alternativo de las capturas directamente al usuario. Pero las reglas de accesibilidad visual (contraste, tamaño de texto, independencia del color) sí se aplican por completo, y coinciden con las mismas reglas que rigen la legibilidad al tamaño de miniatura. Vale la pena atenderlas porque es el mismo trabajo.
Contraste: WCAG AA como punto de partida
Proporciones de contraste WCAG AA:
- Texto normal: mínimo 4.5:1 sobre el fondo.
- Texto grande (24pt o más en regular, o 18pt o más en negrita): mínimo 3:1.
- Elementos gráficos / controles de interfaz: 3:1.
Pasa cada texto por un verificador de contraste — hay muchos gratuitos — comprobando contra el fondo del panel donde se sitúa. Si el fondo es un degradado, comprueba contra los puntos más oscuro y más claro del degradado en la zona donde se encuentra el texto.
Error habitual: texto blanco sobre un degradado de naranja claro a naranja oscuro. Donde el texto cae sobre el naranja claro, el contraste baja de 4.5:1 y el texto desaparece al tamaño de miniatura.
Tamaño de texto en miniatura
Las capturas de pantalla de la App Store se renderizan en varios tamaños:
- Tamaño completo en la página del producto (~1290 px de ancho).
- Vista previa en resultados de búsqueda (~600 px de ancho).
- Miniatura en resultados de búsqueda (~300 px de ancho).
Si el texto en tu archivo de diseño mide 60px para un lienzo de 1290 × 2796, se renderiza a ~14px en una miniatura de búsqueda de 300px. 14px está por debajo del tamaño mínimo recomendado para la legibilidad. La solución: diseña los textos a 80-100px para que se rendericen a 18-22px en miniaturas. Esto aplica especialmente a los paneles 1-3, que son los que se ven en la búsqueda.
Independencia del color
No dependas solo del color para transmitir información. La infracción más habitual: texto en un color que solo se distingue del fondo por el tono (texto rojo sobre fondo verde, por ejemplo). Cualquier persona con daltonismo rojo-verde ve una mancha sin definición.
Prueba: si conviertes tu captura de pantalla a escala de grises, ¿sigues pudiendo leer todos los textos? Si la respuesta es sí, eres independiente del color. Si no, aumenta la diferencia de luminosidad, no solo la de tono.
Texto alternativo en App Store Connect
App Store Connect no expone el texto alternativo de las capturas de la misma forma en que una página web expone los atributos alt. Pero App Store Connect sí tiene un campo de «etiquetas de accesibilidad» por captura que utilizan los usuarios de VoiceOver al navegar por la App Store. Rellénalo. Una descripción breve de lo que muestra la captura: «Pantalla de inicio con el resumen de gastos mensuales», no «Captura 1».
Es la mejora de accesibilidad con mayor impacto porque casi ningún desarrollador lo hace. Los usuarios de VoiceOver que navegan por la App Store escuchan actualmente «captura 1, captura 2» en la gran mayoría de las apps. Unas pocas frases de descripción por panel hacen tu ficha significativamente más usable para ese público.
El antipatrón de «fuente pequeña y tipo decorativo»
Las fuentes decorativas (fuentes de escritura a mano, fuentes de presentación ultrafinas) casi siempre fallan a la vez en las pruebas de accesibilidad y de miniatura. Los trazos finos que resultan elegantes a tamaño completo se vuelven ilegibles a 300px e imposibles de leer para usuarios con baja visión.
Usa estos estilos decorativos como máximo en una palabra de énfasis por carrusel. Los textos de los paneles y cualquier texto importante necesitan una fuente con un peso de trazo consistente a los tamaños que te importan — la mayoría de los grotescos sans-serif modernos (Inter, SF Pro, Roboto) cumplen.
Posición del texto y zonas seguras
Apple a veces superpone elementos de interfaz sobre el carrusel de la App Store (el botón «Get», el chip de clasificación de edad, el botón «Open» tras instalar). Si tu texto está en esas áreas, quedará oculto. Mantén los textos en la zona segura: 60px desde cada lado, 80px desde la parte superior y 200px libres en la parte inferior para la interfaz de la App Store.
Qué verificar antes de publicar
- Pasa cada texto por un verificador de contraste contra el fondo de su panel.
- Visualiza tus capturas de pantalla a 300px de ancho en un simulador de miniaturas (o simplemente redimensiona en Figma). Todos los textos deben seguir siendo legibles.
- Haz la prueba de escala de grises para verificar la independencia del color.
- Escribe etiquetas de accesibilidad para cada panel en App Store Connect.
- Si tienes un usuario de VoiceOver en tu grupo de pruebas, pídele que navegue por tu ficha y te informe.
Por qué esto importa más allá de la accesibilidad
Las reglas de contraste y tamaño que WCAG codifica provienen de la investigación sobre la visión humana. No son arbitrarias: son los umbrales por debajo de los cuales un porcentaje significativo de usuarios no puede leer texto con comodidad. Diseñar para AA significa diseñar para una población que incluye a usuarios mayores, usuarios con pantallas al sol en exteriores, usuarios con problemas leves de visión no corregidos, además de todas las personas que hacen scroll rápido en los resultados de búsqueda.
Las mismas reglas que ayudan a los usuarios con baja visión a leer tu captura de pantalla también ayudan a los usuarios que navegan la App Store en un tren bajo el sol. El mismo problema; la misma solución.