はじめに
- はじめて本ウェブサイトを見る方へ
- 利用上の注意事項
ガイダンス
基本デザイン
コンポーネント
リソース

カラー

2024年9月25日更新

概要

デザインシステムのカラーは、個々のウェブサイトで使用されるスタイルガイドに必要なカラースキームの構築を目的としたシステムです。カラーは、ブランドを視覚的に体現するとともに、コンポーネントがもつ意味や機能に一貫性を付与するものです。これにより、ユーザーは明確に情報を認識できるようになります。

キーカラー

カラースキームを構築する上で必要なカラーを同じ色相の階調からキーカラーとして選択します。キーカラーはプライマリー、セカンダリー、ターシャリー、バックグラウンドなどを含みます。

プライマリーカラー

ウェブサイトのトーン＆マナーを確定するカラーです。サイト全体を通じて視覚的にブランドを伝える主要な要素（たとえば、ロゴタイプ、ヘッダーやグローバルナビゲーションの視覚表現）や、優先される動線や状況を示すUI（たとえば、CTAボタン、アクティブな状態表示等）に使用されます。

プライマリーカラーには、主要な背景色とのコントラスト比が少なくとも4.5:1以上を維持できるカラーを選択する必要があります。

プライマリーカラーの複数設定について

ウェブサイトの内容に応じて、複数のプライマリーカラーを設定することができます。その場合、複数のカラーそれぞれの色相・明度でセカンダリーカラー、ターシャリーカラー、バックグラウンドカラーを展開してください。

セカンダリーカラー

セカンダリーカラーは、プライマリーカラーを補完して、あまり目立たなくていい副次的な動線や状況を示すUI（たとえば、選択肢を提供するボタン、機能や状態を表示するパーツ等）で使用します。プライマリーカラーと同じ色相で明度が高いまたは低いものを選択します。これにより、カラーの一貫性を保ちながら視覚的な対比、情報の階層、優先の順列等を反映したUIを作成する際に役立ちます。

セカンダリーカラーを主要な背景色と隣接する表示要素に使用する場合は、主要な背景色とのコントラスト比が少なくとも3:1以上を維持できるカラーを選択する必要があります。なお、セカンダリーカラーをテキストのカラーとして使用する場合は、コントラスト比が少なくとも4.5:1以上でなければなりません。

ターシャリーカラー

ターシャリーカラーは、セカンダリーカラーと反対の明度で設定します。プライマリーカラーと同色相で、明度高をセカンダリーカラーとした場合は明度低をターシャリーカラーに、明度低をセカンダリーカラーとした場合は明度高をターシャリーカラーとします。

ターシャリーカラーを主要な背景色と隣接する表示要素に使用する場合は、主要な背景色とのコントラスト比が少なくとも3:1以上を維持できるカラーを選択する必要があります。なお、ターシャリーカラーをテキストのカラーとして使用する場合は、コントラスト比が少なくとも4.5:1以上でなければなりません。

バックグラウンドカラー

白または黒以外のバックグラウンドカラーは、ウェブサイトやアプリのさまざまなセクションや要素の背景に特別に選ばれるカラーです。

テキストや非テキスト要素のカラーは、背景色とのコントラスト比を考慮して設定されていますが、通常、この時に想定している背景色は白または黒です。バックグラウンドカラーの上にテキストや非テキスト要素が配置される場合、そのままではコントラスト要件を満たさなくなる場合があります。バックグラウンドカラーに応じて、コントラスト比を調整してください。

キーカラーの例

青（Blue）

緑（Green）

ニュートラル（Neutral）

スクリーンショット：ニュートラルカラー（Neutral）のキーカラーの例を示すカラーチップ。プライマリーカラーは黒で、セカンダリーカラー、ターシャリカラー、および背景色はグレー階調による違いをもつ。

ライトブルー（Light Blue）

シアン（Cyan）

オレンジ（Orange）

紫（Purple）

共通カラー

共通カラーは、白から黒のグレーの階調（ニュートラルカラー）をベースに構成され、ページの共通の要素、テキスト、境界線、背景、またUIの構成パーツなどに使用されます。共通カラーは微妙なデザイン要素に使用されますが、UIの種類や構成パーツによって規定されたコントラスト比が求められる場合があります。また、コントラスト比はグレーの階調の組み合わせによって変化しますので注意してください。

テキストとその背景色とのコントラスト比は常に 4.5:1 以上を保ってください。
UIの構成パーツで枠線が必要な場合やディバイダーなどの非テキスト要素は隣接する背景色とのコントラスト比3:1以上を保ってください。
個別のウェブサイトで使用されるスタイルガイドでは、ニュートラルカラー以外の色味を追加して共通カラーを作成することも可能です。

スクリーンショット：白からグレーを経て黒へ至る14階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

機能カラー

機能カラーはUIでのユーザーのインタラクションの状態をより明確にするために使用されます。ボタンなどキーカラーで一貫性を維持するものと、リンクカラーなどオンライン上での慣習化されたカラーを使用する場合があります。

リンクカラー

リンクカラーは、コントラスト比4.5:1以上を確保しながら、ウェブの文脈では伝統的な慣習となっている青（Default）と紫（Visited）を使用します。

リンクカラーの青と紫は、ウェブの文脈では伝統的に使われ慣習化された色の組み合わせでありユーザーの認知度が高いものです。しかしながら、色覚多様性の観点からは見分けにくい色の組み合わせとなっており、特に紫に青が多く配合されている場合は識別が難しくなります。そのため、赤みが強くなりすぎないように少しの赤みを足し、青との明度差を作ることで識別性を向上させています。

リンクカラーの組み合わせ例

スタイル1

スクリーンショット：リンクカラーの組み合わせスタイル例のカラーチップ。リンクカラーが青、ビジテッドカラーがマゼンタのパターン。

スタイル2

スクリーンショット：リンクカラーの組み合わせスタイル例のカラーチップ。リンクカラーがやや暗いライトブルー、ビジテッドカラーがマゼンタのパターン。

スタイル3

スクリーンショット：リンクカラーの組み合わせスタイル例のカラーチップ。リンクカラーがライトブルー、ビジテッドカラーがやや暗いマゼンタのパターン。

UIのステートカラーとスタイル

ステートカラーが必要なボタンなどのUIはキーカラーを反映したものが多く使用されます。デフォルトのカラーとスタイルを設定し、HoverやActiveのステートカラーを決定します。ステートの表示のデザインスタイルは各種ありますが、ウェブサイト内では一貫性を保ちます。

プリミティブカラーを用いたボタン機能色と使用の例

スタイル1

スクリーンショット：青のプリミティブカラーを用いた塗りボタンのデフォルト、ホバー時、アクティブ時の色パターン例。デフォルトはキーカラーのプライマリーカラーで使用している青、ホバー時はやや暗い青、アクティブ時はさらに暗い青。いずれもボタンのラベルテキストの色は白。

スタイル2

スクリーンショット：ニュートラルカラーのプリミティブカラーを用いた塗りボタンのデフォルト、ホバー時、アクティブ時の色パターン例。デフォルトはキーカラーのプライマリーカラーで使用している黒、ホバー時は暗いグレー、アクティブ時はやや暗いグレー。いずれもボタンのラベルテキストの色は白。

スタイル3

スクリーンショット：ライトブルーのプリミティブカラーを用いた塗りボタンのデフォルト、ホバー時、アクティブ時の色パターン例。デフォルトはキーカラーのプライマリーカラーで使用しているライトブルーの塗りボタンでラベルテキストは白、ホバー時は同じライトブルーをアウトラインとラベルテキストで使用しボタンの塗りは白、アクティブ時は同じライトブルーをアウトラインとラベルテキストで使用しボタンの塗りは薄いライトブルー。

アクセントカラー

アクセントカラーは、特定の要素に注意を引くために多用されない程度に使用されます。特定の意味を持ったハイライト表現や、CTAボタンに使うことで抑揚を変えて重要性を示したりすることがあります。

アクセントカラーを多用するとカラースキームの一貫性を損ねた印象を与える場合があるので注意が必要です。

プリミティブカラーを用いたアクセントカラーの例

スクリーンショット：アクセントカラーの例として、紫、青、ライトブルー、シアン、緑、ライム、黄色、明るいオレンジ、暗いオレンジのカラーチップを並べている。

注意：アクセントカラーを装飾以外の用途や機能を持ったコンポーネントに使用する場合はコントラスト比の確保に留意してください。背景や隣接する色に対するコントラスト比は、テキストの場合は4.5:1以上、非テキスト要素では3:1以上です。

セマンティックカラー

セマンティックカラーは、デザインスタイルやUIの種別を問わず特定のセマンティクス（意味や目的）が割り当てられたカラーです。

これらのカラーは特定の情報や文脈で意味を伝えるために使用され、情報伝達上の機能的な役割を持っています。

緑といえばサクセス、赤といえばエラー、というように、一貫性のある特定の意味を持った視覚的な共通言語となり、メンタルモデルに影響を与えます。

必要なコントラスト比を保つため、その使用用途によって明度や彩度の異なるカラーが必要となる場合があります。特に背景色が白または黒以外の場合には必ずコントラスト比を確認してください。

アイコンや枠線など非テキストに使用する場合は、背景色とのコントラスト比を3:1以上にすることが求められます。
テキストに使用する場合は背景色とのコントラスト比を4.5:1以上にすることが求められます。
各セマンティクスは色相を保ちさえすれば、ブランドやサービスのスタイルガイドに応じて明度・彩度を調整できます。つまり、エラーを緑で示すことはできませんが、コントラスト比を確保できる範囲でサクセスの緑を明るくすることが可能です。

サクセス（Success）

成功、安全、完了などを意味するカラー

スクリーンショット：セマンティックカラーのサクセスのカラーチップ。サクセス1は明るい緑、サクセス2は暗い緑。

エラー（Error）

失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラー

スクリーンショット：セマンティックカラーのエラーのカラーチップ。エラー1は明るい赤、エラー2は暗い赤。

警告（Warning）

警告や禁止事項などを意味するカラー

スクリーンショット：セマンティックカラーの警告（ワーニング）のカラーチップ。黄色系のワーニング1は黄色、ワーニング2は濃い黄色。オレンジ系のワーニング1はオレンジ色、ワーニング2は暗いオレンジ色。

スタイルガイドカラー: カラーパレット

カラーパレット

デジタル庁デザインシステムで定義済みのプリミティブカラーとニュートラルカラーです。実際のカラーのデータはデザインデータ（Figma）を参照してください。

プリミティブカラー

プリミティブカラーはカラーの基盤となる基本的な色で構成され、多様なウェブサイトごとに統一感のあるカラースキームを作成するために利用します。各カラーは広範なカラー設定を導出するための色相と明度の段階で構成されています。プリミティブカラーを参考とし、色相、明度、彩度などを調整しウェブサイトのトーン＆マナーとして相応しいカラースキームを構築します。

青（Blue）

スクリーンショット：明るいブルーから暗いブルーまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

ライトブルー（Light Blue）

スクリーンショット：明るいライトブルーから暗いライトブルーまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

シアン（Cyan）

スクリーンショット：明るいシアンから暗いシアンまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

緑（Green）

スクリーンショット：明るい緑から暗い緑までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

ライム（Lime）

スクリーンショット：明るいライムから暗いライムまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

黄（Yellow）

スクリーンショット：明るい黄色から暗い黄色までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

オレンジ（Orange）

スクリーンショット：明るいオレンジから暗いオレンジまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

赤（Red）

スクリーンショット：明るい赤から暗い赤までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

マゼンタ（Magenta）

スクリーンショット：明るいマゼンタから暗いマゼンタまでの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

紫（Purple）

スクリーンショット：明るい紫から暗い紫までの13階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

ニュートラルカラー

グレー、ホワイトなどのニュートラルカラーは、背景、ディバイダー、ボーダーなど、さまざまなデザイン要素に対して共通カラーとして使用されます。

ホワイト（White）

ブラック（Black）

グレー（Gray）

スクリーンショット：明るいグレーから暗いグレーまでの10階調をカラーチップで表示。さらに、背景色が白の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲、ならびに、背景色が黒の場合に3:1以上および4.5:1以上のコントラスト比となるカラーチップの範囲を示している。

3:1→: Gray-420が、白（#FFFFFF）に対してコントラスト比3:1を確保できるカラーであり、これよりも暗いグレーは非テキスト要素のコントラスト要件を満たす。
4.5:1→: Gray-536が、白（#FFFFFF）に対してコントラスト比4.5:1を確保できるカラーであり、これよりも暗いグレーはテキストのコントラスト要件を満たす。
←3:1: Gray-600が、黒（#000000）に対してコントラスト比3:1以上を確保できるカラーであり、これよりも明るいグレーは非テキスト要素のコントラスト要件を満たす。
←4.5:1: Gray-536が、黒（#000000）に対してコントラスト比4.5:1以上を確保できるカラーであり、これよりも明るいグレーはテキストのコントラスト要件を満たす。

なお、ライブラリ内のグレーはHEXカラーで設定された「Solid Gray」、または、黒の透過度によって設定された「Opacity Gray」が選択できます。

カラー: 概要カラー: アクセシビリティ

アクセシビリティ

カラーにおけるアクセシビリティ観点での留意点について説明します。

コントラスト要件

JIS X 8341-3:2016およびWCAG 2.1, 2.2において求められるコントラスト要件は以下の通りです。

1.4.3 コントラスト（最低限）（レベルAA）JIS2016 WCAG2.1 WCAG2.2

テキストまたは文字画像は、背景色に対して少なくともコントラスト比4.5:1以上が必要です。
サイズの大きなテキスト（24 CSS px以上のテキストまたは18 CSS px以上の太字テキスト）および文字画像の場合は、背景色に対して少なくともコントラスト比3:1以上が必要です。
次の場合は当該コントラスト要件の対象外となります。
- アクティブではないUIに含まれるテキスト（disabled状態にあるものや非選択時のplaceholderテキスト）
- 見栄えのためだけのもので、情報は提供せず、機能性も備えてない、純粋な装飾としてのテキストまたは文字画像（たとえば、とても淡い色のアルファベットがランダムに配置された、英語教室のウェブサイトの背景）
- 重要な他の視覚的なコンテンツを含む写真の中に含まれる、意味的に視認できる必要のない文字
- ロゴまたはブランド名の一部である文字

1.4.6 コントラスト（高度）（レベルAAA）JIS2016 WCAG2.1 WCAG2.2

テキストまたは文字画像は、背景色に対して少なくともコントラスト比7:1以上が必要です。
サイズの大きなテキスト（24 CSS px以上のテキストまたは18 CSS px以上の太字テキスト）および文字画像の場合は、背景色に対して少なくともコントラスト比4.5:1以上が必要です。
次の場合は当該コントラスト要件の対象外となります。
- アクティブではないUIに含まれるテキスト（disabled状態にあるものや非選択時のplaceholderテキスト）
- 見栄えのためだけのもので、情報は提供せず、機能性も備えてない、純粋な装飾としてのテキストまたは文字画像（たとえば、とても淡い色のアルファベットがランダムに配置された、英語教室のウェブサイトの背景）
- 重要な他の視覚的なコンテンツを含む写真の中に含まれる、意味的に視認できる必要のない文字
- ロゴまたはブランド名の一部である文字

1.4.11 非テキストのコントラスト（レベルAA）WCAG2.1 WCAG2.2

UIコンポーネントおよびグラフィカルオブジェクトの視覚的提示に、隣接した色との間で少なくともコントラスト比3:1以上が必要です。
次の場合は当該コントラスト要件の対象外となります。
- アクティブでないUI（disabled状態になるもの）
- ユーザエージェントによって提示されているUI（ただしコンテンツ制作者が見た目を変更していない場合に限る）
- コンテンツを理解するために必要なグラフィカルオブジェクト自体の表現がコントラスト要件を満たしていなくても、その表示がそのコンテンツの情報を伝えるうえで必要不可欠な場合
フォーカスインジケーター自体も非テキストであるため、背景色や隣接色とのコントラスト比3:1以上が求められます。

非テキスト要素のうち、グラフ、チャート等のダイヤグラム画像の場合

ダイヤグラム画像において、値の認識を補うメモリ線の色がコントラスト比3:1を満たさないグレーの場合がしばしばありますが、こうした場合、各値を認識できるように、グラフィカルオブジェクトのすぐ近くにコントラスト比4.5:1以上のテキストを配置する必要があります。
動的な表現をするダイヤグラム画像では、しばしばフォーカスしていない箇所の色味が薄く表示されることがあります。この時、非フォーカス箇所に対してフォーカスすることで色味が濃く表示される挙動となるため、ここはenable要素であると解釈できますが、薄く表示されていることによって、あたかもdisabled要素であると解釈されてしまうおそれがあります。このような場合は、非フォーカスの箇所の一部にでもコントラスト要件を満たしたテキスト要素を配置し、フォーカス可能であることを明示的に示さねばなりません。
ただし、ダイヤグラム画像のほか、インフォグラフィックの多くは、コントラスト要件を満たした形で提示することが一般に難しいため、代替コンテンツとして説明テキストを用意するようにしましょう。なお、説明テキストは簡潔である必要はありません。ダイヤグラム画像やインフォグラフィックで伝えたい情報をしっかり含んだ内容で構成します。

参考情報

達成基準 1.4.3: コントラスト（最低限）（レベルAA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 1.4.6: コントラスト（高度）（レベルAAA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 1.4.11: 非テキストのコントラスト（レベルAA）WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）

ブランドカラーがコントラスト要件を満たさない場合における、キーカラーの決定方法について

ブランドの規定によっては、ブランドカラーやロゴタイプのカラーの、背景色に対するコントラスト比が4.5:1未満の場合があります。コントラスト要件はロゴの色味は対象外となるものの、ブランドカラーをそのままキーカラーとして使うには注意が必要です。

プライマリーカラーは多くのUIコンポーネントにおいてテキストのカラーとしても使用するため、背景色とのコントラスト比4.5:1以上が必要となります。したがって、ブランドカラーと同じ色相で明度を調整するなどの対応が必要です。

セカンダリーカラー、ターシャリーカラーも、テキストのカラーとして使用する場合はコントラスト比4.5:1以上、非テキスト要素でのみ使用する場合はコントラスト比3:1以上が必要です。こちらも同様に、ブランドカラーと同じ色相で明度を調整するなどの対応が必要です。

あるいは、ブランドカラーはロゴおよび純粋な装飾としてUIの表現に使用しつつも、各キーカラーはブランドカラーと相性の良いカラーを、コントラスト要件を満たした範囲で選定するという方法もあります。たとえば、ブランドカラーに関わらず、リンクテキストのカラーを青にするのは、ウェブサイトの伝統的な慣習にかなっていますし、機能カラー、アクセントカラー、セマンティックカラーも、それぞれブランドカラーとは異なる根拠やメンタルモデルにより設定されています。このように、ウェブサイト内のすべての色遣いを、ブランドカラーの色相だけで構成する必要はありませんので、コントラスト要件に配慮しながらスタイルガイドを作成してください。

前景色（テキストのカラー）と背景色の両方を指定する

コントラスト要件の満足を確実なものにするために、テキストのカラーを指定したらそのテキストが配置されうるすべての要素の背景色も合わせて指定します。

ウェブサイトが設定するCSSは、ブラウザのデフォルトスタイルよりも優先して適用されますが、もしウェブサイト側で背景色を指定せずにデフォルトスタイルの白のままで、テキストのカラーを暗いグレー、リンクカラーを暗い青などで指定した場合、ユーザーが使うブラウザの設定（ブラウザの背景色を変更している場合など）によってはコントラスト要件が満たせない場合があるためです。

参考情報

F24: 達成基準 1.4.3、1.4.6 及び 1.4.8 の失敗例－背景色を指定せずに前景色を指定する (又は、前景色を指定せずに背景色を指定する)（WCAG 2.1）

色覚多様性への配慮

ヒトの色覚は、色の感じ方によって大きく5つのグループに分けることができます。人口における分布の割合は、日本、欧米、アフリカで異なることがわかっており、これを色覚多様性といいます。

最も割合の多いC型色覚（0型、一般色覚）以外の色覚特性の当事者には、見分けにくい、または見分けのつかない色の組み合わせがあります。そのような色の組み合わせをできるだけ避け、あるいは色のみで情報を伝達しないように考慮してUIやコンテンツを設計することが、色覚多様性への配慮となります。

色弱の種類には、P型強度（1型2色覚）、D型強度（2型2色覚）、T型強度（3型2色覚）、P型弱度（1型3色覚）、D型弱度（2型3色覚）、T型弱度（3型3色覚）、A型といったものがあります。こうした色弱の特性をもつ当事者は全国に約290万人いると推定されています。

色弱の特性の多くが、1型色覚と2型色覚の当事者で、おおまかに赤近辺の色と緑近辺の色の識別が困難で、色合いによってはまったく見分けがつきません。

デジタル庁デザインシステムでは、色覚多様性に対応したUIコンポーネントを設計していますが、カスタマイズする場合や、UIコンポーネントでは規定できないコンテンツの作成時には、以下の各項目を踏まえて色覚多様性へ配慮してください。

「1.4.1 色の使用（レベルA）JIS2016WCAG2.1WCAG2.2」に基づき、色だけで情報を区別しないようにする
「1.4.11 非テキストのコントラスト（レベルAA）WCAG2.1WCAG2.2」に基づき、ダイヤグラム画像での色の組み合わせを考慮するとともに、グラフィカルオブジェクトの近くにテキスト要素を配置したり、代替コンテンツで長い説明を持つようにする
カラーユニバーサルデザイン推奨配色セットを参考にして、キーカラー等のカラーパレットを選定する

参考情報

バリアフリー：色覚障害者の移動等円滑化に関する調査研究 - 国土交通省
達成基準 1.4.1: 色の使用（レベルA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 1.4.11: 非テキストのコントラスト（レベルAA）WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
カラーユニバーサルデザイン推奨配色セットガイドブック第２版