contrast-color()

Baseline 2026 recién disponible en abril de 2026 (Chrome 147, Firefox 146, Safari 26).

Chrome 147Edge 147Safari 26Firefox 146

Devuelve negro o blanco, el que más contraste con el color dado. El texto sobre fondos elegidos por el usuario o calculados (etiquetas, avatares, selectores de tema) sigue siendo legible sin tabla de consulta.

YellowNavyOrange

CSS

.fx-032 span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 4px;
  font: 600 13px system-ui;
    background: var(--bg);
  color: contrast-color(var(--bg))
}

HTML

<div class="fx-032">
  <span style="--bg:#fde047">Yellow</span><span style="--bg:#1e3a8a">Navy</span><span style="--bg:#f97316">Orange</span>
</div>

Fallback: Define un `color` por defecto antes de la línea con contrast-color(); los navegadores antiguos se quedan con él. Protégelo con `@supports (color: contrast-color(red))`.

Fuente: web.dev/blog/baseline-digest-apr-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146

Prompt

Siempre que haya texto sobre un color de fondo dinámico (etiquetas, insignias, muestras de color, temas de usuario), pon `color: contrast-color(var(--bg))` después de un color estático de respaldo. No calcules la luminancia en JS. Ten en cuenta que la función solo devuelve negro o blanco; para texto tintado sigue usando color-mix().