Uno de nuestros favoritos, Andy Clarkpor un lado conserva el CSS contrast-color() Características de True Glory:
Para el diseño de mi sitio web elegí un color de fondo azul oscuro (
#212E45) y texto claro (#d3d5da). Este color es un blanquecino que suaviza el contraste entre los colores de fondo y de primer plano manteniendo niveles apropiados para fines de accesibilidad.Pero aquí está la cuestión. este
contrast-color()La función selecciona blanco para fondos oscuros o negro para fondos claros. Este contraste es demasiado alto para que resulte cómodo de leer, al menos para mí.
palabra. El blanco y el negro son dos colores muy seguros para contrastar con otro valor de color. pero cantidad El contraste entre blanco puro/negro y cualquier otro color, si bien proporciona el mayor contraste, puede no ser el mejor contraste en general.
Este fue ciertamente el caso cuando agregué una combinación de colores oscuros a mi sitio web personal. Contraste entre colores de fondo, azul oscuro (hsl(238.2 53.1% 12.5%) y blanco puro (#fff) es demasiado duro para mí.
Para mitigar esto, me gustaría algo menos opaco, digamos hsl(100 100% 100% / .8)o un 20% más claro que el blanco. no puedo hacer esto contrast-color()a pesar de. por eso persigo light-dark() en cambio:
body {
color: light-dark(hsl(238.2 53.1% 12.5%), hsl(100 100% 100% / .8));
}
voluntad contrast-color() ¿Se apoyará en el futuro algo más que el dúo blanco y negro? La especificación dice que sí:
Se espera que las versiones futuras de la especificación introduzcan más control sobre el algoritmo de contraste utilizado, los casos de uso y los colores devueltos.
Estoy seguro de que esta es una de esas cosas que es más fácil decirla que hacerla, ya que la relación de contraste «correcta» es más sutil que simplemente una relación de 4,5:1. También es necesario considerar las preferencias del usuario. Luego se convierte en mala hierba. WCAG 3.0 Trabajo en progresoDanny hizo un gran trabajo resumiendo esto en detalle en un artículo reciente. Desventajas contrast-color().
Enlace directo→
