色（カラー）における配慮
色（カラー）を利用する場合の注意点
色（カラー）を効果的に利用することは表現の一つとして有効ですが、色がわかりにくい人や視覚で色を判断できない人だけではなく、ディスプレイやページを見ている環境によって色の見え方が違う場合もあり、色を使う際は注意が必要です。
色（カラー）を利用する際のポイント
- 背景と文字のコントラスト比率「4.5：1」以上を確保する（※1）
画像内の文字を画像化した場合など、可読性のある文字に色を利用する場合には、背景色と文字色（テキスト部分）のカラーコントラスト比率を「4.5：1」※以上になるようにしなけければなりません。 - 色だけの表現に頼らない
色を利用して情報の違いを表現する場合は、形状の変化やテキストでの説明とあわせた表現としてください。特にグラフなどの場合「青色=50%」「赤色=20%」「緑色=30％」など色だけでグラフ内の情報を表現しないようにしてください。
※1：サイズの大きな文字（18ピクセル以上）に関しては、「3：1」以上のコントラスト比率が確保できれば問題ありません。 ただし文字を画像にした場合は、スモールスクリーン（モバイル画面）などで実際の大きさより小さく見える可能性があるため、「4.5：1」以上のコントラスト比率を確保してください。
例：背景と文字のコントラスト比率「4.5：1」以上を確保する
背景色と文字のコントラスト比率は「16.1：1」になっている
背景色と文字のコントラスト比率は「5：1」になっている
例：色だけの表現に頼らない
推奨の例
割合が何を示すかを円グラフ内に記載しており、色がわからなくても内容を理解できる
非推奨の例
円グラフは、色が区別できないと内容がわからない。
カラーコントラスト比とは
背景色と文字色との相対的な明るさ（相対輝度）の差を示した比率のことです。
「4.5：1」という数値は世界的な基準であるWCAG（Web Content Accessibility Guidelines）で定められた基準で、中度の弱い視力、加齢に伴う視力の衰え、色覚特性のある人にも見やすい色の組み合わせとされています。
カラーコントラスト比率を調べるには「Colour Contrast Analyser」などのツールを利用してチェックすると便利です。（Colour Contrast Analyser：https://www.tpgi.com/color-contrast-checker/）