カラートークンプレビュー

トークン化できる基準色 1 色から、ライト/ダークの簡易 UI を先に確認し、問題なければそのまま export へ進みます。

このページはアクセシブル配色とカラートークン出力のあいだに置きます。最初の候補探しではなく、handoff 前の見た目確認用です。

他の言語 日本語 | English

使い方

  1. 基準色、接頭辞、AA / AAA 目標を入力します。
  2. カード、ボタン、補助文字の見え方と主要なコントラストを確認します。
  3. 見た目が問題なければ次に カラートークン監査 で、重複ロール、近すぎる色、コントラスト不足が残っていないかを確認します。
  4. その監査も通したいなら、最後に カラートークン出力 で CSS 変数や JSON をコピーします。

Wave 55 拡張

コードへ渡す前に、まず UI へ当ててみる

役割色そのものが大きく動く段階ではなく、すでにほぼ決まったトークン配色が UI ブロックに当たっても崩れていないかを見る段階向けです。

役割色がほぼ固まったあとに、handoff 前の見た目確認を行います。

ライト確認
    ダーク確認

      近いページとの使い分け

      アクセシブル配色 は役割色を組むページです。このページは、その役割色をカードやボタンに当てたときにまだ自然に見えるかを確認する段階です。カラートークン監査 は、その見た目確認のあとに、重複ロール、近すぎる色、コントラスト不足が export 前に残っていないかを洗う段階です。カラートークン差分 は、その監査のあとに変更後 set と現行 set の差分を見る段階です。カラートークン出力 は、その確認が済んだあとに CSS 変数や JSON をコピーする段階です。OKLCH 変換 や 色差チェック は、基準色そのものの調整がまだ主題のときに使います。

      FAQ

      このページでは何を確認できますか？

      基準色から作られたトークン配色を、ライト/ダークのカードやボタンへ当てて見た目確認し、主要なコントラストも一緒に確認できます。

      アクセシブル配色パレットとの違いは何ですか？

      アクセシブル配色パレットは役割色そのものを組むページです。このページは、その役割色を UI ブロックへ当てたときにまだ破綻していないかを見る確認段階です。

      カラートークン出力との違いは何ですか？

      このページは export 前の見た目確認です。カラートークン出力は、問題なさそうな配色を CSS 変数や JSON トークンとしてコピーする段階です。

      本格的なデザインレビューの代わりになりますか？

      いいえ。ブラウザ内の簡易チェック用であり、完全なデザインレビューを置き換えるものではありません。