Radix UIカラー：知覚的に均一なカラースケール

Radix UI Colorsはカラーシステムで、デザインシステムの最も永続的な問題の一つを解決します。異なるhue全体で視覚的に一貫して見えるカラースケールを構築することです。最もスケールジェネレーターが青に対して「正しい」と思われるシェードを生成しているのに対し、黄色または紫に対してはわずかにオフに見える場合、Radix UI Colorsは知覚的均一性を厳密に適用します。与えられたステップのすべてのシェードは、どのhueを見ているかに関わらず、同じように明るく、同じように飽和し、同じように有用に見えるべきです。このガイドでは、Radix Colorsの背後にある哲学、12段階スケールの動作方法、ダークモードサポートが後付けではなく組み込まれている理由、および独自のプロジェクトへのシステムの統合方法について説明します。

Radix Colorsが存在する理由

デザインシステム内のカラースケールを構築するための標準的なアプローチは、プライマリーカラーを選択してHSL明るさを調整してシェードを生成することです。これは、知覚的な重みが一貫しないスケールを生成します。#FBBF24のような中程度の明るさの黄色は、同じHSL明るさ値を持っている場合でも、#3B82F6のような中程度の明るさの青よりもはるかに明るく見えます。これはHSLの明るさコンポーネントが人間の知覚的な明るさに対応していないためです。

Modulz（Radix UIを構築した会社）の技術チームはこの問題を研究し、別の原則を中心にカラーシステムを設計しました。すべてのスケールは人間の眼に対して一貫した感覚を持つべきです。単に数値的に対称的ではありません。彼らは知覚的に均一なカラースペースで知覚的な明るさを測定することによってそれぞれのシェードを評価し、hue固有の明るさの異常を補正するためにそれぞれのステップで実際のhueとchromaticity値を調整しました。

結果は次のようなシステムです。 - Blue 9は、基礎となる16進値が根本的に異なっている場合でも、Green 9、Red 9、Yellow 9と同じ大胆で飽和して見えます。 - Slate 3はSand 3およびMauve 3と同じ微妙で明るい感覚です。 - 同じスケール位置で1つのカラーファミリーを別のカラーファミリーに置き換え、インターフェイスは視覚的な重みを維持します。

12ステップスケール

Radix Colorsは、Tailwindの11（50～950）と比較して、カラースケールあたり12ステップを使用します。各ステップには定義された意味的な目的があります。

この意味的マッピングは、他のスケールシステムに対するRadix Colorsの最も特徴的な機能です。デザイナーが覚えておく必要がある番号付きステップの代わりに、各ステップはドキュメント化された目的を持っています。「ステップ6はボーダーカラーです」を覚える必要はありません。意味的マップはあなたに言います。

ステップ1～2：背景

ステップ1と2はスケール内の最も明るい値で、ページおよびコンポーネント背景を対象としています。例えば、Radix Blue 1は#F0F8FFです。ほぼ無色で、「このセクションは青ファミリーにあります」と信号を送る重いカラーアプリケーションなしでページ背景に適しています。

ステップ2はわずかに見えやすいもので、交互テーブル行、サイドバー背景、または青色階層化ページ内のカードサーフェスに適しています。

ステップ3～5：インタラクティブUI背景

ステップ3～5はインタラクティブ要素の背景状態を処理します。

• ステップ3：微妙なインタラクティブ要素の通常状態（チップ、バッジ、低優先度ボタン）
• ステップ4：その要素のホバー状態
• ステップ5：アクティブまたは選択された状態

例えば、検索インターフェイスのフィルタータグは、デフォルト背景としてBlue 3、ホバーするとBlue 4、選択されるとBlue 5を使用する可能性があります。この3ステップホバー/アクティブな進行は、インタラクティブ状態のアドホックなカラーピッキングを排除します。

ステップ6～8：ボーダー

ステップ6～8はボーダーとフォーカスリングを処理します。

• ステップ6：注意を要求することなくセクションを分離する微妙な装飾的なボーダー
• ステップ7：標準的な要素のボーダー。入力アウトライン、カードボーダー、ディバイダー
• ステップ8：ホバーまたはフォーカス状態のボーダー（ユーザーがマウスを入力上に動かすときに見られるボーダー）

ボーダーにステップ7を使用し、ホバー/フォーカス状態にステップ8を使用することは、インターフェイス内のすべてのボーダーコンポーネント全体で一貫したインタラクションパターンを作成します。

ステップ9～10：堅い背景

ステップ9と10は「ブランドカラー」ステップです。スケール内の最も鮮やかで飽和したシェード。

• ステップ9：ボタン、バッジ、または塗りつぶされたチップの堅い背景（残り）
• ステップ10：その要素の堅い背景（ホバーで）

Radix Blue 9は#0090FFです。鮮やかなミッドブルー。Radix Blue 10はわずかに暗く、ホバー状態として機能します。これらのステップは視覚的に互いに異なることが保証され、手動のシェード選択を必要とすることなく明確なホバーアフォーダンスを提供します。

ステップ9値はまた、Radixが白いテキストに対してWCAG AAコントラストを満たすことを保証しているものであり、白いラベルを備えた塗りつぶされたボタンに対して安全です。

ステップ11～12：テキスト

ステップ11と12はテキストを処理します。

• ステップ11：低コントラストテキスト。二次的なラベル、キャプション、プレースホルダーテキスト、メタデータ
• ステップ12：高コントラストプライマリテキスト。見出し、本文、重要なラベル

Radix Blue 11は#0068D6です。白い背景のリンク色として機能するブルー（AA対比を達成）。Radix Blue 12は#002F65です。非常に暗い、青色階層化インターフェイスの見出しテキストに適しています。

実践における知覚的均一性

知覚的均一性が具体的に何を意味するかを示すために、4つの異なるRadixカラーファミリー間でステップ9値を比較します。

同じサイズのスウォッチでこれらの色を見ると、彼らは同様に大胆で提示されるべきです。黄色は知覚的な明るさで本質的にはより軽いため、Radixはより飽和し、より鮮やかな黄色を選択することで補い、青への同等の視覚的重みを運びます。これは、12段階システムを意味的マップとして機能させる知覚的キャリブレーションです。

朴素なHSLアプローチとこれを対比してください。すべての5つの色をHSL明るさの50%に設定した場合、黄色は不適切に明るく見え、青ははるかに暗く見えて、意味的均一性を破ります。

組み込みダークモードサポート

Radix Colorsはすべてのカラーファミリーに対して別個のダークスケール値を提供します。「ダークモードではX%だけ暗くする」という式を提供する代わりに、Radixは別の手動でキャリブレートされたダークパレットを提供します。すべてのステップが暗い文脈で同じ意味的な目的を提供するために検証されています。

ダークモードの場合、ステップのセマンティクスは同じです。ステップ3はまだUI要素の背景で、ステップ9はまだ堅いボタン背景です。ただし、実際の16進値はライトモード値とは異なります。

ライトモード対ダークモードステップ比較（青）

ステップ9（堅い背景）は両方のモードで同じ16進値（#0090FF）であることに注意してください。これは意図的です。ブランドボタンのような鮮やかな堅い色はモード間で変更する必要はありません。彼らはそれら自身の背景文脈を運ぶためです。変更されるのは周囲の表面色（ステップ1～8）とテキスト色（ステップ11～12）です。暗い背景に対するコントラストを維持するために調整する必要があります。

ステップ11と12はそれらの方向を反転させます。ライトモードでは、ステップ12はほぼ黒（#002F65）です。ダークモードではほぼ白（#EAF6FF）です。これは「高コントラストテキスト」がダークモードの暗い背景上で明るいテキストを意味すること、暗いテキストではないことを反映しています。

グレースケールファミリー

Radixは6つの異なるグレースケールを提供し、各hue色合いを持っています。

プライマリーカラーを補足するグレースケールを選択することで、潜在意識の調和を作成します。青のプライマリーにスレートニュートラルを備えた青のプライマリーとサンドニュートラルを備えたものよりも、より統合された感覚があります。ユーザーがなぜできないのか説明することができなくても。

シェードジェネレーターを使用して、プライマリーカラーを異なるニュートラルティントオプションと比較して、最高のハーモニックペアリングを見つけます。

システムに組み込まれたアクセシビリティ

Radix Colorsは、事後的な検証ステップではなく、最初からWCAGコンプライアンスを考慮して設計されています。

ステップ9での保証されたコントラスト

Radixチームは、すべての30のカラースケールおよび両方のライトおよびダークの変種に対して、すべてのステップ9カラーが白いテキストに対してWCAG AA対比（4.5:1）を満たすことを保証します。ステップ9カラーをボタン背景として使用し、白いラベルで使用する場合、対比度チェックを実行する必要はありません。システムはコンプライアンスを保証します。

テキストリンク用のステップ11

ステップ11は、マッチングステップ1背景のテキストリンクのWCAG AA対比を満たすようにキャリブレートされています。青スケールでは：Blue 11（#0068D6）on Blue 1（#F0F8FF）は約5.9:1の対比を達成します。AAの比率をマージン付きで渡しました。

非テキストコントラスト用のステップ7および8

WCAG 1.4.11は、非テキスト要素（入力ボーダー、アイコン、フォーカスリング）が隣接する背景に対して3:1の対比を満たす必要があります。Radixはステップ7と8を、対応するステップ1～2背景に対してこの要件を満たすようにキャリブレートします。

Radix 16進値を使用して対比度チェッカーで特定の組み合わせを確認することができますが、システムは意味的使用法（ステップ1背景上のステップ7ボーダー）がすでに通過するように設計されています。

統合ガイド

Radix Colorsのインストール

npm install @radix-ui/colors

CSSとしてのインポート

Radixは各カラースケール用のCSSファイルを提供します。

@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/blue-dark.css';
@import '@radix-ui/colors/slate.css';
@import '@radix-ui/colors/slate-dark.css';

各インポートはCSSカスタムプロパティを追加します。

/* blue.css から */
:root {
  --blue-1: #f0f8ff;
  --blue-2: #e1f0ff;
  /* ... */
  --blue-12: #002f65;
}

/* blue-dark.css から */
.dark, [data-theme="dark"] {
  --blue-1: #0d1520;
  --blue-2: #111927;
  /* ... */
  --blue-12: #eaf6ff;
}

darkクラスまたはdata-theme="dark"属性を<html>または<body>要素に追加してダークモードを適用します。またはprefers-color-schemeを使用します。

@media (prefers-color-scheme: dark) {
  :root {
    --blue-1: #0d1520;
    /* ダークモード値 */
  }
}

JavaScriptでの使用

Radixはまた、CSS-in-JSで使用するためのJavaScriptオブジェクトとしてカラーをエクスポートします。

import { blue, blueDark } from '@radix-ui/colors';

// blue.blue9 === '#0090FF'
// blue.blue12 === '#002F65'
// blueDark.blue9 === '#0090FF'
// blueDark.blue12 === '#EAF6FF'

Tailwind CSSとの統合

Radix ColorsおよびTailwind CSSは相互に排他的ではありません。Tailwind設定でRadixカラー値を使用できます。

// tailwind.config.js (v3)
const { blue, blueDark, slate, slateDark } = require('@radix-ui/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        // Radixステップキーを数値に相当するものにマップ
        'radix-blue': {
          1: blue.blue1,
          2: blue.blue2,
          // ...
          9: blue.blue9,
          12: blue.blue12,
        },
      },
    },
  },
};

またはv4では、CSSカスタムプロパティとして定義してください。

@theme {
  --color-blue-1: var(--blue-1);
  --color-blue-9: var(--blue-9);
  --color-blue-12: var(--blue-12);
}

これはTailwind utility classes（bg-blue-9、text-blue-12）を生成し、ダークモードの変種を含むRadix値に自動的にマップされます（ダークCSSプロパティをセットアップした場合）。

実践的なコンポーネント例

ボタンコンポーネントが直接Radix意味的ステップをどのように使用するかは次のとおりです。

.button-primary {
  background-color: var(--blue-9);   /* ステップ9：堅い背景 */
  color: white;                       /* ステップ9上の白いテキスト（AA保証） */
  border: 1px solid var(--blue-9);   /* 背景と同じ */
}

.button-primary:hover {
  background-color: var(--blue-10);  /* ステップ10：ホバーされた堅い背景 */
  border-color: var(--blue-10);
}

.button-primary:focus-visible {
  outline: 2px solid var(--blue-8);  /* ステップ8：ホバーされたボーダー */
  outline-offset: 2px;
}

そしてカードコンポーネントは微妙なティンティングを備えています。

.card {
  background-color: var(--blue-2);   /* ステップ2：微妙な背景 */
  border: 1px solid var(--blue-6);   /* ステップ6：微妙なボーダー */
}

.card:hover {
  border-color: var(--blue-7);       /* ステップ7：UI要素のボーダー */
}

.card-title {
  color: var(--blue-12);             /* ステップ12：高コントラストテキスト */
}

.card-label {
  color: var(--blue-11);             /* ステップ11：低コントラストテキスト */
}

CSSの変数は自動的にダークモード（blue-dark.cssをインポートするとき）で値を切り替えるため、このコンポーネント全体セットは追加の@mediaクエリまたはCSSクラス修正なしでダークモード対応です。

Radix Colorsと他のシステムの比較

Radix Colorsは哲学的にMaterial Design 3のトーナルパレットシステムに最も近いですが、より柔軟です。Material Design コンポーネントライブラリに結合されず、あらゆるCSSまたはJavaScriptフレームワークで機能します。

Radix ColorsがTailwindのパレット上に持つ主な利点は、意味的ステップマッピングと組み込みダークモードです。Tailwindが持つ主な利点はユビキティです。チームがすでにTailwind utility classesを広く使用している場合、Radixを2番目のシステムとして追加すると、認知的オーバーヘッドが作成されます。

Radix Colorsを選択する場合

Radix Colorsは、以下の場合に優れた選択肢です。

• スクラッチからデザインシステムを構築し、カラーレイヤーに組み込まれたアクセシビリティ保証が必要です。
• アプリケーションがダークモードを必要とし、2つの別々のパレットを手動で維持を避けたいです。
• Radix UIコンポーネントを使用しており、コンポーネントライブラリはRadixカラー変数を内部的に参照します。
• 意味的ステップマップがドキュメンテーションとして機能することが必要です。任意のデザイナーはコンポーネントを開き、ステップ数によってそれぞれのカラー値が何をしているかを直ちに理解できます。

以下の場合は最適な選択肢ではないかもしれません。

• チームはすでにTailwindのカラーシステムとutility classesに深く投資しています。
• 30のRadixカラーファミリーのいずれにも自然に適合しない非常に特定のブランドカラーが必要です。
• プロジェクトが十分に小さいため、完全なスケールシステムは不要な複雑さをもたらします。

重要なポイント

• Radix Colorsは12段階スケールを使用し、そこで各ステップはドキュメント化された意味的な目的を持っています（アプリ背景（ステップ1）から高コントラストテキスト（ステップ12））。これは、設計決定の各時点でどのシェードを使用するかについての推測を排除します。
• 知覚的均一性は、各hueを個別にキャリブレートすることで達成され、Blue、Green、Red、Yellow、Purple のステップ9がすべて人間の観察者に対して同等に大胆で飽和して見えます。単に数値的に同等ではなく。
• ダークモードはシステムに組み込まれています。Radixは別々のダークパレットCSSファイルを提供し、各ステップはライトモードと同じ意味的な役割を果たしますが、暗い背景用にキャリブレートされています。
• ステップ9値は白いテキストとのWCAG AA対比を満たすことが保証され、ステップ11はステップ1背景上のAAリンクテキスト用にキャリブレートされ、ステップ7～8は3:1非テキストコントラスト要件を満たします。
• Radix Colorsは、CSSカスタムプロパティまたはTailwindカラートークンへのステップ値のマッピングによってTailwind CSSと統合されます。JavaScriptカラーオブジェクトのインポートによってCSS-in-JSと一緒に。プレーンCSSカスタムプロパティインポートによってあらゆるCSSフレームワークと統合されます。
• シェードジェネレーターを使用して、Radixの知覚的均一性哲学と一致するカスタムスケールを構築し、デフォルトRadixライブラリ内のブランドカラーに、および対比度チェッカーを使用して配布前に任意のカスタム組み合わせを確認してください。