株式会社リバース(Rivers inc.)|山口県山口市

ブログ

色覚とコントラスト

  • WEB
  • 分析
Yum
画像:色覚とコントラスト

(ピンポイントですけども)Webサイトの文章内の強調色として何色が良いか考えました。
赤を強調色として思い浮かべる人が多いかもしれませんが、
色が見分けにくい人、形が見分けにくい人も考慮すると、見分けやすくコントラストが確保される色はあるのか、改めて比較してみました。

Photoshopの「色の校正」を使ったシュミュレーションです。
(C型は日本人男性の約95%、女性の99%以上だそうです)

マウスオーバーでC型とP型切り替え

C型色覚

P型色覚

D型色覚

白い背景に黒またはグレーの文字の文章のページがあったとして、
目立つのは黄色と水色ですが、色を見分けつつコントラストがつけられそうなのは赤、緑、水色かなと思います。

Adobeのコントラストチェッカーで、WCAG 2.1 レベル AAで合格した色の一例
濃い赤(#b72914)
暗い水色(#5d709f)
濃い緑(#716638)


このへん↑
なら黒い文字とは別の色に見えつつ、コントラストも確保できるのかなぁと思いました。
(緑だとC型の人には目立たないかも?ブルーはリンク色になりやすいし。やっぱり強めの赤?)

個人チェックですが、
私は視力がとても低い(近視・乱視)ので眼鏡を外してコントラストチェックをしてみます。
すると、確かに薄い色は見えませんが、コントラストチェッカーで不合格でも、くっきりした文字ならちょっと潰れた黒い文字よりも読みやすい事があります。

この画像では、右の水色の文字はコントラストチェッカーで不合格ですが、左の少し滲んでいる黒文字よりも可読性がやや高いです。

強調の方法は色以外にもありますし、デザインとのバランスやサイトの目的など様々な要因があると思うので、全体を考えないとうまくいかないと思いますが、とりあえず見比べてみました。

ご依頼・ご相談はこちら

お客様にヒアリングさせていただき、ご依頼内容のボリュームや必要な機能をすり合わせ、
企画・構成と共に御見積もりをスケジュールをご提案いたします。

お問い合わせ

人気の記事

スタッフ