Accesibilidad
¿Cómo elegir colores accesibles?
Diseñando para todos: accesibilidad y experiencia de usuario en tus aplicaciones de gestión
26/01/2026
Equipo de Doceo Software
En DoceoSoftware apostamos por la accesibilidad y el diseño universal como pilares de nuestras soluciones. Por eso, nuestras aplicaciones incorporan una selección inteligente de colores: al elegir el color de fondo que desees, el sistema ajusta automáticamente el color del texto para garantizar un contraste accesible, legible y conforme a las buenas prácticas de usabilidad.
Aun así, creemos que es importante explicar cómo funciona el contraste de color y por qué es clave para una buena experiencia de usuario. Hoy queremos hablaros de Doceo InTime, nuestra solución de control horario, y de cómo podéis organizar botones y colores en vuestra interfaz pensando en accesibilidad y diseño inclusivo.
¿Sabías que los colores que elijas para tu aplicación pueden influir directamente en que algunas personas puedan utilizarla correctamente o no? A continuación, te mostramos cómo elegir combinaciones de color que beneficien a todos: personas con o sin problemas de visión, usuarios de mayor edad o quienes trabajan en condiciones de iluminación complicadas.
Diseño universal: qué es y por qué importa
La accesibilidad consiste en diseñar interfaces que puedan ser usadas por cualquier persona, independientemente de sus capacidades, edad o contexto. El diseño universal busca que el software sea comprensible, usable y eficiente desde el primer momento, sin soluciones especiales ni ajustes posteriores.
Aplicar accesibilidad significa tener en cuenta elementos como:
- Compatibilidad con lectores de pantalla
- Contrastes de color adecuados
- Textos legibles y tamaños correctos
- Navegación clara e intuitiva
Estos principios no solo ayudan a personas con discapacidad, sino también a usuarios mayores, a quienes trabajan con poca luz o a quienes usan el móvil en movimiento.
En muchos países, la accesibilidad es obligatoria para webs y aplicaciones de servicios públicos, comerciales o educativos. Incluso cuando no lo es, aplicarla mejora la experiencia y reduce errores.
Nuestro Doceo InTime permite configurar los botones a tu gusto, con colores a medida. Pero, ¿cómo asegurarte de que tus colores son accesibles?
¡Facil! En doceostore y doceo Intime, la configuración de colores para botones de control horario y etiquetas documentales es totalmente automática. El sistema integra una herramienta que genera estas tonalidades respetando siempre el ratio de contraste necesario. Por ello, no requiere supervisión manual: cualquier botón que crees cumplirá directamente con los estándares de accesibilidad, garantizando una legibilidad óptima sin esfuerzo adicional.
¿Te gustaría saber más?
Quiero contactar con un experto...
Cómo elegir colores accesibles
Aquí tienes un paso a paso sencillo:
1. Selecciona tus colores
- Decide el color de fondo del botón
- Decide el color del texto o icono
2. Comprueba la relación de contraste
La relación de contraste entre el color de fondo y el de texto debe ser suficiente para que cualquier persona pueda leerlo.
WCAG 2.1 recomienda una relación mínima de 4,5:1 para texto normal y 3:1 para texto grande.
Herramientas gratuitas para comprobarlo:
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- Accessible Colors: https://accessible-colors.com/
- Color Contrast Analyser (desktop): permite seleccionar colores de la pantalla y verificar la relación de contraste
3. Introduce los valores en la herramienta
- Copia los colores de tu aplicación (HEX o RGB)
- Pégalos en la herramienta
- Comprueba el ratio de contraste que te da la herramienta
Para verificar la accesibilidad cromática con WebAIM Contrast Checker, sitúa la aplicación a la derecha y tu web a la izquierda. Usa el Color Picker para capturar el color del texto (Foreground) y el del fondo (Background).
Si el ratio resultante es igual o superior a 4.5:1, el contraste es correcto según los estándares de lectura. Si es inferior, es necesario ajustar los tonos para garantizar la legibilidad. Así cumplirás con las pautas básicas de accesibilidad web.
4. Ajusta si es necesario
- Si el contraste no cumple el mínimo, cambia el color de fondo o del texto
- Repite la comprobación hasta cumplir el estándar
5. Aplica los colores
- Configura los botones en tu panel de control con los colores verificados
- Asegúrate de mantener coherencia visual entre botones, iconos y textos
Para elegir colores accesibles, te sugerimos estas opciones:
- Para mantener el texto blanco: usa el fondo
#6D7E00. - Para mantener el tono del fondo: usa el texto
#717171.
Ambas combinaciones garantizan el contraste mínimo legal de 4.5:1.
Diseñar con accesibilidad y diseño universal no solo es una obligación en muchos casos, sino también una mejora para todos.
Con pequeños pasos como comprobar los colores y su contraste, puedes hacer que tu control horario sea más intuitivo, cómodo y usable, incluso en condiciones complicadas de luz o para personas con dificultades visuales.
En DoceoSoftware, creemos que un software accesible es un software mejor, y con Doceo InTime puedes empezar a aplicar estos principios hoy mismo.
