ユーザビリティが「使いやすさ」を指す言葉だとすると、アクセシビリティとは「使えるかどうか」を指す言葉で、コンテンツにおいてユーザビリティのひとつ手前にあるものです。例えば、障害を持つ方や高齢の方を含む、できるだけ多くの人にとって「そもそも使える」ものにするために、アクセシビリティへの配慮が必要になります。
Web上で公開されているコンテンツはあらゆる人に見られる可能性があり、私たち制作者は、常にアクセシビリティに配慮したデザインを心がけなければなりません。今回は色のアクセシビリティガイドラインの概要と、基準を満たしているかどうかを簡単にチェックできるツールをご紹介します。
目次
WCAG（Webコンテンツアクセシビリティガイドライン）
「Web Content Accessibility Guidelines」の略称で、Web技術の標準化を推進する団体であるW3Cが提唱する、世界中で普及しているWebコンテンツのアクセシビリティガイドラインです。このガイドラインに従うことで、誰にでも利用しやすいWebコンテンツになります。
WCAGの特長
・国際規格である
何度か改定されたのち、2012年に国際規格となり、以降世界中で基準として利用されています。
・技術を問わないガイドライン
技術トレンドは移り変わりが速いですが、どんな技術にも適用できるように定められています。
指標
テキストには、少なくとも 4.5:1 のコントラスト比が必要です。この比率は、コンテンツをアクセシブルにすることができると科学的に証明された数値です。
上記指標には当てはまらない、以下のような例外もあります。
例外① 大きなテキスト
サイズの大きなテキストには、少なくとも 3:1 のコントラスト比が必要です。
例外② 付随的なテキスト
アクティブではない要素、装飾としてのテキスト、写真の一部分である場合はコントラストの要件は無い。
例外③ ロゴ
ロゴにはコントラストの要件は無い。
色のアクセシビリティのチェックツール
WebAIM Color Contrast Checker
文字色と背景色のコントラスト比をチェックするツールです。
上記画像の場合は、ノーマルのテキストはAA（最低限の基準を達成）もAAA（高いレベルでの基準を達成）も満たせておらず、ラージテキストはAAのみ基準を満たせています。総括したコントラスト比は「3.68:1」で、この色の組み合わせはWCAGのガイドラインの基準の満たせていないということになります。
Colorable
色相（Hue）、彩度（Saturation）、明度（Lightness）をバーで調整しながらコントラスト比をチェックできるツールです。微調整しながら基準を満たす色を探すことができ、色の組み合わせから探したい場合に便利なツールです。
Adobe Color
Adobeのカラーパレット作成ツールに、高機能なアクセシビリティチェックツールが追加されました。
コントラスト比チェッカーに加えて、多様な色覚でのシミュレーション機能があり、「D型（1型）色覚」「P型（2型）色覚」「T型（3型）色覚」の見え方の確認をすることができます。上記画像の場合、P型色覚の人には、右2つの色（茶色と赤色）が同じように見えると判定されています。
色のシミュレータ（アプリ）
多様な色覚での見え方を確認できるアプリです。スマホのカメラを通して、リアルタイムで目に見えているものの多様な見え方を確認することができます。
まとめ
日本人の男性の約5%（20人に1人）、女性の約0.2%（500人に1人）が先天的な色覚異常を持っていると言われています。人数で見ると、想像していたより多いと思うのではないでしょうか？
例えば100人に「赤色」はどんな色？と聞いたとして、100人が全く同じ「赤色」を指すことはないと思います。私たち制作者は、100人にそれぞれの「赤色」があることを踏まえた上でものづくりをしていかなければなりません。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
