contrast-color() が Chrome 147 安定版（2026 年 3 月末）に搭載され、すべての主要ブラウザで利用可能になりました。この関数は有効な CSS カラー値を受け取り、WCAG 2 AA の最小コントラスト比 4.5:1 を満たす black または white のいずれかを返します。同点の場合は white を返します。デザインシステムでのテキスト色の手動管理が不要になります。color: contrast-color(var(--brand-color)) の宣言一つで動的ボタン、prefers-color-scheme を使ったダークモード本文テキスト、color-mix() で生成したパレットまで対応します。現在の仕様は意図的に black と white のみに制限されており、#222 のようなカスタムコントラストターゲットの提案は、アクセシビリティ保証のために却下されました。
contrast-color() が Chrome 147 安定版（2026 年 3 月末）に搭載され、すべての主要ブラウザで利用可能になりました。この関数は有効な CSS カラー値を受け取り、WCAG 2 AA の最小コントラスト比 4.5:1 を満たす black または white のいずれかを返します。同点の場合は white を返します。デザインシステムでのテキスト色の手動管理が不要になります。color: contrast-color(var(--brand-color)) の宣言一つで動的ボタン、prefers-color-scheme を使ったダークモード本文テキスト、color-mix() で生成したパレットまで対応します。現在の仕様は意図的に black と white のみに制限されており、#222 のようなカスタムコントラストターゲットの提案は、アクセシビリティ保証のために却下されました。
今週のCSSの表現力がさらに向上しました。今週のfeatured記事であるcorner-shapeプロパティ（Chrome 139+）は、border-radiusの補助プロパティ一つでbevel、scoop、notch、squircleのコーナー形状を実現できることを示しています。clip-pathとは異なり、outline、box-shadow、backgroundにも正しく適用されます。Brecht De RuyteによるCSSの@layerと@supportsを使ったprogressive enhancementアプローチは、FirefoxとSafariのサポートを待つブラウザでも優雅なフォールバックを保証します。
