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

コントラスト比と読める文字

白地のグレー#767676は、コントラスト比が4.54:1で、本文のWCAG最小値に合格します。1段階明るい#777777は4.48:1で不合格です。

3Dモデルを読み込み中

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

マーカーは、グレー軸の上の#767676から始まります。パネルで背景を選び、「明度」スライダーをドラッグしましょう。動かすのに合わせて、比と合格・不合格の行が更新されます。どの結果も、数字だけでなく言葉でも書かれています。

相対輝度

文字が読めるかどうかを判断するのに、ウェブコンテンツ・アクセシビリティ・ガイドラインは、色相やHSLの明度を使いません。相対輝度を使います。黒の0から白の1までの数で、色が目へ送る光の量に対応する数です。WCAG 2.2はこれを2段階で定義しています。まず、各チャンネルを255で割り、sRGBの曲線を元に戻して、0から1の数にします。値が0.04045以下なら12.92で割り、そうでなければ((値＋0.055)／1.055)の2.4乗を計算します。次に、3つの結果に重みを付けて足します。L＝0.2126 R＋0.7152 G＋0.0722 B。

この重みで多くのことが説明できます。緑は全体の70%以上を占め、青はわずか7%です。純粋な青#0000ffの輝度がたった0.0722で、赤と緑を合わせた純粋な黄色が0.9278なのはそのためです。仕様には小さな歴史も記録されています。2021年5月より前は、しきい値が古い文書から引き写された0.03928と書かれていました。それが0.04045に訂正され、WCAGは、これが結果に実際上の影響を与えないと述べています。

コントラスト比

コントラスト比は、2つの輝度を比べます。(L1＋0.05)／(L2＋0.05)で、L1は明るい色、L2は暗い色です。0.05は、いつも目に届くわずかな迷光を表し、黒でも比が有限になるようにします。比は、同じ色どうしの1:1から、黒と白の21:1までです。(1＋0.05)／(0＋0.05)＝21。白地の#767676は輝度が0.1812なので、比は1.05／0.2312＝4.54です。

単元2で使った青#2273c3、rgb(34 115 195)の計算全体をここに示します。255で割ると、チャンネルは0.1333、0.4510、0.7647です。3つとも0.04045を上回るので、すべてべき乗の式を通り、0.0160、0.1714、0.5457になります。重みを付けると、赤から0.0034、緑から0.1226、青から0.0394で、合計の輝度は0.1654です。白に対する比は1.05／0.2154＝4.87なので、この青は、白いページの本文でAAに合格します。黒に対しては0.2154／0.05＝4.31で、わずかに届きません。

八つのグレーの上の白い文字と、それぞれのグレーの白に対するコントラスト比。4.5:1に届くのは暗いグレーだけです。

しきい値

WCAG 2.2は、比によって合格・不合格を判定します。達成基準1.4.3は、レベルAAで、通常の文字には少なくとも4.5:1を、大きな文字には3:1を求めます。大きな文字とは、少なくとも18ポイント、または太字の14ポイントです。WCAGは、これがふつうの本文フォントでおよそ1.5emと太字の1.2emに当たると述べています。達成基準1.4.6は、レベルAAAで、基準を7:1と4.5:1に引き上げます。達成基準1.4.11は、ボタン、フォーム欄、アイコンのうち、人が見る必要のある部分に3:1を求めます。白地の純粋な赤#ff0000は4.00:1で、大きな見出しには十分ですが、本文には不合格です。白地の青#0000ffは8.59:1で、すべてに合格します。

この式から、もう1つ役立つ事実が出てきます。輝度が約0.179の色は、白に対しても黒に対しても同じコントラスト、約4.58:1になります。それより暗い色には白い文字が読みやすく、明るい色には黒い文字が読みやすくなります。モデルの下のパネルは、両方の比を示し、どちらがよいかも示します。

コントラスト比＝(L1＋0.05)／(L2＋0.05)。本文は4.5:1、大きな文字は3:1、AAAの本文は7:1が必要。

AA、通常の文字（1.4.3）4.5:1
AA、大きな文字（1.4.3）3:1
AAA、通常の文字（1.4.6）7:1
アイコンとフォームの枠線（1.4.11）3:1
大きな文字18ポイント、または太字の14ポイント
白地の黒21:1、最大
ポイント
  • 相対輝度：各チャンネルを線形化し、0.2126 R＋0.7152 G＋0.0722 B。
  • コントラスト比＝(L1＋0.05)／(L2＋0.05)、1:1から21:1。
  • AA：本文4.5:1、大きな文字とUI部品3:1。AAA：本文7:1。
  • 白地の#767676は4.54:1で合格。白地の#ff0000は4.00:1で、本文には不合格。
  1. 白地の黒のコントラスト比はいくつですか。
  2. 可能な最小のコントラスト比はいくつですか。
  3. 白地の#767676のコントラスト比は、小数第2位までいくつですか。（輝度は0.1812）
  4. WCAG 2.2のAAは、通常の本文に最低どれだけのコントラストを求めますか。
  5. 白地の純粋な赤#ff0000のコントラスト比は、小数第2位までいくつですか。（輝度0.2126）
  6. 白地の赤#ff0000（4.00:1）が適しているのは…
    • 大きな見出しだけ
    • AAの本文
    • AAAの本文
    • まったくなし
  7. 相対輝度で、最も大きな重みをもつチャンネルはどれですか。
    • 緑
    • 赤
    • 青
    • すべて等しい
  8. WCAGで大きな文字に数えられるのはどれですか。
    • 18ポイント、または太字の14ポイント
    • 太字の12ポイント
    • 通常の16 px
    • どんな見出しでも
  9. WCAGは、アイコンとフォーム欄の枠線（1.4.11）にどの比を求めますか。
  10. 白地の黄色#ffff00の文字は、比が約1.07:1です。それはどういう意味ですか。
    • ほとんど読めない
    • AAに合格する
    • AAAに合格する
    • 可能な最良の値
  11. 2021年5月より前、WCAGの輝度の式は、0.04045の代わりにどのしきい値を使っていましたか。
    • 0.03928
    • 0.05
    • 12.92
    • 0.055
このコースの出典 (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