「色のこと」の版間の差分
提供: Test Wiki
Julyfestival (トーク | 投稿記録) (→一般的なブラウザ) |
Julyfestival (トーク | 投稿記録) (→webアクセスビリティにおける配色) |
||
| 行57: | 行57: | ||
==webアクセスビリティにおける配色== | ==webアクセスビリティにおける配色== | ||
| − | * | + | *高齢者や、視覚や色覚などに障碍を持つ人でも問題なく利用できるように、インターネット上では[[Wikipedia:アクセシビリティ]]という考え方があります。 |
===配色に関する規格=== | ===配色に関する規格=== | ||
*ウェブサイトの配色に関しては、日本の規格（JIS規格「JIS X 8341-3:2010」2010年制定）、国際規格（ISO規格「ISO/IEC 40500:2012」2012年制定、「[[Web Content Accessibility Guidelines|WCAG 2.0]]」とも）が定められています。 | *ウェブサイトの配色に関しては、日本の規格（JIS規格「JIS X 8341-3:2010」2010年制定）、国際規格（ISO規格「ISO/IEC 40500:2012」2012年制定、「[[Web Content Accessibility Guidelines|WCAG 2.0]]」とも）が定められています。 | ||
2016年12月3日 (土) 21:54時点における版
目次
Help:配色
一般的なブラウザ
- 一般的なブラウザでは、デフォルト設定として次のような配色になっています。
- インターネットエクスプローラーの例
| 項目 | コード | 見本 |
| 背景 | #FFFFFF | |
| テキスト | #000000 | 見本 |
| 未訪問のリンク （a:link） |
#0000FF | 見本 |
| 訪問済みリンク （a:visited） |
#800080 | 見本 |
- ブラウザやバージョンによっての違いもあります。
- 利用者毎にブラウザの設定をカスタマイズすることで、これらの配色は変更することができます。
- 各サイト毎で個別に配色を指定することも可能です。
- ただし一般的なwebデザインの観点では、これらの標準的な配色から著しく乖離した配色は、訪問者を戸惑わせることがあり、避けるべきだという考え方があります。
MediaWikiの仕様
- ウィキペディアで使用しているMediawikiでは、デフォルトの配色は次のようになっています。（外装にモノブックに設定している場合）
| 項目 | コード | 色名指定 | 見本 |
| 背景A | #FFFFFF | white | |
| 背景B | #F6F6F6 | ||
| テキスト | #000000 | black | 見本 |
| 内部リンク | #0645AD | blue | 見本 |
| 内部リンク（訪問済） | #0B0080 | 見本 | |
| リンク先のページが存在しない場合 | #BA0000 | 見本 | |
| リンク先のページが存在しない場合（訪問済） | #A55858 | 見本 | |
| 外部リンク | #3366BB | 見本 | |
| 外部リンク（訪問済） | #663366 | 見本 | |
| テンプレートの背景色A | #F9F9F9 | ||
| テンプレート見出し部の背景色A | #F2F2F2 | ||
| テンプレート見出し部の背景色B | #CCCCFF |
- これらの配色は利用者毎に個人設定で変えることができます。
- 外装（スキン）の選択や、カスタムCSSの設定で変更することができます。
- 記事やテンプレートごとに、個別に指定することもできます。
webアクセスビリティにおける配色
- 高齢者や、視覚や色覚などに障碍を持つ人でも問題なく利用できるように、インターネット上ではWikipedia:アクセシビリティという考え方があります。
配色に関する規格
- ウェブサイトの配色に関しては、日本の規格（JIS規格「JIS X 8341-3:2010」2010年制定）、国際規格（ISO規格「ISO/IEC 40500:2012」2012年制定、「WCAG 2.0」とも）が定められています。
- ※注 これらの規格は「配色」だけでなく、文字の大きさやマークアップなども定めていますが、本項では配色にのみ限定して解説します。
- WCAG 2.0やJIS X 8341-3:2010では、背景色と前景色（文字色）のコントラスト比に着目し、その値を指定しています。
- 「コントラスト比」は、最大で21：1、最小は1:1です。大きいほど視認性がよく、小さいほど視認性が悪くなります。（白地に黒で文字を書いた状態が「21:1」、白地に白で文字を書いた状態が「1:1」となります。）
- 等級AA - コントラスト比が少なくとも4.5:1以上あること。
- ※注 文字サイズが大きい場合には3:1まで緩和可。
- 等級AAA - コントラスト比が少なくとも7:1以上あること。
- ※注 文字サイズが大きい場合には4.5:1まで緩和可。
- ※注 「文字サイズが大きい」は、日本語テキストの場合、22ポイント以上または18ポイント以上の太字。半角英数字の場合、18ポイント以上または14ポイント以上の太字。
実際の配色例
| 見本 | 背景色 | 文字色 | コントラスト比 | AA | AAA | |
| これは見本です | #FFFFFF | #000000 | 21.0:1 | OK | OK | 白背景＋テキスト |
| これは見本です | #FFFFFF | #0000FF | 8.59:1 | OK | OK | 白背景＋リンク |
| これは見本です | #FFFFFF | #800080 | 9.42:1 | OK | OK | 白背景＋リンク（訪問済） |
| これは見本です | #FFFFFF | #0645AD | 8.53:1 | OK | OK | 白背景＋内部リンク |
| これは見本です | #FFFFFF | #0B0080 | 15.84:1 | OK | OK | 白背景＋内部リンク（訪問済） |
| これは見本です | #FFFFFF | #BA0000 | 6.8:1 | OK | NG | 白背景＋存在しないリンク |
| これは見本です | #FFFFFF | #A55858 | 5.08:1 | OK | NG | 白背景＋存在しないリンク（訪問済） |
| これは見本です | #FFFFFF | #3366BB | 5.59:1 | OK | NG | 白背景＋外部リンク |
| これは見本です | #FFFFFF | #663366 | 9.42:1 | OK | OK | 白背景＋外部リンク（訪問済） |
| これは見本です | #CCCCFF | #0645AD | 5.54:1 | OK | NG | 見出し＋内部リンク |
| これは見本です | #CCCCFF | #3366BB | 3.63:1 | NG | NG | 見出し＋外部リンク |
| これは見本です | #CCCCFF | #BA0000 | 4.42:1 | NG | NG | 見出し＋存在しないリンク |
| これは見本です | #CCCCFF | #A55858 | 3.3:1 | NG | NG | 見出し＋存在しないリンク（訪問済） |
- このように、ウィキペディア（Mediawiki）の標準的な配色内でも、組み合わせによっては「視認性が著しく低い」配色になることがあります。
色覚型による差異
- 上記の表は色覚による差異を考慮に入れていない（一般色覚C型）に基づくものです。色覚にはこのほかにP型（主に赤色についての感度が弱い）、D型（主に緑色についての感度が弱い）、T型（主に青色についての感度が弱い）、A型（複数の色について感度が弱い）の類型があります。
- 日本人では男性の20人に1人の割合でP、D、TないしA型のいずれかに該当するとされています。
- 代表的な組み合わせについて、P、D、T型のコントラスト比は次のようになります。
| 見本 | 背景色 | 文字色 | C型 | P型 | D型 | T型 |
| これは見本です | #FFFFFF | #000000 | 21.0:1 | 20.86:1 | 20.87:1 | 20.9:1 |
| これは見本です | #FFFFFF | #0000FF | 8.59:1 | 8.54:1 | 8.69:1 | 20.4:1 |
| これは見本です | #FFFFFF | #0645AD | 8.53:1 | 9.33:1 | 10.13:1 | 8.9:1 |
| これは見本です | #FFFFFF | #BA0000 | 6.8:1 AAA不適合 |
20.24:1 | 17.86:1 | 6.44:1 AAA不適合 |
| これは見本です | #FFFFFF | #A55858 | 5.08:1 AAA不適合 |
6.07:1 AAA不適合 |
5.01:1 AAA不適合 |
5.11:1 AAA不適合 |
| これは見本です | #FFFFFF | #3366BB | 5.59:1 AAA不適合 |
5.71:1 AAA不適合 |
6.05:1 AAA不適合 |
5.74:1 AAA不適合 |
| これは見本です | #CCCCFF | #0645AD | 5.54:1 AAA不適合 |
6.05:1 AAA不適合 |
6.69:1 AAA不適合 |
5.82:1 AAA不適合 |
| これは見本です | #CCCCFF | #BA0000 | 4.42:1 AA不適合 |
13.11:1 | 11.79:1 | 4.22:1 AA不適合 |
| これは見本です | #CCCCFF | #A55858 | 3.3:1 AA不適合 |
3.94:1 AA不適合 |
3.31:1 AA不適合 |
3.34:1 AA不適合 |
- 特に次に示すような配色例の場合、色覚の型による差異が著しくなります。
| 見本 | 背景色 | 文字色 | C型 | P型 | D型 | T型 |
| これは見本です | #00FF00 | #0B0080 | 11.54:1 AAA適合 |
7.62:1 AAA適合 |
2.39:1 AA不適合 |
7.16:1 AA適合 |
| これは見本です | #FF0000 | #FFFFFF | 4.0:1 AA不適合 |
20.02:1 AAA適合 |
16.39:1 AAA適合 |
3.98:1 AA不適合 |
| これは見本です | #000000 | #FF0000 | 5.25:1 AA適合 |
1.04:1 AA不適合 |
1.27:1 AA不適合 |
5.25:1 AA適合 |
| これは見本です | #0000FF | #FF9B16 | 4.07:1 AA不適合 |
3.72:1 AA不適合 |
4.09:1 AA不適合 |
8.37:1 AAA適合 |
このように配色によっては、ある色覚型の人には極めて視認性が良好でありながら、他の色覚型の人には全く読めないということが起きます。
- ※例の中の黒地に赤文字の場合、P型の人にはコントラスト比が1.04:1と、ほぼ全く見えません。（背景色：黒に文字色：黒で書いた場合が「コントラスト比1:1」）
標準以外の配色の利用について
- ウィキペディアでは、記事本文や表、テンプレートの中の文字や背景色を個別に指定する機能があります。（ただしTemplate:navboxなどの代表的なテンプレートでは、配色の変更を非推奨としています。）
- そうした機能の利用には、許容する意見と反対する意見があります。
- 許容する意見
- ナショナルカラー、イメージカラー、コーポレートカラーなど、記事の主題と密接に関わりのある配色を利用することは、記事の視認性を高める効果がある。
- 一定以上のアクセスビリティをクリアするならば、配色の制限を行う必要はない。
- 否定的な意見
- 全体の統一性を損なうべきではない。
- 色に頼らなくても情報が伝わるようにするべきである。
- 「色が重要な情報を伝達する唯一の方法にならないようにしてください。」（[Wikipedia:アクセシビリティ#色]]）
- 配色を自由にできるようにすることで編集合戦の温床になる。（利用者:ネイ/sandbox/テンプレートの色で編集合戦をしない）
- 記事に不適切な重みづけを与えることになる。（en:WP:UNDUE）
- 現在のところ、色の使用について制限をするかどうかは結論が出ていません。
- 双方の意見に配慮し、必要に応じて合意形成を図ってください。
- 具体的に配色を変更する方法については 利用者:ネイ/sandbox/色の使用 を参照してください。
- 色を標準色から変更する場合でも、上記のアクセスビリティにはじゅうぶんな配慮をしてください。
