Vi en las notas de la versión de Safari Technical Preview 122 que tiene soporte para un color-contrast() función en CSS. Safari es el primero en salir de la puerta aquí. Hasta donde yo sé, ningún otro navegador admite esto todavía y no tengo idea de cuándo lo enviará Safari estable, o si algún otro navegador lo hará alguna vez. ¡Pero! ¡Es una muy buena idea! Cualquier herramienta nativa para hacernos enviar interfaces más accesibles (de las cuales el contraste de color es parte) es genial para mí. Así que intentemos que funcione.
Cualquiera puede descargar Safari Technical Preview, así que lo hice.
Tuve que preguntar sobre esto, pero solo porque este es un navegador de versión preliminar, no significa que todas estas funciones estén activas de forma predeterminada. Así como Chrome Canary tiene indicadores de funciones que debe activar, también lo hace Safari Technical Preview. Entonces, tuve que encenderlo así:
Las notas de la versión no tienen ninguna información sobre cómo usar realmente color-contrast(), pero afortunadamente la búsqueda en la web muestra una especificación (es parte del Módulo de color 5), y MDN tiene una página para ello con información de sintaxis muy básica.
Así es como lo entiendo:
Ese ejemplo anterior es un poco tonto, porque siempre volveráwhite– que tiene el mayor contraste con black. Esta función en realidad se vuelve útil cuando uno o más de esos valores de color son dinámicos, lo que significa que es muy probable que sea una propiedad personalizada de CSS.
La función devuelve un color, por lo que el principal caso de uso, supongo, será establecer un color basado en un fondo dinámico. Entonces…
section {
background: var(--bg);
color: color-contrast(var(--bg) vs white, black);
}Ahora podemos tirar cualquier color en absoluto en --bg y obtendremos texto en blanco o negro, dependiendo de lo que tenga más contraste:
Eso es extremadamente bueno, incluso en el caso de uso más básico.
Aquí hay una demostración de Dave en la que no solo establece el color del texto en el padre, sino también el color de los enlaces, y los enlaces tienen un conjunto diferente de colores para elegir. Juega con los controles deslizantes HSL (en Safari Technology Preview, por supuesto) para ver cómo funciona.
Simplemente elegir dos colores que tengan suficiente contraste es bastante fácil (aunque te sorprendería la frecuencia con la que lo arruinamos incluso aquellos de nosotros con buenas intenciones). Pero, vaya, se complica rápidamente con diferentes situaciones, y mucho menos con un montón de variaciones de color, o Dios no lo quiera, combinaciones arbitrarias.
Aquí hay un video de mí jugando con el probador de Dave para que pueda ver cómo se actualizan los colores en diferentes lugares.