西岡ゼミブログ

~let's zeminication~

【活動報告】コントラスト比について

みなさんこんにちは! 西岡ゼミのおれないみかんです!

 

 

さて、もうすぐ4月ですね!

読者の方に春から龍谷大学生の方はいるでしょうか?

 

私たちおれないみかんは春から大学4回生になります。

卒業論文を書くことに忙しくなる年ですね……

 

というわけで今回のブログではそんな私たちが研究の一環として調べてきたことを報告していこうという回になります!

 

シリーズ化するかもしれないから小出しで紹介!

今回はコントラスト比について解説するぞ!

 

 

コントラスト比って?

正確には最も明るい色と最も暗い色の明るさ(輝度)の比率のことですが、わかりやすく大雑把にウェブサイトの場合を説明すると、背景色と文字色の色の差です。

このブログだと背景色は白色、文字色は黒色ですね。

 

この輝度の比率(色の差)が小さいものは見づらいね!ってことです。

 

 

というわけで、このような画像を用意しました。

f:id:nishioka-ryukoku:20220326191010p:plain

あまりのセンスのない配色にブラウザバックしようと思った方、もうちょっとだけお待ちください。

 

これらのコントラスト比を出してみると……

f:id:nishioka-ryukoku:20220326191024p:plain

じゃん

 

黄色+白色の組み合わせや、桃色+橙色の組み合わせで約1との結果がでました。

 

ちなみにこの数値、「WCAG 2.0」というWebアクセシビリティガイドラインでは、小さな文字はコントラスト比が4.5:1、大きな文字の場合はコントラスト比が3:1以上あることを達成基準としているため、明らかにユーザビリティ的観点からアウトなのです。

 

白と黒の組み合わせは21。最強です。

 

活用手段&締め

では具体的にこのコントラスト比という指標をどのように使っているのでしょうか。

 

私たちが所属している龍谷大学には現在10種類の学部が存在しており、経営学部なら橙色、文学部なら紫色といったように、それぞれの学部にはテーマカラーが決められています。

 

するとそれぞれの学部のウェブサイトのテーマカラーもその色に準じていて、学部によってコントラスト比的に見づらいウェブサイトがあるわけで……

 

 

なかなかおもしろいでしょう?

 

 

今回取り扱った内容も含め、私たちはウェブサイトを使った研究を行っています。

 

どのような取り組みを行っているか、ぜひ私たちのウェブサイトを訪れてみてください!

 

nishioka-ryukoku.jimdofree.com