Wikipedia:色の使用
 | この文書はウィキペディア日本語版のガイドラインです。多くの利用者が基本的に同意しており、従うことが推奨されますが、方針ではありません。必要に応じて編集することは可能ですが、大きな変更を加える場合は、先にノートページで提案してください。 |
 | この文書の要旨:
|
色の使用はテキスト文字、表の背景、各種テンプレート、グラフや地図、写真画像などに適用されるガイドラインです。色の使用によって主に (1) 強調、(2) 分類・グループ化、(3) 色調による意味付けといった効果が得られます。しかし色の使用が﹁中立的な観点﹂や﹁ウィキペディアは何ではないか﹂などの重要な方針に抵触する可能性があります。
また、これらの方針を遵守していても、編集者が意図したつもりの色が視覚障害・色覚異常やモバイル端末利用者、記事をモノクロ印刷する読者には正確に認識されないことがあり、アクセシビリティの観点からも注意が必要です。
したがって、原則はウィキペディア初期設定 (デフォルト) の色を使用します。色を変更する必要がある場合にはWCAG[注1]に準拠し、色を唯一の表現とせず、読みやすいようにコントラスト比を高くします。
中立性・正確性と色の関係[編集]
「Wikipedia:中立的な観点」および「Wikipedia:ウィキペディアは何ではないか」も参照
記事執筆の要諦は、中立的かつ正確に意味を伝えることにあります。デフォルト以外の色使用が裏目に出て、中立性や正確性に悪影響を及ぼすことがあります。
強調効果[編集]
原則、テキスト文章を強調する目的でデフォルトの黒文字 (#252525) から色を変更してはなりません。執筆内容と不釣り合いな過度な重みづけになるためです。テキスト文章の強調には、太字や﹁かぎ括弧﹂表記で代替可能であり、必要十分です。したがって、既に大きな文字で表示されている見出しも文字色を変えてさらに強調する必要はありません。青リンクや赤リンクの色変更も禁止です。 テキスト文章だけでなく、表や{{Infobox}}を使って作成された基礎情報ボックス、{{Navbox}}や{{Sidebar}}を使って作成されたナビゲーションテンプレート、グラフなども同様です。ヘッダー行は原則デフォルト色を使用します。また表内のデータ背景色を指定する場合も、行全体ではなくセル単位に留めるなどの工夫を検討してください。グラフの背景色は白色にします。なぜならば、Wikipedia:箇条書きでは一般的に (表形式を含む広義の) 箇条書きよりも文章による説明を優先しているからです。記事内の一定面積を色で塗りつぶすことで読者の意識が色に集中し、文章中心で書かれた説明への関心が妨げられ、記事全体構成上のバランスが崩れる恐れがあります[注2]。 更には、強調効果が色の編集合戦につながる恐れもあります。執筆当初は色による強弱バランスが取れていても、記事内容の成長に伴って色の使用面積や色の種類が増えたりすることがあります。その結果、逆に強調したいポイントが定まらず、色が持つ本来の強調効果を失います[注3]。そこで特定箇所をより強調させようとして強い色を使用するようになり、最終的には記事全体の可読性が失われる要因になりえます。特に純色 (最も彩度が高い色) を多用すると、補色による残像効果が出て、記事の正確性を損なうこともあります。分類効果[編集]
複数の色を組み合わせて分類・グループ化する手法は表やグラフ、地図などにしばしば使用されます。例えば世界地図を用い、人口密度別に国・地域を高中低の3段階に色分けするといった使い方です。ところが配色によっては中が高や低よりも目立ってしまい、意味の重みづけに誤解を生じさせることがあります。 色分けの種類が増えることで、読者の記憶に残りづらくなる弊害も考慮しなければなりません。短期記憶の研究分野では﹁マジカルナンバー﹂として知られ、まとまりのある意味のかたまり (チャンク) が一定数を超えると記憶できないと言われています[注4]。その結果、色の凡例と表やグラフのデータ間を何度も視線を往復して読まなければ、意味がつかめないといった事態に陥りがちです。分類数が多い場合、色分けよりも採番 (1/2/3やA/B/Cなど) や略称といったテキスト表記の方が適していることもあります。 また単純な分類のつもりで行った着色が、一部の読者からは差別ないし逆差別として捉えられることもあります。例えば性別・年齢・出身地といった属性に応じて、一覧表上で特定人物のみ色で強調するのは適切でしょうか。区別と差別の境界線は曖昧ですが、記事ページ個々の文脈に即し、色使用の必然性を慎重に判断してください。意味付け効果[編集]
特定の色が特別な意味を持つ場合があります。それが一般に普及して公共性が高ければ、色による意味付けがウィキペディア読者の直感的な理解に役立つでしょう。信号機の色使いを援用した{{Yes}}や{{No}}を用い、勝敗や活動の進捗状況を色で分類するといった使い方が一例です。 しかし、色の使用によってブランディング効果が発揮される際には注意が必要です。企業ウェブサイト上で企業ロゴと同一のテーマカラーが多用されるのを見かけたことはないでしょうか。これはコーポレート・アイデンティティ (CI) の中でも特にビジュアル・アイデンティティ (VI) と呼ばれ、ブランド価値を高める企業戦略として普及している手法です。一方ウィキペディアでは宣伝行為が方針で禁止されています。仮に、企業について書かれたウィキペディアの記事ページを開くたびに、企業のCMソングが自動で流れたり、企業ロゴと同じフォントで記事が執筆されていたらどうでしょうか。CIやVIの観点に立つと、テーマカラーはCMソングやロゴフォントと類似のブランディング効果を有しています。したがって、企業・団体・製品・サービス・人物などのテーマカラーを使ってウィキペディア記事ページを意図的に着色する行為は宣伝手段とみなされることがあります。詳細は「ウィキペディアは演説台、広告宣伝の手段ではありません」を参照
また、複数の組み合わせ使用が想定されるナビボックスなどは、ページ執筆本来の「意味のつながりに即して順に記述する」という目的からも色の使用は好ましくありません。同じ色であっても互いの並べ方次第で、色彩の意味・伝わり方が変化します。その結果、色彩バランスを優先し、ナビボックスの配列順を入れ替える編集合戦につながる恐れがあります。
色を唯一の表現としない[編集]
仮に色の使用が適切と判断された場合でも、WCAG 2.0に準拠し[注6]、記事をモノクロ印刷したものやモノクロ画面で表示されるデバイスの利用者、視覚障害・色覚異常の利用者のため、色が情報を伝える唯一の手段とならないようにしなければなりません[注7]。ウィキペディアの公式モバイルアプリケーションは、一部の外装 (スキン) 設定以外では、画像を除きすべてモノクロで表示されます。また、先天性の色覚異常は日本人男性には特に多く、軽度のものは20人に1人が該当します。
詳細は「Wikipedia:アクセシビリティ」および「Help:携帯端末でのアクセス」を参照
こうした観点から、たとえば﹁表中の赤字部分は○○﹂といった方法を取ってはいけません。そういった場合は、太字を併用する、脚注を付ける、その﹁○○﹂を併記する、記号︵※印や三角など︶で表現する、あるいは斜線や格子柄などで地図・グラフを塗るなどの方法を取るべきです[注8]。
色そのものを主題とする記述︵例えば、球団のチームカラーや鉄道路線のラインカラー︶でも、その色だけを表示することはせず、必ずその色名またはRGBを併記するようにしてください。
ただし画像や動画︵以下画像類︶においては、色を使わずに同等な内容を伝えることが現実的に困難な場合もあります。また、記事の主題の説明は基本的には本文によって行われ、画像類は補助的に使われることがほとんどです。そのため、記事中に表示される画像類には、色を唯一の表現としていないことを厳格に求めません。色が分からない場合にも趣旨が伝わるような説明文を付ける、色だけに頼らないように画像類を作成する、といった工夫を心がけてください。
色覚異常への配慮に欠ける場合は{{色の使用}}、デバイス依存で色が適切に表示されない場合は{{色}}を記事の冒頭に貼付して、ノートページで改善のための議論を呼びかけます。
| アクセントカラー | ベースカラー | ||||
|---|---|---|---|---|---|
| 色名 | 色 | カラーコード | 色名 | 色 | カラーコード |
| 赤 | #ff4b00 | ||||
| 黄色 | #fff100 | クリーム | #ffff80 | ||
| 緑 | #03af7a | 明るい緑 | #77d9a8 | ||
| 青 | #005aff | 明るい黄緑 | #d8f255 | ||
| 空色 | #4dc4ff | 明るい空色 | #bfe4ff | ||
| ピンク | #ff8082 | 明るいピンク | #ffcabf | ||
| オレンジ | #f6aa00 | ベージュ | #ffca80 | ||
| 紫 | #990099 | 明るい紫 | #c9ace6 | ||
| 茶色 | #804000 | ||||
| 無彩色 | |||||
| 白 | #ffffff | 明るいグレー | #c8c8cb | ||
| 黒 | #000000 | グレー | #84919e | ||
コントラスト比を高くする[編集]
詳細は「Help:配色のコントラスト比」を参照
色を使う必要性がある場合、アクセシビリティ以外の観点でも読みやすい色を選択するよう心がけます。読みやすさは人それぞれですが、その一つに背景色と文字色のコントラスト比を高め、はっきりさせる方法があります。ただしコントラスト比さえ守れば良いわけではありません。濃色の背景に白文字を使用すればコントラスト比は高まりますが、上述の﹁不釣り合いな強調・重みづけや宣伝的な意味づけ﹂の観点からは不適合とみなされる場合があります。
一般的には7‥1以上
テキスト文字やテンプレート、あるいは文字情報が含まれる画像は、背景色と文字色のコントラスト比が7‥1以上あるべきです[注9][注10]。コントラスト比を確認する際には、デフォルトの黒文字だけでなく青リンクや赤リンク、茶リンクも試します。将来的に記事が加筆修正され、黒文字からリンク色に置き換わる可能性があるためです。
大きい文字は4.5‥1以上
大きい文字は、その大きさのおかげで小さな文字より見やすいため、コントラスト比の要件は緩和されます。しかしウィキペディア上では見出しであっても﹁大きい文字﹂の定義に該当しないため、この緩和要件が適用されるケースは極めて稀です。大きい文字のコントラスト比は一般的には 4.5‥1以上、合意がある場合でも少なくとも3‥1以上にしてください[注11]。
署名の色は4.5‥1以上
登録利用者は署名を変更できますが、デフォルトの白背景︵#FFFFFF︶に対しコントラスト比が 4.5‥1以上になるようにしてください。
デフォルト以外の外装への配慮
「Help:外装の詳細設定」も参照
原則的にはこれらの外装におけるコントラスト比も考慮すべきですが、本ガイドラインでは特に制限しません。ただし、合意によりベクター外装におけるコントラスト比が 7：1 未満になる場合はデフォルト以外の外装でのコントラスト比が 4.5：1 以上であることを検証する必要があります。
例外と色変更の手続[編集]
上記の理由から、多くの場合はデフォルトから色を変える必要はありませんが、例外も存在します。
半公共的なテーマカラー
私営鉄道・バスなど、公共性の高いサービスを営利私企業が運営している場合、テーマカラーによる分類が広告宣伝とみなされるか線引きが曖昧です。しかし色の強調効果の観点から、不必要な場所に着色してページ全体の重みづけを崩さないことが何より重要です[注12]。学会や公共機関によって推進される研究プロジェクトなどで慣例的に使用されている分類色も同様です。これら分類色の一部は、アクセシビリティやコントラスト比の基準を満たしていないため、注意が必要です[注13]。
コントラスト比の基準緩和
テキスト文字と背景色のコントラスト比を7‥1以上に保つには現実的には難しい場合もあります。ウィキプロジェクトでの合意が得られた上であれば[注14]、変更することができます。ただしデフォルト色以外への変更は、記事の情報を増やしたり正確性を増すのにどうしても必要であり、かつ他に代替がない、という場合のみに限られます。コントラスト比緩和の限度は 4.5‥1までです。
背景色が白 (#FFFFFF) 以外の画像
このような画像にテキスト文字を挿入する場合、中立性の観点やアクセシビリティ、コントラスト比の考え方を遵守した上で、文字色を黒 (#252525) から別の色に変更することができます。特段の合意形成は不要です。
不適切な色使用の差戻
仮に本ガイドラインから逸脱した不適切な記事を見つけたからといって、すぐさまデフォルト色に戻すのも実践的な編集とは言えません。デフォルト色に戻すことにより、これまでの自分の努力を否定された、あるいは重箱の隅を突く取り締まり行為だと感じる編集者もいるかもしれません。またデフォルト色に戻すのではなく、薄い背景色に変更してコントラスト比を高めるに留めるべきだと考える人もいるでしょう。まずは同様の色使いの記事がないか、関連記事やテンプレートも確認します。その上でウィキプロジェクトで提案[注14]し、デフォルト色に戻すべき理由を説明することが肝要です。
不測のケース
本ガイドラインに定義されていないケースに遭遇して判断に迷う場合は、色以外のウィキペディア方針やスタイルマニュアルなどのガイドラインを参照し、色の使用にも同じ考え方を援用できないか検討します。その上で色の変更が必要と判断されれば、ウィキプロジェクトで提案[注14]できます。
脚注[編集]
注釈[編集]
(一)^ WCAG[1]はウェブ・アクセシビリティに関する世界的なガイドラインで、標準化団体のWorld Wide Web Consortium (W3C) によって策定されています。
(二)^ ナビボックスやサイドバーはモバイルビューおよびモバイルアプリでは表示されません。このモバイル設計思想からも、優先度が相対的に低いナビボックスやサイドバーの色を変更することは推奨されません。
(三)^ テキスト文中に太文字を多用し過ぎると、強調効果を失うのと似ています。
(四)^ マジカルナンバー提唱者のジョージ・ミラーは7±2としていましたが、心理学者ネルソン・コーワンの2001年発表によると4±1︵3～5つ︶が限界だとされています[2]。
(五)^ abcWCAG 2.0では適合レベルをA (最低レベル)、AA、AAA (最高レベル)の3段階に分類している。
(六)^ ﹁1.4.1 色の使用‥情報を伝える、何が起こるかあるいは何が起きたかを示す、ユーザの反応を促す、あるいは視覚的な要素を区別する唯一の視覚的な手段として、色のみを使用しない。(レベルA[注5])﹂[3]
(七)^ ただし、青リンクや赤リンクのように、MediaWikiの仕様により色が情報を伝える手段となっている場合は除きます。
(八)^ 斜体は一部の日本語環境では機能しないため、使用を推奨していません。詳細はHelp:ページの編集#太字・斜体を参照してください。
(九)^ ﹁1.4.6 コントラスト (高度)‥テキストおよび画像化された文字の視覚的な表現には、少なくとも7‥1のコントラスト比がある。︵レベル AAA[注5]︶﹂
﹁1.4.3 コントラスト (最低限)‥テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5‥1のコントラスト比をもたせる。︵レベルAA[注5]︶﹂WCAG 2.0︵W3C勧告︶日本語訳[3]
(十)^ ただし、背景色と文字色の両方がMediaWiki、または外装のデフォルト設定のままである場合はその限りではありません。これは、編集者がそれらの色を変更することが難しく、また個別ページの編集ではなくMediaWikiの仕様変更で対応すべき事柄であるためです。
(11)^ ﹁1.4.6 コントラスト (高度)‥[中略] 大きな文字‥サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 4.5:1 のコントラスト比がある。﹂
﹁1.4.3 コントラスト (最低限)‥[中略] 大きな文字‥サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。﹂
﹁サイズの大きな︵テキスト︶‥少なくとも18ポイント、又は14ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。﹂WCAG 2.0︵W3C勧告︶日本語訳[3]
(12)^ 色の過剰なマークアップを禁じた例として、プロジェクト:鉄道があります。
(13)^ 国際層序委員会による地質系統・地質年代表 (International Stratigraphic Chart) 2015年1月版[5]に基づき、記事ページ地質時代は作成されていますが、アクセシビリティやコントラスト比の要件を満たしていません。
(14)^ abc該当するウィキプロジェクトがない場合、記事のノートページで提案し、Wikipedia:コメント依頼などを活用して十分な告知を行ってください。
出典[編集]
- ^ “Web Content Accessibility Guidelines (WCAG) Overview” [ウェブコンテンツ・アクセシビリティガイドライン (WCAG) の概要] (英語). 2017年1月14日閲覧。
- ^ Cowan, Nelson (2001). “The magical number 4 in short-term memory: A reconsideration of mental storage capacity”. Behavioral and Brain Sciences 24: 1–185. doi:10.1017/s0140525x01003922. PMID 11515286.
- ^ a b c “Web Content Accessibility Guidelines (WCAG) 2.0 | W3C 勧告 2008年12月11日”. 情報通信アクセス協議会. 2018年1月14日閲覧。 “この文書は、2008年12月11日付の W3C 勧告「WCAG 2.0」 (原文は英語)を、情報通信アクセス協議会の「ウェブアクセシビリティ基盤委員会 (WAIC)」が翻訳と修正をおこなって公開しているものです。この文書の正式版は、あくまで W3C のサイト内にある英語版であり、この文書には翻訳上の間違い、あるいは不適切な表現が含まれている可能性がありますのでご注意ください。”
- ^ カラーユニバーサルデザイン推奨配色セットガイドブック (PDF)
- ^ International Stratigraphic Chart 2015年1月版 (PDF)
関連項目[編集]
- Help:配色のコントラスト比 - 色覚異常のタイプ別にコントラスト比の違いを解説
- Help:色の使用 - 色相のパレットなど、色を変更する際の実務的な手引き
- Template:色の使用 - 色覚異常への配慮に欠ける記事に貼付
- Template:色 - デバイス依存で色が適切に表示されない記事に貼付
- Category:読みにくい可能性があるナビゲーションテンプレート - メンテナンス用カテゴリ
- en:Category:Accessibility issue tracking categories - アクセシビリティに問題のあるページ一覧（英語）
- Help:携帯端末でのアクセス
- 以下は配色に関する私論です。
-
- Wikipedia:アクセシビリティ#色 - 色使用の概論のみ (方針やガイドラインとして提案中)
- Wikipedia:色のコントラスト - Help:配色のコントラスト比とほぼ内容重複
- Wikipedia:テンプレートの色で編集合戦をしない - 色の編集合戦の実例も紹介
- Wikipedia:配色の変更は控えめに - 本ガイドラインとほぼ内容重複
- Wikipedia:配色の変更の有用性 - 本ガイドラインの方向性と反する私論
