このページの先頭です

本文ここから

色づかい

更新日:2012年12月19日

カラーユニバーサルデザイン

色の見え方は一様ではありません。色だけに頼ったデザインをすると、色弱者など色を識別しにくい人は、情報を読み取りにくくなります。色なしで理解できるようにデザインし、その上で色の効果が発揮できるように色を使うことが大切です。

文字の強調

色弱者(P型強度)には、赤文字と黒文字が同じように見えるため強調していることが伝わりにくいので、以下のような工夫をしましょう。

※色弱者(P型強度)のシミュレーション画像は、実際の色弱者の見え方を再現したものではありません。見え方、感じ方は人により異なります。

問題点

赤文字と黒文字が同じように見え強調していることが伝わりにくい。

悪い例

改善点

赤文字を朱色にして見分けやすくし、書体の太さを変えて、強調する。

良い例

その他の工夫

色の組み合わせ

(1)暖色(赤から緑)と寒色(緑から青)を対比させる
(2)明度差をつけたり、文字の場合は黒や白でふち取りをつける
(3)彩度の低い色同士の組合せを避ける 

問題点

悪い例

色の組み合わせ・悪い例のイメージ

改善点

良い例

色の組み合わせ・良い例のイメージ

その他の工夫

同じ色相で明度や彩度を変化させて濃淡をつける方法もあります。

※色弱者の見え方は、C型と見え方に差があるP型強度です。

コラム

色の見え方シュミレーションツール

色のユニバーサルデザインを応援するソフトがあります。これらのソフトは、色弱者の見え方を疑似体験でき、既存の配色の問題点を調べたり、新しいデザインを考えるのに効果的です。

問題点

悪い例

悪い例のイメージ

改善点

良い例

良い例のイメージ

その他の工夫

文字に白や黒でふち取りをつけると、「悪い例」に上げた組み合わせでも読み取りやすくなります

地図の工夫

問題点

  • コースの見分けがつきにくい。
  • 道路とコースが区別しにくい。

悪い例

改善点

  • 各コースの線種を変え、コース名を地図中に書き入れる。
  • コースと区別するため、道路の色をとる。

良い例

その他の工夫

  • 形、位置、線種や塗り分けバターンを工夫します。利用者が色名を使ってコミュニケーションすることが予想される場合、色名を併記します。
  • 図や写真の上に文字を重ねると、見えづらくなることがあります。

棒グラフ・円グラフの工夫

問題点

  • 生産量と輸入量の境界がわかりづらい。
  • 凡例の色が見分けにくい。

悪い例

改善点

  • 明るく淡い色の組合せは避け、なるべく色鮮やかな色を使用する。
  • 色だけでなく、点網掛けや線網掛けを加える(ハッチング)。
  • 領域の境界を罫線や空白で区分したり、グラフを立体化して色を分離させ、凡例は各領域に直接記入するか引き出し線をつけ差し示す。

良い例

その他の工夫

  • 見分けやすい色であれば、凡例が離れていてもかまいません。
  • 多くの色を組み合わせるより、同系色で濃淡をつけるのも有効です。
  • 白黒コピーでもコントラストがはっきりわかるようにしましょう。

折れ線グラフの工夫

問題点

  • それぞれの線が似たような色に見え、見分けにくい。

悪い例

改善点

  • 線は見分けやすい配色とし、太くする。
  • 実線や点線などを組み合わせる。
  • マーカーはなるべく大きく、形状を変える。

良い例

情報を読み取る図やグラフは、正しく色分け・工夫をして、どんな人でも読み取ることができるものを作成しましょう。

このページの作成担当

市長公室 政策企画部 先進事業担当

電話番号:072-228-7480

ファクス:072-222-9694

〒590-0078 堺市堺区南瓦町3番1号 堺市役所本館4階

このページの作成担当にメールを送る
本文ここまで