Fandom


ヘルプ

Wikiのあるページを見ているとしたとき、全ての閲覧者に同じように見えているわけではありません。低コントラスト文章、とりわけ背景色のあるものは、視認性が低く、特にコントラスト感度が低い人にとっては、読みづらいものです。白地に黒の文字は、そのような方にとっても視認しやすい一方、他の色の組み合わせでは、読みづらさを感じさせるだけでなく、頭痛を引き起こす原因にもなりえます。これは、年齢を重ねると誰もが直面する問題であるだけでなく、目を酷使している現代人の多くが抱えている問題でもあります。

ウェブでの文字コントラストの基準にしたがうだけで、そのような人を含む誰もが見やすいWikiにすることができます。それによって、利用者がより長くWikiを利用したいと思えるようになるでしょう。

Contrast cones

読みづらさの原因や問題点 編集

みなさんは、読みづらさにつながる眼疾患を知っていますか。例えば、緑内障網膜症[1]乱視などがあります。 年長者がかかるものと思われがちですが、実は、誰でも、どの年代でも起こりうる症状です。

高コントラストのデザインは、視覚障碍のある人のためだけに行うべきなのではありません。色の組み合わせの悪いWikiは、それだけで目の疲れや不快感を引き起こすため、見え方に問題のない人も、長居したいとは思いません。 [2]

コントラスト比 編集

コントラスト比に気を配るだけで、コントラストを高めることができます。ヘルプ:コントラスト/発展では、コントラスト比のウェブ標準に関するとても素敵な数式を紹介しておりますが、Wikiをより良くするのに、その比率を理解する必要はありません。

Wikiで高コントラストを実現させるには、どうすればよいのでしょうか。

Colorable - The Color Palette Contrast Tester Dansky

Colorable - The Color Palette Contrast Tester Dansky

カラー・コントラスト・アナライザー (CCA) の使用例

コントラスト・アナライザー (contrast analyzer) というツールを使って、簡単にコントラスト比を高めることができます。 左の例はそのうちの1つを利用したものですが、ブラウザの拡張機能など、どのサービスを使ってもかまいません。

ウェブ標準では、等級AAと、等級AAAの2つの達成基準があります。コントラスト・アナライザーでは、指定した色の比がそれらの基準を達成しているかを確認することができます。 色のアクセシビリティに対応するには、少なくとも、背景色と文字色のコントラスト比が等級AAに達する必要があります。等級AAAは、色覚特性などのあるユーザーにとっても判読しやすいコントラスト比があることを示します。ぜひ等級AAAの基準でデザインするよう心がけてみてください。

文字サイズとコントラスト比 編集

文字サイズが大きければ、コントラスト比がそこまで高くなくても、読みやすくなります。つまり、地の文章のコントラスト比を高くしておけば、見出しを少し凝ったデザインにしても、それほど読みづらくはならないということです。

AA Large

この例の組み合わせでは、大きい文字でのみ等級AAを達成しています。通常の文章では、この色の組み合わせは使ってはいけないということです。

多くのコントラスト・アナライザーでは、選んだ色のコントラスト比 (Contrast ratio, CR) が大きい文字サイズでは基準を達成するかどうかも示されます。ツールによっては、"large" と表示された場合は大きいサイズのみで達成、そうでなければ普通の文字サイズでも達成していることを意味します。

ワードマークの多くは、ロゴも大きく、意匠化されているため、最低限のコントラスト比に到達していません。しかし、コントラスト比を気にかけなくてよいというわけではありません。例えば、白を基調としたロゴは、白い背景色では判読できません。そのため、白系の背景と併せて使いたい場合は、ロゴに暗い色の囲み線や影をつけるようにする必要があるでしょう。

ベストプラクティス 編集

より読みやすい色の組み合わせを選ぶための最善の実践とは何でしょうか。明るい背景色と暗い文字色の組み合わせと、その逆の組み合わせは、どちらがより読みやすいかは、よく議論されることの1つです。[3] しかし、コントラスト比については、W3CのWeb基準を達成すべきことに対して、異論は聞かないといってもよいでしょう。誰もが読みやすいWikiにするために心がけるべきポイントを、以下に数点挙げます。

  • 本文のコントラスト比は、少なくとも等級AAを達成すること。―等級AAAを達成することが望ましい。
  • コントラスト・アナライザーの結果を正しく読み取ること。どの文字サイズに関する判定かを確かめましょう。18px以上で基準を達成する色を、11pxの文字に使用してしまっては、意味がありません。
  • 補色 (色相環で正反対の位置にある色) や、近似色を組み合わせないこと。特に避けるべき背景色と文字色の組み合わせは、緑と赤、赤とシアン、マゼンタと緑、青と赤、黄色と青です。[4]

たったこれだけのポイントに気をつけるだけで、多くの人がWikiを読みやすくなり、Wikiをゆっくり楽しもうという気持ちになります。

脚注 編集

関連情報 編集

関連するFandomの記事 編集

外部リンク 編集

日本語対応
英語

その他のヘルプとフィードバック 編集

特に記載のない限り、コミュニティのコンテンツはCC-BY-SA ライセンスの下で利用可能です。