Wikiのあるページを見ているとしたとき、全ての閲覧者に同じように見えているわけではありません。低コントラストの文章、とりわけ背景色のあるものは、視認性が低く、特にコントラスト感度が低い人にとっては、読みづらいものです。白地に黒の文字は、そのような方にとっても視認しやすい一方、他の色の組み合わせでは、読みづらさを感じさせるだけでなく、頭痛を引き起こす原因にもなりえます。これは、年齢を重ねると誰もが直面する問題であるだけでなく、目を酷使している現代人の多くが抱えている問題でもあります。
ウェブでの文字コントラストの基準にしたがうだけで、そのような人を含む誰もが見やすいWikiにすることができます。それによって、利用者がより長くWikiを利用したいと思えるようになるでしょう。
読みづらさの原因や問題点[編集 | ソースを編集]
みなさんは、読みづらさにつながる眼疾患を知っていますか。例えば、緑内障、網膜症[1] や乱視などがあります。 年長者がかかるものと思われがちですが、実は、誰でも、どの年代でも起こりうる症状です。
高コントラストのデザインは、視覚障碍のある人のためだけに行うべきなのではありません。色の組み合わせの悪いWikiは、それだけで目の疲れや不快感を引き起こすため、見え方に問題のない人も、長居したいとは思いません。 [2]
コントラスト比[編集 | ソースを編集]
コントラスト比に気を配るだけで、コントラストを高めることができます。ヘルプ:コントラスト/発展では、コントラスト比のウェブ標準に関するとても素敵な数式を紹介しておりますが、Wikiをより良くするのに、その比率を理解する必要はありません。
Wikiで高コントラストを実現させるには、どうすればよいのでしょうか。
コントラスト・アナライザー (contrast analyzer) というツールを使って、簡単にコントラスト比を高めることができます。 左の例はそのうちの１つを利用したものですが、ブラウザの拡張機能など、どのサービスを使ってもかまいません。
ウェブ標準では、等級AAと、等級AAAの２つの達成基準があります。コントラスト・アナライザーでは、指定した色の比がそれらの基準を達成しているかを確認することができます。 色のアクセシビリティに対応するには、少なくとも、背景色と文字色のコントラスト比が等級AAに達する必要があります。等級AAAは、色覚特性などのあるユーザーにとっても判読しやすいコントラスト比があることを示します。ぜひ等級AAAの基準でデザインするよう心がけてみてください。
文字サイズとコントラスト比[編集 | ソースを編集]
文字サイズが大きければ、コントラスト比がそこまで高くなくても、読みやすくなります。つまり、地の文章のコントラスト比を高くしておけば、見出しを少し凝ったデザインにしても、それほど読みづらくはならないということです。
この例の組み合わせでは、大きい文字でのみ等級AAを達成しています。通常の文章では、この色の組み合わせは使ってはいけないということです。
多くのコントラスト・アナライザーでは、選んだ色のコントラスト比 (Contrast ratio, CR) が大きい文字サイズでは基準を達成するかどうかも示されます。ツールによっては、"large" と表示された場合は大きいサイズのみで達成、そうでなければ普通の文字サイズでも達成していることを意味します。
ワードマークの多くは、ロゴも大きく、意匠化されているため、最低限のコントラスト比に到達していません。しかし、コントラスト比を気にかけなくてよいというわけではありません。例えば、白を基調としたロゴは、白い背景色では判読できません。そのため、白系の背景と併せて使いたい場合は、ロゴに暗い色の囲み線や影をつけるようにする必要があるでしょう。
ベストプラクティス[編集 | ソースを編集]
より読みやすい色の組み合わせを選ぶための最善の実践とは何でしょうか。明るい背景色と暗い文字色の組み合わせと、その逆の組み合わせは、どちらがより読みやすいかは、よく議論されることの１つです。[3] しかし、コントラスト比については、W3CのWeb基準を達成すべきことに対して、異論は聞かないといってもよいでしょう。誰もが読みやすいWikiにするために心がけるべきポイントを、以下に数点挙げます。
- 本文のコントラスト比は、少なくとも等級AAを達成すること。―等級AAAを達成することが望ましい。
- コントラスト・アナライザーの結果を正しく読み取ること。どの文字サイズに関する判定かを確かめましょう。18px以上で基準を達成する色を、11pxの文字に使用してしまっては、意味がありません。
- 補色 (色相環で正反対の位置にある色) や、近似色を組み合わせないこと。特に避けるべき背景色と文字色の組み合わせは、緑と赤、赤とシアン、マゼンタと緑、青と赤、黄色と青です。[4]
たったこれだけのポイントに気をつけるだけで、多くの人がWikiを読みやすくなり、Wikiをゆっくり楽しもうという気持ちになります。
脚注[編集 | ソースを編集]
- ↑ Shaver, Kelli. "5 Ways to Ensure Your Site Is Accessible to the Visually Impaired". mashable.com. 20 April 2011.
- ↑ Sheedy, Jim and Kevin Larson Monitor. "Blink: the stress of reading". eyemagazine.com. Spring 2008.
- ↑ anthony. "When to Use White Text on a Dark Background". uxmovement.com. 28 April 2011. Read in particular the many comments at the bottom of the article.
- ↑ Gabriel-Petit, Pabini. "Applying Color Theory to Digital Displays". 20 January 2007. uxmatters.com Note that much of this article is out-of-date, as it pertains to types of displays that are not in wide use in 2018. Nevertheless, this one point, at least, still stands.
関連情報[編集 | ソースを編集]
関連するFandomの記事[編集 | ソースを編集]
- ヘルプ:コントラスト/高度な情報 ― コントラスト比についてのより詳しい情報
- ヘルプ:色覚多様性に対応したWiki
- An overview of wiki design (英語)
- A video town hall about CSS with a section about color theory, starting roughly at the 58-minute mark. (英語)
外部リンク[編集 | ソースを編集]
- 日本語対応
- WikipediaのHelp:配色のコントラスト比
- カラー・コントラスト・アナライザー (A11y)
- WCAG 2.0 解説書 - コントラスト (最低限) 達成基準を理解する
- 基礎からわかるホームページの配色 - 文字コントラストの達成基準(JIS X8341-3:2016 1.4.3)
- 英語
- An interactive examination of the importance of contrast in web design
- Colorable, a simple contrast-checker for when you're planning your wiki's color palette.
- WebAIM.org - to see if your choice of page color and link color passes the web standard.
- CheckMyColours - a tool for checking all your wiki's current foreground and background color combinations.
- The Braille Institute's digital tech section and various free apps that help you simulate several eye disorders.
その他のヘルプとフィードバック[編集 | ソースを編集]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。
