プロジェクト ユー ディー オー エヌ 概要へ
アルファサードでは, プログラマ/エンジニア/Webデザイナーを募集しています (東京・大阪) .
  1. How-To

Project UDON

7.色の組み合わせ

コントラストと色の差を十分にとる

背景色と前景色の組み合わせには十分な注意が必要です。色覚障害者だけでなく、高齢者や白内障を患っている人などが特定の色の組み合わせでは文字が読めなくなったり、読みづらくなる可能性があるからです。

どの色とどの色の組み合わせが安全かについてはっきりしたことを言うことはできませんが(障碍の種類によっても違います)、十分なコントラスト(明度の差)と色の差を確保することが大切です。

広告をスキップ

例-1(危険な色の組み合わせ)

  • 色覚に障害を持っている場合、色の組み合わせによっては全く読めない。


非アクセシブルな画像 - 危険な色の組み合わせを使っている

例-2(ソフトウェアによって第一色盲のシミュレーション行った画像)


危険な色の組み合わせを使っている画像をシミュレーションソフトで変換

例-3(比較的安全な色の組み合わせ)

  • ブルー系とイエロー系等、比較的安全な色の組み合わせを採用。
  • 緑と赤等の組み合わせは判別のつかない人がいる。
  • 背景色と前景色のコントラストを十分に確保。


アクセシブルな画像の例 - 比較的安全な色の組み合わせを用い、コントラストを十分に確保

例-3(例-4(背景と前景の境界を"抜く")

  • 危険な色の組み合わせでありコントラストも不十分だが、白い境界線を用いてアクセシビリティを確保。


背景と前景テキストの境界に白い縁取り線をひいてアクセシビリティを確保

Tips
  • [19] 危険な色の組み合わせを避け、前景色と背景色のコントラストを十分確保する。
  • [20] 色のコントラストを確保出来ない場合、危険な色の組み合わせを用いる場合は、安全な色の境界線を用いることで認識性を確保する。

Home

©2003 Project UDON. Produced by Alfasado, Inc.
作成日:2003-11-03T08:35+09:00/更新日:2007-07-27T22:15:45+09:00