Accesibilidad: preparar el texto y las gráficas
9 min
En este artículo
- Nuestras recomendaciones
- Encontrar los códigos de color
- Ajustar el contraste de color
- Revisar manualmente el contraste de color
Los visitantes con problemas o dificultades visuales pueden tener inconvenientes para distinguir entre el primer plano y el fondo de las páginas de un sitio. Por lo tanto, te sugerimos verificar y ajustar el contraste de color en tu sitio según sea necesario.
Nuestras recomendaciones
Para aumentar la accesibilidad para los visitantes con diferentes necesidades de visión, recomendamos lo siguiente:
- Cambiar el color del texto y el contraste del color del fondo a una proporción de 4.5:1 para texto normal y 3:1 para texto grande.
- Una relación de contraste de, al menos, 3:1 para las gráficas y los componentes de la interfaz de usuario (como los bordes de los elementos de entrada de los formularios, los marcadores de posición, etc.).
- El nivel AAA exige una relación de contraste más alta de, al menos, 7:1 para texto normal y 4.5:1 para texto grande.
Información útil:
El texto grande se define como texto por encima de 14 puntos (aproximadamente 18 px) y negrita, o 18 puntos (aproximadamente 24 px).
Encontrar los códigos de color
Puedes encontrar los códigos de color en el creador de sitios que estés usando (el Editor de Wix Studio o el Editor de Wix).
Editor de Wix
Editor de Wix Studio
- Selecciona el elemento correspondiente (texto, franja de fondo, cuadro contenedor, etc.) y accede al Selector de color.
- Pasa el cursor sobre cualquiera de los colores para ver el código de color.
Probar los contrastes de color:
Hay numerosos sitios y complementos de navegador, como el comprobador de contraste, que prueba el contraste de color comparando los colores del primer plano y del fondo (por medio. de los códigos de colores). Para comprobar el contraste de color del texto sobre una imagen de fondo, recomendamos usar el Analizador de contraste de color, que te permite elegir el color del fondo y luego probarlo.
Ajustar el contraste de color
Puedes usar el Asistente de accesibilidad en el editor para encontrar y ajustar cualquier contraste de color bajo en un sitio, sin importar si estás usando el Editor de Wix o el Editor de Wix Studio. El asistente analiza el sitio en busca de posibles problemas de accesibilidad y destaca formas de mejorar la accesibilidad del sitio.
Con la mayoría de los elementos, puedes realizar cambios dentro del propio asistente. Sin embargo, algunos elementos (por ejemplo, ciertos elementos de las apps) no están completamente integrados con el asistente en la actualidad y deben revisarse o ajustarse de forma manual.
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Haz clic en Ajustes en la parte superior del editor.
- Selecciona Asistente de accesibilidad.
- Selecciona Escanear sitio.
- Haz clic en la pestaña Problemas.
- Selecciona una página de la lista.
- Haz clic en Mejora el contraste de color.
- Selecciona el elemento correspondiente y ajústalo según sea necesario:
Ajustar el contraste con el asistente
Ajustar el contraste de forma manual
.
Revisar manualmente el contraste de color
Es posible que haya un contraste de color en el sitio que el Asistente de accesibilidad no haya identificado. Recomendamos revisar manualmente el contenido del sitio con el Comprobador de contraste de Wix y ajustar el contraste según sea necesario.
Puedes instalar y usar el Comprobador de contraste desde el creador de tu sitio (Editor de Wix o Editor de Wix Studio). Si los elementos no cumplen con los requisitos, también puedes probar nuevas proporciones con el selector.
Editor de Wix
Editor de Wix Studio
Para comprobar el contraste:
- (Solo la primera vez) Instala el complemento en el editor.
- Haz clic en Herramientas.
en la parte superior derecha del editor. - Haz clic en Complementos del Editor.
- Haz clic en Comprobador de contraste.
- Usa los cuadros de color para seleccionar el color del elemento y del fondo en el cuadro de diálogo o pega los códigos de color correspondientes.
Para ajustar el contraste:
- Ajusta los colores de primer plano y del fondo en el Comprobador de contraste a la proporción recomendada.
- Copia los códigos de los colores que se encuentran en la parte inferior derecha del selector.
- Selecciona el elemento relevante en tu editor.
- Abre el selector de color desde los ajustes de diseño del elemento.
- Haz clic en Agregar junto a Mis colores.
- Pega el código copiado en el campo.
Consejo:
La forma en la que abres los ajustes de diseño depende del elemento, pero generalmente puedes encontrarlos seleccionando el elemento y luego haciendo clic en el icono Diseño 
.
.¿Estás mostrando gráficos o datos en tu sitio?
El color de contraste alto es una excelente manera de mostrar datos en tu sitio. Sin embargo, también recomendamos usar otros indicadores (como texturas y patrones) para diferenciar la información.
Siguiente paso:
Vuelve a la lista de verificación de accesibilidad para seguir mejorando la accesibilidad de tu sitio.