edubun
日本語
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
ホーム›色とデザイン›色彩理論

デザインで色を使う

男性の約8%が赤緑の色覚特性をもち、エラーを赤だけで示すフォームは、その多くを迷わせます。

3Dモデルを読み込み中

ドラッグで回転、スクロールまたはピンチで拡大・縮小。

ブランドカラーとその補色。パネルで背景を補色に切り替えると、その組が文字と背景としてどう読めるかがわかります。次に白と黒も試しましょう。

色だけにメッセージを担わせない

WCAG 2.2の達成基準1.4.1「色の使用」は、最も基本的なレベルAにあります。色を、情報を伝え、操作を示し、応答を促し、視覚的な要素を区別するための唯一の視覚的手段にしてはならない、と述べています。エラーのあるフォーム欄に赤い枠を付けるのはかまいませんが、何が間違っているかを示すアイコンか文章も必要です。五本の色付きの線がある折れ線グラフにも、ラベル、異なる線の種類、マーカーが必要です。段落の中のリンクには、下線か、色以外の手がかりが必要です。

理由の一部は色覚です。OpenStaxの神経科学のテキストは、一部の人が、錐体が3種類ではなく2種類になる遺伝的な変異や、働き方が違う1つの錐体色素をもつと説明しています。その色が見えないわけではありませんが、ほとんどの人が見分ける色の一部が、その人たちには同じに見えます。赤緑型が最も多く、男性の約8%に当てはまります。ほかの理由も大切です。明るい日差しの中のスマートフォン、安いプロジェクター、白黒の印刷物です。グレースケールでも機能するデザインは、これらすべてで機能します。

明度が大部分を担う

そのため、経験を積んだデザイナーは、パレットを2段階で計画します。まず、明度の段階を決めます。非常に明るい背景、枠線用の中間の色調、文字用の暗い色調です。次に色相を選びます。単元6のコントラスト比で、文字と背景の各組を確かめるのが、段階が十分に離れているかを知るいちばん早い方法です。補色の色相はコントラストを保証しません。モデルでは、ブランドのオレンジとその青の補色は、HSLの彩度も明度も同じで、その間の比はわずか1.06:1です。色相が最大限に離れた2色でも、重ねると読みにくいことがあります。

簡単な作業手順は、このコースの単元をまとめたものです。主題に合う1つの色相から始めます。単元4の配色を使って、補助となる1〜2つの色相を選びます。主役の色に面積の大部分、おおよそ60%、副次の色に30%、アクセントに10%を与えます。これはデラウェア大学のガイドの目安です。すべての文字色と背景色の組み合わせが、少なくとも4.5:1、または大きな見出しとアイコンなら3:1に達するまで、明度を選びます。最後に、何も色だけに頼っていないかを確かめます。エラーには言葉があり、リンクには下線があり、グラフにはラベルがあります。

グラフは、しばしば一度に多くの色が必要なので、特別な注意に値します。デラウェア大学のガイドは、地図とグラフのパレット用につくられたツール、ColorBrewerを挙げています。低い値から高い値へと変化するデータには、1つの色相を明るいものから暗いものへ段階づける連続的なパレットが、グレースケールでも機能し続けます。カテゴリーには、できるだけ少ない色を使い、凡例だけでなく線や棒のそばにラベルを付け、隣り合う2つが似て見えないよう、明度の段階を十分に違えます。

このサイトも同じ規則に従っています。アクセントの色#a8581bは白いページに対してコントラスト比5.15:1、本文の文字色#1c1a17は17.36:1に達します。
確認規則出典
本文4.5:1以上WCAG 2.2、1.4.3
大きな文字3:1以上WCAG 2.2、1.4.3
アイコン、フォーム欄の枠線、フォーカスの輪郭3:1以上WCAG 2.2、1.4.11
エラー、リンク、グラフの線色だけにしないWCAG 2.2、1.4.1
面積の割合約60／30／10デラウェア大学のガイド
ポイント
  • WCAG 1.4.1：色を、情報を伝える唯一の手段にしてはならない。
  • 赤緑色覚特性は、男性の約8%に当てはまる。
  • まず明度の段階、次に色相を計画する。補色の色相はコントラストを保証しない。
  • すべての文字色と背景色の組み合わせを、コントラスト比で確かめる。
  1. WCAG 1.4.1「色の使用」は何を求めていますか。
    • 色を、情報を伝える唯一の視覚的手段にしてはならない
    • すべてのページが少なくとも3色を使う
    • リンクは青でなければならない
    • 文字は黒でなければならない
  2. 1.4.1はどのレベルですか。
    • A
    • AA
    • AAA
    • なし
  3. OpenStaxによれば、男性の約何パーセントが赤緑色覚特性をもちますか。
  4. あるフォームが、間違った欄を赤い枠だけで示します。何を加えるべきですか。
    • 何が間違っているかを示すアイコンか文章
    • より明るい赤
    • 正しい欄に緑の枠
    • 何も要らない
  5. 2つの色は補色の色相で、HSLの明度が同じです。そのコントラスト比は…
    • 高いとは限らない
    • いつも21:1
    • いつも少なくとも4.5:1
    • いつも1:1
  6. このサイトのアクセント#a8581bの、白地でのコントラスト比は、小数第2位までいくつですか。
  7. 多くのデザイナーは、どの順序でパレットを計画しますか。
    • まず明度の段階、次に色相
    • まず色相、明度は決して考えない
    • ランダムな色で、あとでテスト
    • 白と黒だけ
  8. グラフに、異なる色の五本の線があります。色を見分けられない人を助けるのは何ですか。
    • ラベル、線の種類、マーカー
    • より彩度の高い色
    • より暗い背景
    • より太い線だけ
  9. 60/30/10のパレットで、主役の色に割り当てられる割合はいくつですか。
  10. デザインをグレースケールでテストするのはなぜですか。
    • 明度だけで各部分が区別できるかがわかるから
    • グレースケールはWCAGで必須だから
    • ファイルが小さくなるから
    • 色相の角度が変わるから
このコースの出典 (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

確認日: 2026-10-17