Contrast Color

La función contrast-color() es una nueva adición al lenguaje CSS que permite a los diseñadores crear sistemas de color auto-corregibles. Según el artículo de Smashing Magazine, esta función devuelve el color de texto con mayor contraste para un color de fondo determinado, lo que facilita la creación de interfaces accesibles. La función es simple de usar, solo se necesita declarar el color de fondo y la función contrast-color() devuelve el color de texto adecuado. Por ejemplo, .button { background-color: var(--brand-color); color: contrast-color(var(--brand-color)); }. Esto significa que si se cambia el color de fondo, el color de texto se adapta automáticamente para mantener el contraste adecuado. La función contrast-color() es parte del estándar CSS Color Level 5 y devuelve un color, no un número. En la versión actual, solo devuelve negro o blanco, pero se planea agregar más funcionalidades en el futuro, como listas de colores candidatos y ratios de contraste objetivo. La función es compatible con la Theming y puede ser utilizada en conjunto con Design tokens para crear sistemas de diseño más robustos y accesibles.