「Colour Accessibility」を読みました

電子書籍Colour Accessibility」を読みました。色のアクセシビリティを多方面から取り上げられています。英語ですが、わかりやすく、読みやすかったです。
覚え書き@kazuhi.toの記事(記事作成時には404 Not Foundになっていますが)もどうぞ。

Colour Accessibility

Colour Accessibilityの内容からいくつか気になったことを挙げます。

導入

Webサイトの閲覧やアプリの利用、ゲームのプレイに影響する障害というものを私達が考えるとき、最初に思い浮かぶことはしばしば極端(extreme)です。例えば全盲であったり、身体障害によってマウスのようなポインティングデバイスが使えないであったり。

もちろん全盲であったり、ポインティングデバイスを使えない環境を考えなくて良いというわけにはなりませんが、それだけしか考えない、取り上げないというのも考えものですね、ということだと思いました。

また、色というのはとても相対的なもので、デバイスによって見え方が異なるでけではなく、人によっても見え方が異なりますが、

私達の多くはたった1つの色覚(color vision)だけを考慮してデザインしています。

1. 色弱について学ぶ

色弱(color blind)という言葉は誤解を与えかねません。色を全く認識できない人やグレースケールで認識している人を指すことはほとんどありません。実際には色を見る(see)能力や色を区別する能力の低下です

2. 適切な色を選ぶ

色を区別する能力は3つの属性(色相、彩度、明度)によっていますが、

視力障害(a visual impairment)をもった人にとって、コントラストはページの要素の可読性を上げる最も重要な要因の一つです。

とのことです。この章ではコントラストの種類が4種類挙げられていますが、アクセシビリティを考慮した場合は明度差によるコントラストが最も重要とのことです。

  • 明度によるコントラスト
    • 明度に差のある色を選ぶ、ということだと思います。
  • 補色によるコントラスト
    • 色相環で反対の色を選ぶ
    • 明度によるコントラストの調整が必要
  • 寒色と暖色によるコントラスト
    • 寒色から明度の低い色、暖色から明度の高い色を選ぶと、寒色同士、暖色同士より良いコントラストを提供できるだろう(will)
  • 彩度によるコントラスト
    • 彩度に差のある色を選ぶ
    • 明度によるコントラストほど効果的ではない

また、色をつける(introduce color)前にグレースケールでデザインする方法があげられていました。

グレースケールでデザインすると重要な要素間のコントラストにフォーカスできるでしょう。

具体的なフローは紹介されなかったのですが、明度だけを調整してビジュアルデザインを進めるということなのでしょうか?この方法が効率的なのか、効果があるのか私には判断できませんが、興味深いと思いました。

3. ヒント(Tips and Tricks)

  • 色のサンプルには名前も一緒に提供する
    • 可能な限り色相の名前を使う(「グレープ」で想起する色は人によって異なるため)
  • リンク
    • 本文の中にあるリンクに下線を引かずに色の違いだけで表現する場合
      • 色の違いを識別できないユーザーはリンクであることに気が付かない可能性がある
        • ホバー時に下線を引くだけでは効果がない
          • ユーザーがこれはリンクかなという期待をいだいてホバーすることを製作者は期待できない
          • モバイル端末にはホバー状態がない

4. 確認方法

各種シミュレータの紹介などがありました。

5. 代替物を提供する

最初からアクセシブルにするのが一番ですが、すでにリリースしてしまったものがある場合は、代替スタイルを提供したりユーザーが色を変更できる機能を用意する、ということでゲームなどでの例が紹介されていました。

調べた単語など

読み進める上で調べたことなどです。

sex-linked trait
伴性遺伝形質
pupil
瞳孔
receptor cells
受容細胞
rod
桿体
cone
錐体
photopigment
光色素
trichromat
3色覚者
dichromat
2色覚者
monochromat
1色覚者
Protanopia
1型2色覚(本文中ではred-blindnessという表記も)
Deuteranopia
2型2色覚(本文中ではgreen-blindnessという表記も)
Tritanopia
3型2色覚(blue-blindnessという表記はなかった)
.ASE export function
Adobe Swatch Exchangeファイルエクスポート機能