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