コンテンツにスキップ

Wikipedia‐ノート:色の使用/ガイドライン案 20170104

ページのコンテンツが他言語でサポートされていません。

の使用は、アクセシビリティの視点から注意が必要です。ここでは、その注意すべき点を説明します。

色を唯一の表現としない[編集]

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

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

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

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

コントラスト比を高くする[編集]

コントラスト比とは[編集]

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

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

参考: WCAG 2.0(W3C勧告)日本語訳
コントラスト比 (contrast ratio):(L1+0.05)/(L2+0.05)
ここでは、L1は、明るいほうの色の相対輝度である。そして、L2は、暗いほうの色の相対輝度である。
相対輝度 (relative luminance):最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさ。
注記1:sRGB色空間においては、色の相対輝度は、と定義されており、R、G及びBは以下のように定義される:
の場合、そうでない場合
の場合、そうでない場合
の場合、そうでない場合
そして、RsRGB、GsRGB、及びBsRGBは、次のように定義される:

一般的には7:1以上[編集]

記事や、記事で使用されるテンプレート、あるいは文字情報が含まれる画像は、背景色と文字色のコントラストが 7:1 以上あるべきです[1]。ただし、現実的には 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ポイント以上の太字は、その大きさのおかげで小さな文字より見やすいため、コントラスト比の要件は緩和されます。一般的には 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のままにすべきです。特に、リンクの文字色をデフォルトから変えることは、(インフォボックスとナビゲーション・テンプレート以外)いかなる場合でもしてはいけません。
    • ただし、画像における文字色はその限りではありません[2]。その場合でもコントラスト比の要件を満たす必要があります。
    • リンク以外の文字色は、ウィキプロジェクトでの合意が得られた上であれば、変更することができます。ただし、変更の必要がある場合は稀でしょう。
  • 記事の冒頭右側に置かれる表「インフォボックス」には、原則的に{{Infobox}}のデフォルト色を使うべきです。また、記事の末尾に置かれる、関連記事をまとめた「ナビゲーション・テンプレート」にも、特に理由がない場合は {{Navbox}} のデフォルト色を使うべきです。
    • ウィキプロジェクトで提案のうえ、十分な数の参加者による合意が形成された場合は、それぞれの分野特有の背景色や文字色を使うことができます(コントラスト比は本ガイドラインの基準を満たさなければなりません)。
  • 上記ガイドラインに従わず、色を過度に使用している記事には、編集して修正するか、 {{色の過剰使用}} を記事の冒頭に貼付してください。次のように表示されます。

脚注[編集]

  1. ^ ただし、背景色と文字色の両方がMediaWiki、または外装のデフォルト設定のままである場合はその限りではありません。これは、編集者がそれらの色を変更することが難しく、また個別ページの編集ではなくMediaWikiの仕様変更で対応すべき事柄であるためです。
  2. ^ 画像の場合は背景が白(#FFFFFF)とは限らないため、デフォルトの#252525のみに制限すべきではありません。

関連項目[編集]