五つのカラーロール
「デザイン」の「色」に「あなたのカラーパレット」があります。各色には役割があります。「背景」はページ全体の土台、「面」はその上に載るすべて（カード、ボックス、入力欄）です。「文字色」は本文に、「アクセントカラー」はボタン、リンク、操作できるすべての要素に使われます。「ボタンの文字」はアクセントカラーの上に載る文字の色です。空のままにすると、読みやすくなるようにこちらで計算します。
色を設定するには、色見本をクリックするか、その下に 16進数の値（例: #8A4B2E）を入力して Enter で確定します。破線の色見本は、まだ設定されておらずテンプレートが決めることを意味します。設定済みの色の横にある × で設定を解除でき、各ロールの横にある小さな i では、そのロールが一文で説明されます。
- 「デザイン」を開き、「色」を選びます。
- ロールの色見本をクリックするか、16進数の値を入力します。
- プレビューで確認します — 保存は自動的に行われます。
カラーホイールで組み合わせを探す
「色の組み合わせを探す」を開くとカラーホイールが表示されます。大きな点は「ベースカラー」で、これがアクセントカラーになります。ホイールで選んだ色は、すぐにアクセントカラーとして保存されます。点はマウスや指でドラッグします。点にフォーカスがあるときは矢印キーも使え、Shift キーを押しながらだと大きく動かせます。その下の「明るさ」スライダーで、色を明るく／暗くできます。
その横で「ハーモニー」を選びます：「類似色」「単色」「補色」「分割補色」「トライアド」「正方形」「シェード」「自分の画像」。下の「パレット」には、合う色が 16進数の値とともに表示されます。色の下にある「次として使う…」で、その色を一つのロールに割り当てます。
「ブランドに適用」は、パレットを一度にまとめて割り当てます。ベースカラーをアクセントに、さらに明るい背景、明るい面、暗い文字色、黒または白のボタン文字を、読みやすくなるよう計算して設定します。その後、各ロールを個別に変更できます。
- 「色」で「色の組み合わせを探す」を開きます。
- 大きな点をメインカラーまでドラッグし、ハーモニーを選びます。
- 「ブランドに適用」をクリックします。
読みやすさ
パレットの下の「読みやすさ」ボックスでは、四つの色の組み合わせを測定します：「背景の上の文字」「面の上の文字」「ボタンの文字」「背景に対するアクセント色」。基準は WCAG で、最低 4.5:1 です。各組み合わせには、コントラスト値と言葉による判定が表示されます：「とても読みやすい」「読みやすい」「ぎりぎり — 読みにくい」「読めない」。どちらかの色がまだ設定されていない組み合わせは測定されません。
組み合わせが読めない場合、両方の色に警告（「次の色とのコントラストが不足: …」）が表示され、ボックスにはツールごとの影響が表示されます。「置き換えられるツール: …」は、そのツールではあなたの色の代わりに読みやすい色が表示されることを意味します — ウェブサイト、フォーム、WordPress では黒または白、ショップではまずショップ独自の色が使われます。「そのまま表示されるツール: …」は、読みにくくても、そのツールがあなたの色をそのまま表示することを意味します。
その下には「読みやすくする案」が表示され、すべての組み合わせが合格する完成済みのパレットが最大三つ提示されます。すべての組み合わせをまとめて計算するため、ある修正が別の組み合わせを崩すことはありません。各色は明るく／暗くなるだけで色相は保たれ、ボタンの文字はあなたの色のままか、黒または白になります。提案ごとに小さなプレビューで四つの組み合わせが表示され、その横に、どの色がどう変わるかが示されます。「適用する」でパレットをブランドに適用し、「元に戻す」で元の色に戻せます。
読みやすい色は、すべての人の役に立ちます。視力の弱い人にも、日差しの下でスマートフォンを見る人にも。
コントラストを詳しく確認
「コントラストを詳しく確認」では、一つの組み合わせを詳しく確認します。上部で組み合わせを選ぶと、その比率が大きく表示されます（例: 5.20 : 1）。その下には前景と背景があり、それぞれに色見本と「明るさ」スライダーがあります — ここで変更すると、ブランドの色が変更されます。
表には、その組み合わせが満たすレベルが表示されます：「大きなテキスト」「小さなテキスト」「グラフィックと UI」のそれぞれについて、AA と AAA の「合格」または「不合格」。本文には 4.5:1、大きな見出しには 3:1 が必要です。背景に対するアクセントには 3:1 で十分です。その横には、見出しと段落のある小さなページとして組み合わせが表示されます。
コントラストが足りない場合は「提案 — 同じ色相で、明るく／暗くしただけ」が表示されます。クリックすると、提案された色がロールに適用されます。その色相ではどうしても基準に届かない場合は、二つの色のどちらかを選び直す必要があることがボックスに表示されます。
- 「色」で「コントラストを詳しく確認」を開きます。
- 上部で、読めない組み合わせを選びます。
- 提案をクリックするか、「合格」が表示されるまで「明るさ」スライダーをドラッグします。