Contrast-color(): el nuevo sistema CSS que resuelve el contraste de color sin JavaScript

Fuentes: Algorithmic Theming Engines: Building Self-Correcting Color Systems With contrast-color()
Imagen generada por IA con el prompt: A split-screen UI showing a colorful card with a button; left side has low contrast text, right side has the same card with contrast-color() applied, showing black or white text that adapts to the background color. Clean
Imagen generada con IA

El artículo explica en detalle la función contrast-color() de CSS, diseñada para garantizar el contraste de color accesible sin depender de librerías JavaScript. A pesar de que el 70% de los sitios web siguen fallando en las verificaciones básicas de contraste WCAG en 2025 (según el HTTP Archive Web Almanac) y el WebAIM Million reporta un 83,9% de páginas de inicio con problemas en 2026, el problema persiste porque las soluciones basadas en JavaScript no escalan. La función contrast-color() resuelve esto con una sola declaración CSS: el navegador calcula el color de texto óptimo (blanco o negro) durante la fase de estilo, antes de pintar la página, sin necesidad de librerías ni pasos de compilación. El artículo aclara confusiones: el nombre anterior color-contrast() quedó obsoleto, la función solo devuelve blanco o negro (de momento), y el algoritmo usado es «UA-defined» (definido por el agente de usuario), lo que permite a los navegadores cambiar a futuro al algoritmo APCA sin romper código existente. Sin embargo, se advierte que APCA fue retirado del borrador de WCAG 3 en 2023 y su adopción es incierta; el estándar WCAG 3 podría no finalizar hasta 2030. La especificación se divide en Nivel 5 (actual, blanco/negro) y Nivel 6 (futuro, con listas de colores candidatos y ratios objetivo). El soporte en navegadores es bueno: Chrome 147, Firefox 146 y Safari 26 ya lo incorporan, con estado Baseline Newly Available desde abril de 2026. Se recomienda mejora progresiva mediante @supports. El texto subraya que la función es más robusta que las soluciones JavaScript y que su diseño permite adaptarse a futuros algoritmos de contraste sin cambios en el código del desarrollador.