feat: contrast-color() 採用検討（Token 層、Baseline Newly Available 整合、Future）

[shunei-web]

背景

Chrome 147（2026-04-07 stable リリース）で contrast-color() CSS 関数が Baseline Newly available に到達（Chrome 147 / Safari 26+ / Firefox 146+ 全対応）。mFLOCSS の採用基準と完全合致するため、Token 層への採用を検討する。

採用基準との整合確認

mflocss-starter README.md L174 に明文化された採用方針:

Baseline Newly Available（全モダンブラウザの最新安定版でサポート済みの機能を使用）

contrast-color() は本基準を満たす:

• Chrome 147 / Safari 26+ / Firefox 146+ 全対応 = Baseline Newly available 達成
• 古い stable 版（30 ヶ月以前）は明示的にサポート対象外
• starter 既存実装も Baseline 2024 機能（論理プロパティ / Container Queries / @layer / oklch() / light-dark() / clamp() 等）をフォールバックなしで使用 = 一貫性

→ フォールバック不要で採用可能

採用候補ユースケース

Token 層: アクセシブルなテキスト色の自動生成

@layer token {
  :root {
    --color-brand: oklch(60% 0.18 250);
    /* Baseline Newly available 整合: フォールバックなしで採用 */
    --color-brand-text: contrast-color(var(--color-brand));
  }
}

WCAG AA 最低コントラストが自動保証され、ダークモード対応の色ペア生成も簡潔化される。

Project / Component 層: ボタン背景・テキストの自動整合

.c-button {
  background-color: var(--color-brand);
  color: contrast-color(var(--color-brand));
}

var(--color-brand) を変数で差し替えるだけでテキスト色が追従する。

採用判断ポイント

• spec 規範化は mflocss/spec v1.0 凍結中のため、まず starter で実装パターン提示 → 後続バージョンで spec §6 Custom Properties に規範化検討
• バージョン: 未確定（Future 枠）、starter v1.0 リリース後の v1.1+ で本格検討
• ダークモード（light-dark() 既採用）との設計整合性検討

任意の予防実装パターン（必要に応じて）

@supports (color: contrast-color(white)) {
  .c-button {
    color: contrast-color(var(--color-brand));
  }
}
/* @supports 判定すらしない方針も整合的（README L174 方針通り） */

関連

• 出典: 内部トレンド調査（2026-05-01、Chrome 147 トレンド報告）+ 月次セキュリティレビュー

一次ソース

• Automated accessible text with contrast-color() | una.im
• Chrome 147 release notes
• contrast-color() | Can I use
• Using your design system colors with contrast-color() | daverupert.com

優先度

Future（バージョン未確定、starter v1.0 リリース後の検討候補）