contrast-color()

Baseline 2026 recém disponível em abril de 2026 (Chrome 147, Firefox 146, Safari 26).

Chrome 147Edge 147Safari 26Firefox 146

Retorna preto ou branco, o que contrastar mais com a cor dada. Texto sobre fundos escolhidos pelo usuário ou calculados (tags, avatares, seletores de tema) continua legível sem tabela 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: Defina um `color` padrão antes da linha com contrast-color(); navegadores mais antigos ficam com ele. Proteja com `@supports (color: contrast-color(red))`.

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

Prompt

Sempre que texto ficar sobre uma cor de fundo dinâmica (tags, selos, amostras de cor, temas do usuário), defina `color: contrast-color(var(--bg))` depois de uma cor de fallback estática. Não calcule luminância em JS. Note que a função retorna só preto ou branco; para texto tingido continue usando color-mix().