Una vez más enseñamos algunas de las novedades que irán saliendo poco a poco dentro del mundo del desarrollo. En esta ocasión, Sergio Jiménez, profesor de nuestro Bootcamp Full Stack Web Developer, nos presenta una poderosa herramienta de accesibilidad en CSS, la nueva función contrast-color(), ya disponible en Safari Technology Preview.
Echa un vistazo al siguiente vídeo y comprueba lo que hace esta nueva función.
Aceptar el consentimiento para ver esto
¿Qué hace contrast-color()?
Esta función permite que el navegador seleccione automáticamente el color que mejor contraste con el contexto visual circundante. Es decir, ya no dependes solo de combinaciones prediseñadas de colores, tu página se adapta dinámicamente para garantizar legibilidad óptima.
En los ejemplos que enseña Sergio, esto se utiliza para el texto de los botones, seleccionando entre el color blanco y negro para seleccionar cuál es el que mejor contraste tiene con el color del botón.
¿Por qué es tan relevante?
- Accesibilidad mejorada: Asegura que textos e interfaces sean legibles para personas con dificultades visuales o con deficiencia de visión de color.
- Experiencia automática: No necesitas probar manualmente combinaciones para cada fondo, el navegador utiliza un algoritmo para seleccionar automáticamente el color con mayor contraste.
- Compatibilidad progresiva: Aunque ya es funcional en Safari TP (Technology Preview), augura un futuro más inclusivo y automatizado para CSS, que potencia la accesibilidad con un esfuerzo menor para el desarrollador.
Descubre más sobre accesibilidad y CSS con nuestro Bootcamp Full Stack Web Developer y conviértete en profesional de la programación en solo 16 semanas.
