【アクセシビリティ】 誰もがみやすい色のコントラストとは？

こんにちは
1年目の小川です。

今回は、色のコントラストについてまとめていきたいと思います。

色のコントラストとは？

コントラストとは、色の対比のことをいい、デザイン用語では、明度、彩度、色相の差のことをいいます。
コントラストが高いと、はっきり見え、コントラストが弱いと見えにくいことがあります。

コントラストがはっきりしていないと何が困るの？

例えば灰色と白、赤と緑、紫と青、オレンジと黄緑、赤と黒といったような配色があったとします。
見えなくはないかもしれませんが、見えにくい配色だと思います。
しかし、視覚障害や色覚障害の人にとっては、そこに文字があると気づかないような配色でもあります。
見え方は人それぞれなので、見える人もいれば、見えない人もいると思います。
しかし、灰色の背景に白い文字はパッとみたときにすぐに書いてある文字を認識することは難しいと思います。
このように、色の配色によって、見えにくいとせっかく書いてある文字が読めずに、そこにある情報を得られないことになります。

コントラストに基準はあるの？

それでは、どのような配色であれば、みやすいとされているのでしょうか？
それでは、どのような配色であれば、みやすいとされているのでしょうか？
WCAG2.2によると、4.5:1というのが、基準として一つ規定されています。
つまり、4.49:1以下のコントラスト比では、見えにくい可能性があるということです。

具体的にどんなコントラストが魚井の？

4.5:1の比率と言われても、どのぐらいなのかイメージつきにくいですよね？
ということで、以下で少し紹介したいと思います。
ここでは、カラーコントラストチェッカーアナライザーツール | Adobe Colorというツールを使って、実際に試してみたいと思います。

• 4.49:1より下の場合

• 4.5:1より上の場合

最後に

今回は、簡単にではありますが、色のコントラストについて紹介してきました。
せっかく見せたい文字や画像があっても、届けたい人にその情報が届かなかったら勿体無いですよね。
以下で、ツールのURLも記載したいと思いますので、ぜひ一度試して実際にそれぞれの開発環境に反映させてみてください。
ここまで読んでいただきありがとうございました。

参考サイト

• WCAG2.2

• カラーコントラストチェッカーアナライザーツール | Adobe Color