Explorando color-contrast() por primera vez

Vea las notas de la versión de Safari Technical Preview 122 que admite una color-contrast()función en CSS. Safari es el primero en salir aquí. Hasta donde yo sé, ningún otro navegador lo admite todavía y no tengo idea de cuándo lo lanzará Safari estable o si algún otro navegador lo hará alguna vez. ¡Pero! ¡Es una muy buena idea! Cualquier herramienta nativa que nos permita ofrecer interfaces más accesibles (de las cuales el contraste de color es parte) me parece genial. Así que intentamos que funcione.

Cualquiera puede descargar Safari Technical Preview, así que lo hice.

Tuve que preguntar sobre esto, pero el hecho de que sea un navegador preliminar no significa que todas estas funciones estén activadas de forma predeterminada. Así como Chrome Canary tiene indicadores de funciones que debes activar, también lo tiene 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 con información de sintaxis muy básica.

Así lo entiendo:

El ejemplo anterior es un poco tonto, porque siempre volverá white ; Eso contrasta mucho con black. Esta función en realidad resulta útil cuando uno o más de esos valores de color son dinámicos, lo que significa que muy probablemente sea una propiedad personalizada de CSS.

La función devuelve un color, por lo que supongo que el caso de uso principal 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 mezclar cualquier color--bg y obtendremos texto blanco o negro, dependiendo de lo que tenga mayor contraste:

Eso es extremadamente interesante, incluso en el caso de uso más básico.

Aquí hay una demostración de Dave en la que no solo configura el color del texto en el elemento principal, sino también el color de los enlaces, y los enlaces tienen un conjunto diferente de colores para elegir. Juegue con los controles deslizantes HSL (en Safari Technology Preview, por supuesto) para verlo funcionar.

Elegir dos colores que tengan suficientes contrastes es bastante fácil (aunque te sorprendería saber con qué frecuencia lo arruinamos incluso aquellos de nosotros con intenciones buenas). 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 mío jugando con el probador de Dave para que puedas ver cómo se actualizan los colores en diferentes lugares.