色盲、あるいは色覚異常（CVD）を持つ人々には、Wikiが違った見え方をしていることがあります。CVDには、特定の色の違いを見分けることができない等の特徴があります。
男性の約8%、女性の約0.5%[1] が色覚に何らかの異常を持っています。
そのためWikiで使っている色の種類によっては、CVDを持つ一部の人々がテキストと背景色の色の違いを見分けられないことがあります。CVDを持つ人がそうしたWikiを訪れても、記事を読むことが困難、あるいは不可能ということになります。
しかし、コミュニティ内で色覚の多様性に対応するための方法を学ぶことは可能です。CVDを知るためにわずかな時間を費やすだけで、何をすれば良いのか知ることができます。
CVDについて知ろう[]
CVDを理解するうえで最も重要なことは、色覚異常のありかたは一様ではないということです。CVDには多くの異なる種類がありますが、特に多いのが赤緑色覚異常で、その中にも赤色盲（Protanopia）や緑色盲（Deuteranopia）等の分類があります。Wikiをデザインする際には、こうした色覚異常への対応を組み込む必要があるでしょう。
例えば、赤緑色覚異常を持つ人は、濃赤ないし濃緑と黒を見分けられないことがあります。もしあなたのWikiで黒を背景色に選んでいる場合、赤色盲を持つ読者はレッドリンクになっている箇所を読むことができません。同様に、黒い背景でテキストのメインカラーを緑にしていると、一般的な色覚異常である緑色盲を持つ人にとって、非常に読みにくいサイトになってしまいます。
CVDを持つユーザーへの対策[]
サイトワイドの解決策[]
CVDにはいろいろな種類があるため、CVDを持つユーザーに向けた単一の“解決策”は存在しない、と言えるでしょう。しかしそれでも試すべき手段はあります。テーマデザイナーやサイトワイドのCSSを使えば、CVDを持つユーザーの90%以上にとって、あなたのwikiを見やすいものにできます。
Don't Believe Your Eyes - How to Design for Colour-Blindness (Geri Coady)
CVDに対応したウェブデザインのエキスパート、Geri Coadyによるセミナー
- 背景とテキストの色に高いコントラストをつける。もし背景に暗色を選んだなら、テキストは明色を使いましょう。暗い背景に暗い文字だと、一部の読者に読みにくさを招きます。Wikipediaのデフォルトカラーが白背景と黒文字なのには、明確な理由があるのです。このデフォルト色を読み分けられない人はほとんどいません。
- カラーコードを多用しない。文章中の特定の一部分に色を付けるのは、一部のCVDの読者にとっては全く無意味なことです。（さらにいえば、CVDを持たない人にも混乱の原因になる可能性があります。というのも、色に対する感覚には文化的な違いがあり、赤で幸運を連想する人もいれば、危険を連想する人もいるのです）
- カラーコードを使わなければならない場合も、色だけが差別化の手段ではないことを意識しましょう。文字が表示された色付きのボックスは、CVDを持つ多くの読者にとっても識別可能な表示形態です。文字の読みやすさを重視するなら、背景色にグラデーションをつける方法もあります。どちらの場合も、サイト内で特定の色に何らかの意味をもたせるなら、その説明文をwikiに載せておくべきでしょう。
- むやみに色に変化をつけない。“この色が可愛いから！”などの理由でインフォボックスやナビボックスの色を変える行為は、色覚に問題を持つユーザーを不用意に遠ざける要因になります。
これらの対策を講じれば、読者のあいだで読みにくさへの不満が出ることも少なくなるでしょう。
個々のユーザーを手助けする[]
もちろん、サイトによっては明確な理由があって、必ずしもCVDには適さない配色を選んでいる場合があります。例えば、wikiのテーマが特定の色に関係しているケースがこれに当たります。Stranger Thingsのwikiが黒い背景にダークレッドのロゴを使っているのは、当然のことと言えるでしょう！
そうしたケースでは、より個別的な対応が必要とされます。
Fandomユーザーは個人用CSSを使ってサイトの見た目を自分専用にカスタマイズすることができます。サイトのヘッダーやページの背景、タイトル、リンク、フォント、タブ、ギャラリー、インフォボックス、その他の要素を、個々の必要に応じて変えることができるのです。
最近、CVDを持つユーザーの方が、ほぼあらゆるWikiのほぼあらゆる内容をCVDにフレンドリーなものに改変するカスケーディング・スタイルシートのサンプルの制作を手助けしてくださいました。このスタイルシートは個人利用に限って開放されているので、ぜひご利用してみてください。
もちろん、このコードが個々のニーズに完全に対応できる保証はありません。あくまで問題解決に向けた“プランA”といったところでしょう。またこのコードは個人用CSS限定なので、コミュニティワイドCSS用に改変するには適さないセレクタを使っています。
もしこのコードが特定の問題解決の役に立たない場合、私たちに直接コンタクトをとってくだされば、スタッフ・メンバーが個々のニーズを満たす手伝いをさせていただきます。
脚注[]
関連情報[]
- ヘルプ:コントラスト
- ヘルプ:個人用CSSとJavaScript - 個人用のCSS編集
- そもそも色覚異常って何?
- Coblis - 画像やスクショをアップロードして、どう見えているかをチェックするツール
- 色のシミュレータ - 色覚特性のある人の見え方を確認できるアプリ
- Improving Color Accessibility For Color-Blind Users
- Syncerのコントラストチェッカー
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。