リンクなど色の指定の際気をつけておくこと

1)色味の差を認識するのが難しい状況にある方は多くいらっしゃいます。

目の色覚や視力に個人差がある場合(色味の差が判別できない方は日本人男性20人に1人と言われています。)、環境や年齢、性別の違い、その他にも、長時間目を酷使して疲れているときなどと、その要因や原因はさまざまです。

該当の方がサイト内で重要な文章を見落とさないために注意する点

以上のことに気をつけて配色や文字指定を行っていきましょう。

2)サイト閲覧者は常に目が疲れる状況下にさらされています。

通常、サイトを閲覧する際はモニタを通して閲覧します。特に最近では液晶のモニタが普及されていますので、少し前のブラウン管のモニタよりも明るさが増しています。このことから、サイト閲覧者は常に目が疲れる状況下にさらされているということを忘れないように配色を行っていきましょう。

下に作成している表は、リンク指定をしなかった場合、
背景によってどのような印象がもたらされるかを示したものです。

具体例を表示させるため、あえてコントラストの強い、
目の健康によくない表示がされていますので

視力の悪い方、目が疲れやすい方、体調の悪い方
現時点で長時間パソコンを使用されている方、ご年配の方、
その他自覚症状のある方は以下の長時間の閲覧をご遠慮ください。

 
リンク

背景色とリンク色の各設定が
同じ場合→

リンクをクリック中の色#ff0000
リンク前の色#0000ff
リンク訪問済みの色#990099

下のセルは配色として
あまり推奨されない例です。

リンク
  • クリック前の色が同じです
  • 目に優しくない配色です
  • リンクの存在に気づかれません

文字色#000000
リンクをクリック中の色#ff0000
リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク
リンク
  • 目に優しくない配色です
  • 長時間眺めるのが苦痛です
  • クリック中の色が同じです

文字色#000000
リンクをクリック中の色#ff0000
リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク

リンク
  • 目に優しくない配色です
  • 長時間眺めるのが苦痛です
  • リンクが目立ちません。
  • クリックした後の色が同じです

文字色#000000
リンクをクリック中の色#ff0000
リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク
リンク
  • 青とオレンジは正反色の関係にあり、見続けると残像が残ります。とても目に痛い配色です。
  • 長時間眺めると苦痛です
  • 赤と同系色なので判別がしづらいです。
  • クリック中の色とほぼ同じです

文字色#000000
リンクをクリック中の色#ff0000

リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク

リンク
  • 目に優しくない配色です
  • 文字が大きい、または太字だとそれほど気になりませんが、文字が小さい、細い場合やリンクとリンクの隙間が小さいときには判別がしづらいです

文字色#000000
リンクをクリック中の色#ff0000

リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク

リンク
  • 目に優しくない配色です。
  • 文字が大きい、または太字だとそれほど気になりませんが、小さい場合やリンクとリンクの隙間が小さいときなど判別がしづらいです。

文字色#000000
リンクをクリック中の色#ff0000
リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク

リンク
  • 目に優しくない配色です
  • 注意をひきつける色としては
    効果的ですが、背景色の面積が大きい場合、文字を読むことに疲れてしまいます

文字色#000000
リンクをクリック中の色#ff0000
リンク前の色#0000ff
リンク訪問済みの色#990099

リンク リンク リンク リンク リンク