コントラスト比 (CR, Contrast ratios) とは、背景 (背景色) と前景 (文字色) の明るさの比率です。この比率を意識することで、より多くの読者にとって、視覚的に読みやすいWikiにすることができます。
視力について[]
We're all shooting for the 20/20 line on this American eye chart.
視力というと、白い背景に書かれた黒いランドルト環 (アルファベットの「Ｃ」のような、一ヵ所が欠けた輪) や文字で計測する視力検査の結果を指します。日本では直径7.5mm、太さ1.5mmの円の一部が1.5mm幅で切れている環を、5m離れたところから見て正確に切れている方向がわかる能力を「視力1.0」としています。[1]
コントラスト比の算出[]
コントラスト比は、読みやすさを示す数値です。 コントラスト比は、最大の値が21:1で、白地に黒文字、あるいは黒地に白文字を意味します。最小の値は1:1の値で、背景色と文字色が同じことを意味します。
Adhering to the web standard doesn't mean you're stuck with boring blacks and whites. This gold-and-purple combo easily passes the AAA mark, as do tens of thousands of others.
視力は、コントラスト比による見えやすさにも影響しています。視力が1.0の人は、コントラスト比が2:1の記事を判読できますが、読みづらさを感じるでしょう。標準的な文字の大きさと視力で、最低でも3:1 のコントラスト比が必要とされています。
しかし、Wikiを利用するのは、視力が1.0の人だけではありません。World Wide Web Consortium (ワールド・ワイド・ウェブ・コンソーシアム, W3C) では、等級AAと等級AAAの２つの基準を設けています。
等級AAは、視力が0.5の利用者が読むのに必要とされるコントラスト比を基準としています。普通の文字サイズでは4.5:1、大きい文字サイズでは3:1です。コントラスト比が同じでも、文字の太さ (ストローク幅) が太いほうが、読みやすくなります。 [2]. 等級AAAでは、視力が0.25の利用者が読みやすいとされる、7:1以上のコントラスト比を基準としています。[3]
これらの基準に則り、文字以外のコントラスト比にも配慮が必要です。記事などの内容が正確に伝わるように、アイコンなどの画像要素についても、3:1以上のコントラスト比になるようにしましょう。[4]例えば、ゲームに関する記事のインフォボックスにて、「金」という言葉の代わりに「金」を表すアイコンを使う場合が当てはまります。この例ではアイコンが情報を示しており、意味が伝わるよう、視覚的な配慮が求められます。
0.25より視力の低い人については、通常、コンテンツにアクセスするために (コントラスト増強と画面拡大の機能を備えている) 支援技術を使用すると想定されています。 必要に応じて、個人用CSSを使ってサイトの見た目を自分専用にカスタマイズすることもご検討ください。[5][6]
脚注[]
- ↑ ニデック - 目のおはなし Vol.5 視力1.0の基準はなに？
- ↑ WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum). Level AA
- ↑ WCAG 2.1 Success Criterion 1.4.6 Contrast (Enhanced). Level AAA
- ↑ WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast. Level AA
- ↑ Contrast (Minimum) Understanding SC 1.4.2. W3C.
- ↑ Contrast (Enhanced) Understanding SC 1.4.6. W3C.
関連情報[]
- ヘルプ:コントラスト ― コントラスト比についての基本的な情報
- ヘルプ:色覚多様性に対応した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.
Webサイト[]
- W3C Web Accessibility Initiative's guide to colors with good contrast
- 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.
- WCAG Contrast Checker - a tool for checking if the contrast meets WCAG guidelines for AA and AAA standards.
- CheckMyColours - a tool for checking all your wiki's current foreground and background color combinations.
- W3C's list of contrast ratio checking tools
- The Braille Institute's digital tech section and various free apps that help you simulate several eye disorders.
その他のヘルプとフィードバック[]
- ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
- 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
- この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
- このヘルプはコミュニティセントラル内にて管理されています。