コントラスト比を気にしよう!そのUI、実は見えづらいかも(2)

こんにちは。
デザイン・システム室の です。

前回、コントラストについてある程度の解説を行いましたが、
今回はその続きとして実際に作成する際にどのように注意し、確認すれば良いかを解説していきたいと思います。

UIを作成する際に、視認性を考慮したものを作成するための基準として、W3Cが作成した
「Webコンテンツアクセシビリティガイドライン」のコントラストに関する項を挙げました。

1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)

大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。

ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html(W3C:コントラスト (最低限):達成基準 1.4.3 を理解する)

上記のような内容でしたね。

では、どの様にしてガイドラインに沿ったUIを作成すれば良いのでしょうか。
テキストのサイズはわかりますが、コントラスト比はどのように出せば…?

コントラスト比に関してはツールを使用しましょう。
「コントラストチェッカー」などのキーワードで検索すると簡単に使用できるものがいくつか出てくると思います。
それだけではあんまりなので、Sketchを使用した確認方法を紹介します。

今回はStarkというプラグインを使用します。

Stark – The suite of integrated accessibility compliance tools for product development teams.

https://www.getstark.co/

Starkは色覚異常のシミュレーションやコントラストのチェック、及びチェック結果を基にした配色の提案(実装予定らしいです)を行うSketch、Adobe XD、Figmaに対応したプラグインです。

色覚異常シミュレーションをしてみよう

今回は、Free版のStarkを使用するので使える機能としては三種類の色覚異常シミュレーションとなります。
弊社が運営している宅配食サービス「ミールタイム」のECサイトを例にしてみましょう。

公式サイトやSketchpacksなどからプラグインをインストールしましょう。
Starkのシミュレーション設定ウィンドウ

開くとシミュレーションの設定画面が出てきます。
とはいえ、使用するアードボードとシミュレーションする色覚異常の分類を選択するのみなので簡単ですね。

以下が実際に試した結果です。

どのパターンを見ても、コントラスト比に大きく変化がうまれているものはあまりない様にみえますね。
ただ、1型2色覚のパターンで赤文字が黄土色になってしまっている点は注意が必要そうです。
ほぼワンステップで確認することができるので思い出した時に確認してみるなどしても良さそうですね。

Starkでコントラストチェック

StarkはFree版でもコントラストチェックを行うことができます。
こちらも簡単に確認してみましょう。

チェックしたいオブジェクトを作成してプラグインタブからStark > Check Contrastです。
簡単ですね。

結果はAAで大丈夫そうです。

まとめ

前回と今回の記事で

  • コントラスト比の基準
  • 視認性に考慮したコントラスト比の確認
  • 色覚異常のシミュレーションとどの様に見えているかの確認方法

以上の3点を確認してきました。
UIを作成する上で色の選択は非常に重要な要素でありながらも、必ずしもすべての人が同様に見えているわけではないと言う不安定性もあります。
すべての配色を確認することは難しいと思いますが、「決定ボタン」「削除ボタン」など重要な意味を持つものについては、どのように見えるのか一通り調べてみたほうがよさそうです。

現在デザインシステム室では、新しいメンバーを募集しています。
少しでも興味を持たれた方、ぜひご応募ください。
お待ちしております!

募集要項およびエントリーフォーム >