本文へ移動
デジタル庁
デザインシステムβ版

メニュー

カラー（アクセシビリティ）

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

    コントラスト要件

    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要素であると解釈されてしまうおそれがあります。このような場合は、非フォーカスの箇所の一部にでもコントラスト要件を満たしたテキスト要素を配置し、フォーカス可能であることを明示的に示さねばなりません。
    • ただし、ダイヤグラム画像のほか、インフォグラフィックの多くは、コントラスト要件を満たした形で提示することが一般に難しいため、代替コンテンツとして説明テキストを用意するようにしましょう。なお、説明テキストは簡潔である必要はありません。ダイヤグラム画像やインフォグラフィックで伝えたい情報をしっかり含んだ内容で構成します。

    参考情報

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

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

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

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

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

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

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

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

    参考情報

    色覚多様性への配慮

    ヒトの色覚は、色の感じ方によって大きく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」に基づき、ダイヤグラム画像での色の組み合わせを考慮するとともに、グラフィカルオブジェクトの近くにテキスト要素を配置したり、代替コンテンツで長い説明を持つようにする
    • カラーユニバーサルデザイン推奨配色セットを参考にして、キーカラー等のカラーパレットを選定する

    参考情報