コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

利用者:Mis0s0up/Proposal/WP:COLOR/No Change Tracking

これはこのページの過去の版です。Mis0s0up (会話 | 投稿記録) による 2018年1月18日 (木) 07:14個人設定で未設定ならUTC)時点の版 (2018年1月14日更新の現行リリース版を継承し、色使用のガイドライン改訂案を提示)であり、現在の版とは大きく異なる場合があります。

(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)

変更履歴ありの草案は、こちらから参照できます。


の使用はテキスト文字、表の背景、各種テンプレート、グラフや地図、写真画像などに適用されるガイドラインです。一般的に色の使用によって (1) 強調、(2) 分類・グループ化、(3) 色調による意味付けといった効果が得られます。しかし色の使用によって、Wikipedia:中立的な観点Wikipedia:ウィキペディアは何ではないかといった重要な方針に抵触する可能性があります。またこれらの方針を遵守していても、編集者が意図したつもりの色が視覚障害色覚異常モバイル端末利用者、記事をモノクロ印刷する読者には正確に認識されないことがあり、アクセシビリティの観点からも注意が必要です。

したがって、原則はウィキペディア初期設定 (デフォルト) の色を使用します。色を変更する必要がある場合には色を唯一の表現としないようにします。また読みやすいようにコントラスト比を高くし、配色の決定は慎重に行います。ここではWCAG[1]に準拠します。WCAGはウェブ・アクセシビリティに関する世界的なガイドラインで、標準化団体のWorld Wide Web Consortium (W3C) によって策定されています。

中立的な観点と色の関係

記事執筆の要諦は、中立的かつ正確に意味を伝えることにあります。デフォルト以外の色使用が裏目に出て、中立性や正確性に悪影響を及ぼすことがあります。

強調効果

テキスト文中に太字かぎ括弧を使用すると読者の注意を引き付けますが、デフォルトの黒文字 (#252525) 以外に色を変えると、太字やかぎ括弧と同等以上の強調効果を発揮します。テキスト文章内の強調は、ほとんどが太文字やかぎ括弧で十分です。色を使用すると、執筆内容と不釣り合いな過度な重みづけとなることがあります。したがって、既に大きな文字で表示されている見出しも文字色を変えてさらに強調する必要はありません。青リンクや赤リンクの色変更も原則禁止です。

テキスト文章だけでなく、表や{{Infobox}}を使って作成された基礎情報ボックス、{{Navbox}}や{{Sidebar}}を使って作成されたナビゲーションテンプレート、グラフなども同様です。ヘッダー行は原則デフォルト色を使用します。また表内のデータ背景色を指定する場合も、行全体ではなくセル単位に留めるなどの工夫を検討してください。グラフの背景色は白色にします。なぜならば、Wikipedia:箇条書きでは一般的に (表形式を含む広義の) 箇条書きよりも文章による記述を優先しているからです。表やナビボックス、グラフ背景などの一定面積を色で塗りつぶすことで、読者の意識が色に集中し、文章中心で書かれた節への関心が妨げられ、記事全体構成上のバランスが崩れる恐れがあります[注 1]

利用者ページに使用されるユーザーボックスについても注意が必要です。開発者は特に意図せず、ヘッダーや背景に色を付けてしまうかもしれません。ですが使用する側は、複数のユーザーボックスを組み合わせることが想定され、配色バランスが容易に崩れてしまいます[注 2]。色のバランスを取るためにはユーザーボックスの配列を並び替えることになり、ページ執筆本来の「意味のつながりに即して並べる」という目的を妨げます。

更には、強調効果が色の編集合戦につながる恐れもあります。執筆当初は色による強弱バランスが取れていても、記事内容の成長に伴って色を使用する頻度が高まったり、色の種類が増えたりすることがあります。強調効果の観点で捉えると、色の多用はテキスト文章の多くを太文字で記述する行為と同類です。その結果、逆に強調したいポイントが定まらず、色が持つ本来の強調効果を失います。そこで特定箇所をより強調させようとして強い色を使用するようになり、最終的には記事全体の可読性が失われる要因になりえます。また純色 (最も彩度が高い色) を多用すると、補色による残像効果が出ることもあります。

分類効果

複数の色を組み合わせて分類・グループ化する手法は表やグラフ、地図などにしばしば使用されます。例えば世界地図を用い、人口密度別に国・地域を高中低の3段階に色分けするといった使い方です。ところが配色によっては中が高や低よりも目立ってしまい、重みづけに誤解を生じさせることがあります。

また単純な分類のつもりで行った着色が、一部の読者からは差別ないし逆差別として捉えられることもあります。例えば性別・年齢・出身地といった属性に応じて、一覧表上で特定人物のみ色で強調するのは適切でしょうか。区別と差別の境界線は曖昧ですが、記事ページ個々の文脈に即し、色使用の必然性を慎重に判断してください。

意味付け効果

特定の色が特別な意味を持つ場合があります。それが一般に普及して公共性が高ければ、色による意味付けがウィキペディア読者の直感的な理解に役立つでしょう。信号機の色使いを援用した{{Yes}}や{{No}}を用い、勝敗や活動の進捗状況を色で分類するといった使い方が一例です。

しかし、色の使用によってブランディング効果が発揮される際には注意が必要です。企業ウェブサイト上で企業ロゴと同一のテーマカラーが多用されるのを見かけたことはないでしょうか。これはコーポレート・アイデンティティ (CI) の中でも特にビジュアル・アイデンティティ (VI) と呼ばれ、ブランド価値を高める企業戦略として普及している手法です。一方ウィキペディアでは宣伝行為が方針で禁止されています。したがって、企業・団体・製品・サービス・人物などのテーマカラーを使ってウィキペディア記事ページを意図的に着色する行為は宣伝手段とみなされることがあります。

企業について書かれたウィキペディアの記事を例に考えてみましょう。ページを開くたびに企業のCMソングが自動で流れてきたらどうでしょうか。企業ロゴと同じフォントを使って、そのウィキペディア記事だけが執筆されていたらどうでしょうか。CIやVIの観点に立つと、テーマカラーの使用はCMソングやロゴフォントの使用と類似のブランディング効果を有しています。折角素晴らしい記事を執筆しても、色の使い方を誤っただけで宣伝を嫌う読者からは読まれなくなりがちです。

色を唯一の表現としない

同じように主に文字を用いたユーザーインターフェースの2つのスクリーンショット。上のものは赤、緑、青を使用している。下のものは赤と緑にほぼ同じ色を使用しているもので、赤い文字は緑の背景の中でほとんど見えなくなっている。
赤緑色覚異常が視認性にどう影響するかを示しているスクリーンショット (上: 色覚正常者、下: 色覚異常者の見え方)

仮に色の使用が適切と判断された場合でも、記事をモノクロ印刷したものやモノクロ画面で表示されるデバイスの利用者、視覚障害色覚異常の利用者のため、色が情報を伝える唯一の手段とならないようにしなければなりません[注 3]。ウィキペディアの公式モバイルアプリケーションは画像を除きすべてモノクロで表示されます。また、先天性の色覚異常は日本人男性には特に多く、軽度のものは20人に1人が該当します。

こうした観点から、たとえば「表中の赤字部分は○○」といった方法を取ってはいけません。そういった場合は、太字を併用する、脚注を付ける、その「○○」を併記する、記号(※印や三角など)で表現する、あるいは斜線や格子柄などで地図・グラフを塗るなどの方法を取るべきです[注 4]

色そのものを主題とする記述(例えば、球団のチームカラーや鉄道路線のラインカラー)でも、その色だけを表示することはせず、必ずその色名またはRGBを併記するようにしてください。

ただし画像や動画(以下画像類)においては、色を使わずに同等な内容を伝えるものを作成したり探し出すことが難しい場合や、色を使わずに同等な内容を伝えることが現実的に不可能な場合もあります。また、記事の主題の説明は基本的には本文によって行われ、画像類は補助的に使われることがほとんどです。そのため、記事中に表示される画像類には、色を唯一の表現としていないことを厳格に求めません。推奨はされますが、色を唯一の表現とする・しないに関わらず利用可能です。ガイドラインに配慮しようとするときは、色が分からない場合にも趣旨が伝わるような説明文を付ける、工夫して色だけに頼らないように画像類を作成する、といった方法があります。

1.4.1 色の使用:情報を伝える、何が起こるかあるいは何が起きたかを示す、ユーザの反応を促す、あるいは視覚的な要素を区別する唯一の視覚的な手段として、色のみを使用しない。(レベル A[注 5]) — WCAG 2.0(W3C勧告)日本語訳[2]

色覚異常への配慮に欠ける場合は{{色の使用}}、デバイス依存で色が適切に表示されない場合は{{}}を記事の冒頭に貼付して、ノートページで改善のための議論を呼びかけてください。

コントラスト比を高くする

色を使う必要性がある場合、アクセシビリティ以外の観点でも読みやすい色を選択するよう心がけます。読みやすさは人それぞれですが、その一つに背景色と文字色のコントラスト比を高め、はっきりさせる方法があります。WCAG 2.0では、一般的には 7:1 を推奨しています。

ただしコントラスト比さえ守れば良いわけではありません。濃色の背景に白文字を使用すればコントラスト比は高まりますが、上述の「不釣り合いな強調・重みづけや宣伝的な意味づけ」の観点からは不適合とみなされる場合があります。

コントラスト比の算出には、手動の代わりにパソコンインストール型アプリケーションのColour Contrast Analyserや、ブラウザインストール型アドオンのWCAG Contrast checker (Firefox専用) を使うこともできます。

一般的には7:1以上

記事や、記事で使用されるテンプレート、あるいは文字情報が含まれる画像は、背景色と文字色のコントラスト比が 7:1 以上あるべきです[注 6]。コントラスト比を確認する際には、デフォルトの黒文字だけでなく青リンクや赤リンク、茶リンクも試します。将来的に記事が加筆修正され、黒文字からリンク色に置き換わる可能性があるためです。

1.4.6 コントラスト (高度):テキストおよび画像化された文字の視覚的な表現には、少なくとも 7:1 のコントラスト比がある。(レベル AAA[注 5]
1.4.3 コントラスト (最低限):テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。(レベル AA[注 5] — WCAG 2.0(W3C勧告)日本語訳[2]

大きい文字は4.5:1以上

大きい文字は、その大きさのおかげで小さな文字より見やすいため、コントラスト比の要件は緩和されます。しかしウィキペディア上では見出しであっても「大きい文字」の定義に該当しないため、この緩和要件が適用されるケースは極めて稀です。大きい文字とは、半角英数字の場合は18ポイント以上の文字、または14ポイント以上の太字です。日本語などの全角文字は22ポイント以上の文字、または18ポイント以上の太字が大きい文字とみなされます。大きい文字のコントラスト比は一般的には 4.5:1 以上、合意がある場合でも少なくとも 3:1 以上にしてください。

1.4.6 コントラスト (高度):[中略] 大きな文字:サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 4.5:1 のコントラスト比がある。
1.4.3 コントラスト (最低限):[中略] 大きな文字:サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
サイズの大きな(テキスト):少なくとも18ポイント、又は14ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。 — WCAG 2.0(W3C勧告)日本語訳[2]

署名の色は4.5:1以上

登録利用者は署名を変更できますが、デフォルトの白背景(#FFFFFF)に対しコントラスト比が 4.5:1 以上になるようにしてください。

デフォルト以外の外装への配慮

ウィキペディアのサイトを閲覧する際の外装 (スキン) は個人設定で変更でき、6種類あります。それぞれ外装の色が違いますが、上記のコントラスト比要件は、デフォルトのベクター外装を基準としています。

原則的にはこれらの外装におけるコントラスト比も考慮すべきですが、本ガイドラインでは特に制限しません。ただし、合意によりベクター外装におけるコントラスト比が 7:1 未満になる場合はデフォルト以外の外装でのコントラスト比が 4.5:1 以上であることを検証する必要があります。

例外と色変更の手続

上記の理由から、多くの場合はデフォルトから色を変える必要はありませんが、例外も存在します。

半公共的なテーマカラー

私営鉄道・バスなど、公共性の高いサービスを営利私企業が運営している場合、テーマカラーによる分類が広告宣伝とみなされるか線引きが曖昧です。しかし色の強調効果の観点から、不必要な場所に着色してページ全体の重みづけを崩さないことが何より重要です[注 7]。学会や公共機関によって推進される研究プロジェクトなどで慣例的に使用されている分類色も同様です。これら分類色の一部は、アクセシビリティやコントラスト比の基準を満たしていないため、注意が必要です[注 8]

コントラスト比の基準緩和

テキスト文字と背景色のコントラスト比を 7:1 以上に保つには現実的には難しい場合もあります。ウィキプロジェクトでの合意が得られた上であれば[注 9]、変更することができます。ただしデフォルト色以外への変更は、記事の情報を増やしたり正確性を増すのにどうしても必要であり、かつ他に代替がない、という場合のみに限られます。コントラスト比緩和の限度は 4.5:1 までです。

背景色が白 (#FFFFFF) 以外の画像

このような画像にテキスト文字を挿入する場合、中立性の観点やアクセシビリティ、コントラスト比の考え方を遵守した上で、文字色を黒 (#252525) から別の色に変更することができます。特段の合意形成は不要です。

不適切な色の関連記事が多数存在

本ガイドラインから逸脱した記事を見つけからと言って、すぐさまデフォルト色に戻すのも実践的な編集とは言えません。デフォルト色に戻すことにより、これまでの自分の努力を否定された、または重箱の隅を突く取り締まり行為だと感じる編集者もいるかもしれません。またデフォルト色に戻すのではなく、薄い背景色に変更してコントラスト比を高めるに留めるべきだと考える人もいるでしょう。まずは同様の色使いの記事がないか、関連記事やテンプレートも確認します。ウィキプロジェクトで提案[注 9]の上、なぜデフォルト色に戻すべきなのか理由を説明することが肝要です。

不測のケース

本ガイドラインに定義されていないケースに遭遇して判断に迷う場合は、色以外のウィキペディア方針やスタイルマニュアルなどのガイドラインを参照し、色の使用にも同じ考え方を援用できないか検討します。その上で色の変更が必要と判断されれば、ウィキプロジェクトで提案[注 9]できます。

脚注

注釈

  1. ^ ナビボックスやサイドバーはモバイルビューおよびモバイルアプリでは表示されません。このモバイル設計思想からも、優先度が相対的に低いナビボックスやサイドバーの色を変更することは推奨されません。
  2. ^ ナビボックスでも同様の問題が多く発生しています。
  3. ^ ただし、青リンクや赤リンクのように、MediaWikiの仕様により色が情報を伝える手段となっている場合は除きます。
  4. ^ 斜体は一部の日本語環境では機能しないため、使用を推奨していません。詳細はHelp:ページの編集#太字・斜体を参照のこと。
  5. ^ a b c WCAG 2.0では適合レベルをA (最低レベル)、AA、AAA (最高レベル)の3段階に分類している。
  6. ^ ただし、背景色と文字色の両方がMediaWiki、または外装のデフォルト設定のままである場合はその限りではありません。これは、編集者がそれらの色を変更することが難しく、また個別ページの編集ではなくMediaWikiの仕様変更で対応すべき事柄であるためです。
  7. ^ 色の過剰なマークアップを禁じた例として、プロジェクト:鉄道があります。
  8. ^ 国際層序委員会による地質系統・地質年代表 (International Stratigraphic Chart) 2015年1月版[3]に基づき、記事ページ地質時代は作成されていますが、アクセシビリティやコントラスト比の要件を満たしていません。
  9. ^ a b c 該当するウィキプロジェクトがない場合、記事のノートページで提案し、Wikipedia:コメント依頼などを活用して十分な告知を行ってください。

出典

  1. ^ Web Content Accessibility Guidelines (WCAG) Overview” [ウェブコンテンツ・アクセシビリティガイドライン (WCAG) の概要] (英語). 2017年1月14日閲覧。
  2. ^ 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 のサイト内にある英語版であり、この文書には翻訳上の間違い、あるいは不適切な表現が含まれている可能性がありますのでご注意ください。”
  3. ^ International Stratigraphic Chart 2015年1月版

関連項目

以下は配色に関する私論です。