コンテンツにスキップ

Wikipedia:色の使用

これはこのページの過去の版です。Mis0s0up (会話 | 投稿記録) による 2018年1月14日 (日) 05:35個人設定で未設定ならUTC)時点の版 (WCAG 2.0の和訳リンク切れ3か所。WCAG英語サイトに掲載されているリンクに差し替え。)であり、現在の版とは大きく異なる場合があります。

の使用は、アクセシビリティの視点から注意が必要です。色を唯一の表現としないようにします。また読みやすいようにコントラスト比を高くします。配色の決定は慎重に行います。色以外についてはWikipedia:アクセシビリティを参考にしてください。

色を唯一の表現としない

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

記事をモノクロ印刷したものやモノクロ画面で表示したものを読む場合や、視覚障害色覚異常の利用者のため、色が情報を伝える唯一の手段とならないようにしなければなりません[1]。(なお、モノクロ画面は現在では少ないものの電子ブックリーダーなどがあります。また、色覚異常は日本人男性には特に多く、軽度のものは20人に1人が該当します)

たとえば、「表中の赤字部分は○○」といった方法を取ってはいけません。そういった場合は、斜体や太字を併用する、脚注を付ける、その「○○」を併記する、あるいは記号(※印や三角など)で表現する、などの方法を取るべきです。

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

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

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

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

色使いの基本は、読みやすい色を使うことにあります。読みやすさは人それぞれですが、ここではその定量化にコントラスト比を使います。

コントラスト比とは

色における「コントラスト」はその視覚的な差違のことで、それを定量化したものがコントラスト比です。ここでは、WCAG 2.0の算出方法を使います。

手動計算の代わりにColour Contrast Analyserや、専用のFirefoxアドオンを使うこともできます。

一般的には7:1以上

記事や、記事で使用されるテンプレート、あるいは文字情報が含まれる画像は、背景色と文字色のコントラストが 7:1 以上あるべきです[2]。ただし、現実的には 7:1 のコントラスト比を満たすのが難しい場合もあります。その場合、ノートなどで合意の上でコントラスト比が 4.5:1 以上、7:1 未満の色も使うことができます。なお、コントラスト比 4.5:1 未満の色は見難いため、使うことはできません。

参考: WCAG 2.0(W3C勧告)日本語訳
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 以上にしてください。

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

署名の色は4.5:1以上

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

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

ウィキペディアではほかに3種類の外装があり、それぞれデフォルト色が違いますが、上記のコントラスト比要件は、デフォルトのベクター外装を基準としています。

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

配色の決定は慎重に

  • 色がなくても情報が伝わるようにする必要があるため、文字に色をつける必要はほとんどなく、デフォルトの#252525のままにすべきです。特に、リンクの文字色をデフォルトから変えることは、(インフォボックスとナビゲーション・テンプレート以外)いかなる場合でもしてはいけません。(Help:リンク色参照)
    • ただし、画像における文字色はその限りではありません[3]。その場合でもコントラスト比の要件を満たす必要があります。
    • リンク以外の文字色は、ウィキプロジェクトでの合意[4]が得られた上であれば、変更することができます。しかしながら、色はデフォルト色のままにすべきであることには変わりありません。デフォルト色以外への変更は、記事の情報を増やしたり正確性を増すのにどうしても必要であり、かつ他に代替がない、という場合のみに限られます(その際もコントラスト比は本ガイドラインの基準を満たさなければなりません)。
  • 記事の冒頭右側に置かれる表のInfoboxには、原則的に{{Infobox}}の標準の色を使うべきです。また、記事の末尾に置かれる、関連記事をまとめたナビゲーション・テンプレートにも、{{Navbox}}の標準の色を使うべきです。
    • ウィキプロジェクトで提案[4]のうえ、十分な数の参加者による合意が形成された場合は、それぞれの分野特有の背景色や文字色を使うことができます(コントラスト比は本ガイドラインの基準を満たさなければなりません)。
  • 上記ガイドラインに従わず、色を過度に使用している記事には、編集して修正するか、{{色の使用}}を記事の冒頭に貼付して、ノートページで改善のための議論を呼びかけてください。次のように表示されます。

脚注

  1. ^ ただし、青リンクや赤リンクのように、MediaWikiの仕様により色が情報を伝える手段となっている場合は除きます。
  2. ^ ただし、背景色と文字色の両方がMediaWiki、または外装のデフォルト設定のままである場合はその限りではありません。これは、編集者がそれらの色を変更することが難しく、また個別ページの編集ではなくMediaWikiの仕様変更で対応すべき事柄であるためです。
  3. ^ 画像の場合は背景が白(#FFFFFF)とは限らないため、デフォルトの#252525のみに制限すべきではありません。
  4. ^ a b 該当するウィキプロジェクトがない場合、記事のノートページで提案してください。

関連項目

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