ハイコントラストはなぜ必要か - HANDAI JK Engineering Blog

HANDAI JKの石田です。突然ですが、「ハイコントラスト」というワードを聞いたことがありますか？ハイコントラストとは文字通り「コントラストが高い」という意味ですが、では「コントラスト」とは何でしょうか？

(本記事におけるコントラストは色のコントラストを指します。)

そもそもコントラストとは

コントラストとは「色などが並置されているものと著しく異なっていること」であり直感的に言えば、「どれだけ際立って見えるか」ということです。

コントラストが高いものと低いものを比べてみましょう。

f:id:handaijk:20200109022653p:plain — コントラストが高い

f:id:handaijk:20200109015201p:plain — コントラストが低い

黄の背景に青の文字が書かれたものははっきりと読み取ることができるのに対し、あずきの背景に薄紫の文字が書かれたものは注意して見ないと何が書かれているのか分かりづらくなっています。

コントラストの算出方法

色のコントラストは相対輝度というものを使って求めます。詳しく知りたい人はWikipediaの以下のページが分かりやすいです。値は(1:1～21:1)の間になります。

ja.wikipedia.org

ハイコントラストが有効なケース

「コントラスト」について大体掴んでもらったところで、今度はなぜハイコントラストが必要なのかということを考えてみましょう。ハイコントラストが有効なケースはおおよそ以下の通りです。

主題を強調させたい
誰でも見やすくしたい (アクセシビリティ)

どちらもとてもとても重要ですが、今回は2つ目の「誰でも見やすくする」方を少し掘り下げたいと思います。

色覚異常者のためのハイコントラスト

日本では、男性で約5%、女性で約0.2%の割合で色覚異常のある人がいます。色覚異常にもいろいろ種類がありますが、そのような人を含めた誰でも見やすくするために注意すべきことの1つにコントラストがあります。

Web Content Accessibility Guidelines 2.0 のコントラストの項目によると、コントラスト比4.5:1以上を意味するレベルAAは最低限満たす必要があり、コントラスト比7.0:1以上を意味するレベルAAAを満たすことがより十分であるとあります。

達成基準 1.4.3 を理解する | WCAG 2.0解説書

まとめ

この記事では、ハイコントラストをテーマに「コントラストとは何か」「ハイコントラストがなぜ必要か」ということを書いてみました。何気ないことが、自分自身には関係ないかもしれないけれど、他の人にとってはとても重要なことだったりします。誰に対しても行き届いたものを作れるエンジニア、デザイナーになりたいですね。