「色のこと」の版間の差分
提供: Test Wiki
Julyfestival (トーク | 投稿記録) (→webアクセスビリティ) |
Julyfestival (トーク | 投稿記録) (→一般的なブラウザ) |
||
| 行43: | 行43: | ||
|訪問済みリンク<br>（a:visited）||紫||#800080||purple||style="color:#800080;text-decoration:underline;"|見本 | |訪問済みリンク<br>（a:visited）||紫||#800080||purple||style="color:#800080;text-decoration:underline;"|見本 | ||
|- | |- | ||
| − | |||
| − | |||
| − | |||
|} | |} | ||
*マウスオーバー時や選択中のリンクは | *マウスオーバー時や選択中のリンクは | ||
2016年12月3日 (土) 20:25時点における版
- ウィキペディアのベースになっているMediawikiについて
- デフォルトの配色の説明
- リンク、赤リンク
- 背景色
- スキンのこと
- カスタマイズできる
- 一般的なブラウザの設定・挙動について
- リンク、閲覧済みリンク
- アクセスビリティの観点について
- コントラスト比 JIS、ISO
- 実際の色を表示してみせる
- 「配色」以外のアクセスビリティの考え方について紹介する
- デザインの観点について
- 色が与える情報についての概論
- 「色遊びはケシカラン」という全く根拠のない感情論があることも紹介
- 過剰な重みづけ
- 合意形成をすべし
Help:配色
一般的なブラウザ
- 一般的なブラウザでは、デフォルト設定として次のような配色になっています。
- インターネットエクスプローラーの例
| 項目 | 色 | コード | 色名指定 | 見本 |
| 背景 | 白 | #FFFFFF | white | |
| テキスト | 黒 | #000000 | black | 見本 |
| 未訪問のリンク （a:link） |
青 | #0000FF | blue | 見本 |
| 訪問済みリンク （a:visited） |
紫 | #800080 | purple | 見本 |
- マウスオーバー時や選択中のリンクは
- ブラウザやバージョンによっての違いもあります。
- 利用者毎にブラウザの設定をカスタマイズすることで、これらの配色は変更することができます。
- 各サイト毎で個別に配色を指定することも可能です。
- ただし一般的な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では、背景色と前景色（文字色）のコントラスト比に着目し、その値を指定しています。
- 等級AA - コントラスト比が少なくとも4.5:1以上あること。
- ※注 文字サイズが大きい場合には3:1まで緩和可。
- ※注 「文字サイズが大きい」は、日本語テキストの場合、22ポイント以上または18ポイント以上の太字。半角英数字の場合、18ポイント以上または14ポイント以上の太字。
- 等級AAA - コントラスト比が少なくとも7:1以上あること。
- ※注 文字サイズが大きい場合には4.5:1まで緩和可。
- 実際の配色例
| 見本 | 背景色 | 文字色 | 実際のコントラスト比 | AA | AAA | |
| これは見本です | #FFFFFF | #000000 | 21.0:1 | OK | OK | 白背景＋テキスト |
| これは見本です | #FFFFFF | #0000FF | 8.59:1 | OK | OK | 白背景＋リンク |
| これは見本です | #FFFFFF | #800080 | 9.42:1 | OK | OK | 白背景＋リンク（訪問済） |
| これは見本です | #FFFFFF | #FF8000 | 2.52:1 | NG | NG | 白背景＋リンク（アクティブ） |
| これは見本です | #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不適合 |
| これは見本です | #00FF00 | #0645AD | 6.22:1 AAA不適合 |
4.51:1 AAA不適合 |
1.52:1 AA不適合 |
3.1:1 AA不適合 |
- 背景 #00FF00
- 前景 #0B0080
