ライトとダークを比較する

同じ条件で比較する

1. 01

   少数の候補を選ぶ

   Gallery を Theme で絞り込み、検索、カタログ番号、カテゴリーを使って、レビューする候補を少数に絞ります。

2. 02

   検証済みプレビューを切り替える

   評価基準を変えずに、Gallery の各カードを light と dark に切り替えます。

3. 03

   トークンの違いを追う

   リリース詳細と Token Lab を開き、意図されたセマンティックな変更と、見栄えをよくするためのプレビューの切り抜きを区別します。

4. 04

   インストール前に候補を絞る

   比較は選択の補助として使います。インストール前には、対象リリース固有の成果物を改めて確認する必要があります。

単独の色見本ではなく、画面上の役割を確認する

• 基本背景、浮き上がった背景、オーバーレイ背景の上で、一次ラベルと二次ラベルが読めるか確認します。
• 隣接するサーフェスを分ける境界線が、画面で最も目立つ要素になっていないか確認します。
• ブランド、エラー、成功、警告の各役割を、両モードで区別できる状態にします。
• サイドバーを、コンテンツキャンバスや浮き上がったカードと比較して確認します。
• Full Skin では、ランタイムのスクリーンショットが、最終生成 CSS と同一オリジンのアセットを示しており、Studio のシミュレーションではないことを確認します。

実際の読書セッションを確認する

同じ会話、コード ブロック、メニュー、入力を両方のモードでプレビューします。大きな背景だけを判断するのではなく、選択したテキスト、二次ラベル、警告、キーボード フォーカスを確認してください。

長い会話とコードブロックを使用して、このパレットを明暗で比較してください。読みにくいテキストや不鮮明なフォーカス状態を特定し、具体的な色調整を提案します。