# コントラストが7:1に届かないグレーの本文

Source: https://easeweb.dev/learn/enhanced-contrast
Topics: 色とコントラスト > テキストのコントラストが7:1以上である (WCAG 1.4.6)
The fix: 本文を7:1に届く濃いグレー（たとえば白の上で7.46:1の#555555）にし、控えめな印象は文字の大きさ、太さ、余白で出します。または、コンテンツより前にコントラストの切り替えを置き、押すと文字が濃くなり、どのページでもその選択が保たれるようにします。24px以上、または18.66px以上の太字の文字は4.5:1が必要です。
Test with: contrast measurement, keyboard, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html https://www.w3.org/WAI/WCAG22/Techniques/general/G17 https://www.w3.org/WAI/WCAG22/Techniques/general/G174 https://webaim.org/resources/contrastchecker/ https://developer.chrome.com/docs/devtools/accessibility/contrast https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

ある陶芸工房のサイトの日誌に、「マグに釉薬をかける方法」という記事があります。黒に近い見出しの下に、執筆情報の行と2つの長い段落が続きます。落ち着いた雑誌のような紙面にしたかったデザイナーは、段落と執筆情報を淡いグレーの#767676にして、見出しが引き立つようにしました。このグレーはよく考えて選ばれています。白の上で4.5:1の最低基準を満たす、最も明るい無彩色のグレーで、サイトはAAの診断に合格しています。

拡大鏡を使わずに読む弱視の利用者にとって、見出しは楽に読めても、段落は読むのがつらくなります。文字が欠けているわけではないのに1行読むたびに負担がかかり、数行読んだところで画面に顔を近づけるか、読むのをやめてしまいます。

## 確認できる問題

コントラスト比は、文字と、その後ろの背景の明るさの差を表す値です。文字が背景と同じ色なら1:1、白の上の黒なら21:1で、数値が大きいほど文字がはっきり見えます。

WCAG 1.4.6では、文字と背景のあいだに7:1以上、大きな文字（24px以上、または18.66px以上の太字）には4.5:1以上を求めています。段落は17pxの標準の太さ、執筆情報は13pxなので、どちらも通常の文字で7:1が必要です。白の上の#767676は4.54:1です。AAの最低基準である1.4.3は満たしますが、1.4.6は満たしません。見出しは#1a1a1aで17.40:1あり、どちらの基準でも合格です。

2つの基準の違いは、想定している読者の違いでもあります。W3Cの1.4.6の解説によると、視力がおよそ20/80（小数視力0.25程度）まで落ちた人は、コントラストを感じ取る力も落ちていることが多く、7:1はその低下を補うための値です。それ以上に見えにくい人の多くは、拡大やコントラストの設定などの支援技術を使います。7:1は、その中間にいて、表示されたままのページを読む人のための基準です。

ブラウザーは、スタイルシートが指定した色をそのまま描くだけです。このグレーは多くの場合「muted」や「secondary」という名前のデザイントークンで、一度4.5:1を満たすか確かめただけで、デザイン上控えめにしたい段落、キャプション、執筆情報のすべてに使われます。

## 利用者への影響

問題が大きくなるのは、長く読む文章です。記事、レシピの作り方、商品のお手入れ方法、利用規約などがそうです。同じグレーでも短いラベルなら一度読めば済みますが、1ページ分の文章は1行ずつ読み続けることになります。この読者は、屋外でスマートフォンを見るときや、明るさを下げたノートパソコンを使うとき、度が合わなくなった眼鏡で読むときにも、同じ読みにくさを抱えます。

## 自動チェックとAIの限界

axeには7:1を確認する color-contrast-enhanced というルールがありますが、レベルAAAのタグが付いていて、初期状態では無効です。そのため、axeの初期設定のまま、またはAとAAのルールだけで実行する自動チェックでは、#767676は何も指摘されずに合格します。配色を4.5:1だけで確認しているデザインシステムでは、このグレーも「アクセシブル」とされます。AIに「アクセシブルなグレー」を尋ねると、#767676や、Bootstrapの secondary（`#6c757d`、4.69:1）、Tailwindの `gray-500`（`#6b7280`、4.83:1）のようなライブラリーのグレーが提案されることがありますが、どれも7:1に届きません。EaseWebの診断では color-contrast-enhanced を実行し、4.5:1は満たすものの7:1に届かない文字を、レベルAAAの要確認項目として報告します。

## 修正前：AAを満たす最も明るいグレーの本文

```html
<header class="site-header">
  <a href="/" class="logo">Kiln & Clay</a>
</header>
<main>
  <article class="article">
    <h1>マグに釉薬をかける方法</h1>
    <p class="byline">工房日誌・6分で読めます</p>
    <p>マグは2回釉薬に浸します。最初は淡い下地の釉薬に、次に縁だけを濃い釉薬に浸すと、焼くあいだに流れて模様になります。</p>
    …
  </article>
</main>
```

```css
:root {
  --ink: #1a1a1a;   /* 白の上で17.40:1 */
  --muted: #767676; /* 白の上で4.54:1 */
}
body {
  background: #fff;
  color: var(--ink);
}
.article p {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.byline {
  font-size: 0.8125rem;
}
```

見出しには問題がありません。白の上の黒に近い色で、17.40:1です。問題は段落と執筆情報にあります。

- 段落は17pxで、白の上の#767676は4.54:1です。必要なのは7:1です。
- 執筆情報は13pxで同じグレーのため、同じく4.54:1です。
- 本文と見出しの違いを薄いグレーだけで出しているため、控えめに見せることが、そのままコントラストを下げることになっています。

## 修正後：7:1に届く濃いグレー

```html
<header class="site-header">
  <a href="/" class="logo">Kiln & Clay</a>
</header>
<main>
  <article class="article">
    <h1>マグに釉薬をかける方法</h1>
    <p class="byline">工房日誌・6分で読めます</p>
    <p>マグは2回釉薬に浸します。最初は淡い下地の釉薬に、次に縁だけを濃い釉薬に浸すと、焼くあいだに流れて模様になります。</p>
    …
  </article>
</main>
```

```css
:root {
  --ink: #1a1a1a;   /* 白の上で17.40:1 */
  --muted: #555555; /* 白の上で7.46:1 */
}
body {
  background: #fff;
  color: var(--ink);
}
.article h1 {
  font-weight: 800;
}
.article p {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.byline {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
```

1. muted のトークンを、グレーに見える範囲の#555555に変えます。白の上で7.46:1です。トークンを使っているすべての段落と執筆情報が一度に変わります。
2. 見出しを太くし、濃くなった本文の上でも引き立つようにします。
3. 執筆情報の字間を少し広げ、色ではなく大きさと字間で控えめに見せます。

これで修正前の例は直り、何も切り替えることなく、すべての読者に対して1.4.6を満たします。

## 修正後：コンテンツの前のコントラスト切り替え

```html
<header class="site-header">
  <a href="/" class="logo">Kiln & Clay</a>
  <button type="button" class="contrast-switch" aria-pressed="false">高コントラスト</button>
</header>
<main>
  <article class="article">
    <h1>マグに釉薬をかける方法</h1>
    <p class="byline">工房日誌・6分で読めます</p>
    <p>マグは2回釉薬に浸します。最初は淡い下地の釉薬に、次に縁だけを濃い釉薬に浸すと、焼くあいだに流れて模様になります。</p>
    …
  </article>
</main>
<script>
  const root = document.documentElement;
  const toggle = document.querySelector('.contrast-switch');
  const show = (more) => {
    root.dataset.contrast = more ? 'more' : 'normal';
    toggle.setAttribute('aria-pressed', String(more));
  };
  const saved = localStorage.getItem('contrast');
  show(saved ? saved === 'more' : matchMedia('(prefers-contrast: more)').matches);
  toggle.addEventListener('click', () => {
    const more = toggle.getAttribute('aria-pressed') !== 'true';
    localStorage.setItem('contrast', more ? 'more' : 'normal');
    show(more);
  });
</script>
```

```css
:root {
  --ink: #1a1a1a;   /* 白の上で17.40:1 */
  --muted: #767676; /* 白の上で4.54:1 */
}
/* 切り替えたときの表示：すべての段落を ink の色にします。 */
:root[data-contrast='more'] {
  --muted: var(--ink);
}
body {
  background: #fff;
  color: var(--ink);
}
.article p {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.byline {
  font-size: 0.8125rem;
}
.contrast-switch {
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink); /* 17.40:1。切り替え自体も読みやすくします */
}
/* オンのときは塗りつぶし、色だけに頼らず状態を示します。 */
.contrast-switch[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
}
```

1. メインコンテンツより前のヘッダーに、「高コントラスト」ボタンを置きます。目で見ても、Tabキーでも、スクリーンリーダーでも、最初のほうで見つかります。
2. `aria-pressed` を付け、オンかオフかをスクリーンリーダーが読み上げられるようにします。
3. 押されたらルート要素に `data-contrast="more"` を付け、muted のトークンを ink の色に変えます。段落は4.54:1から17.40:1になります。
4. 選んだ状態を `localStorage` に保存してどのページでも読み込み、一度オンにすれば済むようにします。まだ保存されていないときは、利用者自身の `prefers-contrast` の設定から始めます。
5. 切り替え自体も ink の色（17.40:1）で描き、オンの間は塗りつぶします。必要とする人が読めて、オンになっていると分からなければ意味がありません。

これで修正前の例は直り、切り替えをオンにしたページで1.4.6を満たします。この方法は、WCAGの達成方法G174として認められています。ただし、標準のページは4.54:1のままなので、これだけでは十分ではありません。効果があるのは切り替えに気付いた読者だけで、しかも切り替えがどのページにもあり、選択を保ち続けている間に限られます。

## どの方法を選ぶか

どちらも基準を満たします。濃いグレーを選んでください。探したり切り替えたりしなくてもすべての読者に届き、トークンを1行変えるだけで済み、控えめな印象も文字の大きさ、太さ、字間で保てます。切り替えは、薄いグレーがブランドとして変えられない決定である場合にだけ加えます。その場合は、切り替えをすべてのページのヘッダーの一部として扱い、同じ場所に置き続け、リリースのたびに確認してください。

## 実装の判断

1.4.6でも大きな文字は4.5:1でよいため、24px以上、または18.66px以上の太字の見出しは#767676のままでも構いません。それより小さな文字には7:1が必要です。執筆情報、キャプション、入力欄の下の補足、フッターの細かい文字など、デザイナーが控えめにしがちな文字も含まれます。

トークンには用途が分かる名前を付け、横に比率を書いておきます。`--muted` という名前のトークンは控えめにしたいものすべてに使われがちですが、`--text-secondary` に7.46:1というコメントがあれば、段落に使ってよいことが次の人に伝わります。

`prefers-contrast: more` は尊重する価値があり、この切り替えも、保存された選択がないときはこの設定に従います。ただし、それだけでは1.4.6の修正になりません。変わるのは端末でコントラストの設定をオンにした人のページだけで、それ以外の人が見るページも基準を満たす必要があります。

切り替えはスクリプトで選択を読むため、ページが一瞬グレーで表示されてから濃くなることがあります。本文が描かれる前に、head の短いスクリプトで `localStorage` から `data-contrast` を付けるか、サーバー側でCookieから付けてください。

AAの最低基準と同じく、すべての状態とテーマが対象です。ホバー、フォーカス、訪問済みの色、ダークテーマのグレー、`opacity` を付けた文字（トークンより薄い色になります）も確認します。Windowsのコントラスト テーマでは、ブラウザーがこれらの色を利用者の色に置き換えるため、グレーは表示されません。それでも、ページ本来の色で基準を満たす必要があります。

## 修正の確認

1. ページ上のすべての文字色を、DevToolsのカラーピッカーかWebAIMのチェッカーで背景に対して測定する。段落、執筆情報、キャプション、補足、フッターを含め、7:1（24px以上、または18.66px以上の太字は4.5:1）以上あるか確認する。
2. DevToolsの `:hov` パネルで `:hover`、`:focus-visible`、`:visited` を固定し、各リンクとボタンをもう一度測定する。
3. 切り替えで修正した場合は、スクリーンリーダーを起動してページの先頭からTabキーで切り替えに移動し、押して「押されている」と読み上げられるか確認する。文字をもう一度測定し、別のページを開いて再読み込みしても、オンのままか確認する。
4. サイトが提供する各テーマに切り替えてもう一度測定し、Windowsのコントラスト テーマを有効にして、文字がテーマの色に従うか確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。色のトークンやテーマを変更した際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。色の値とトークン名は例のため、実際の配色を実際の背景で測定してください。写真の上の文字や、4.5:1の最低基準に届かない文字は、[ブランドカラーや写真の上でコントラストが足りない文字](/ja/learn/text-contrast)で扱っています。コントラスト比は最低限の基準であり、読みやすいことの証明ではありません。同じ比率でも、細い書体、小さな文字、長い行は読みにくくなり、真っ黒と白の組み合わせをまぶしく感じる読者もいます。必要とする人と一緒に、ページ全体を確認してください。

## スクリーンリーダーでの動き（EaseWebが実機で確認）

`aria-pressed`: ボタンを、オンとオフを切り替えるトグルにします。

| スクリーンリーダー | ブラウザーとOS | 押す | Tabで移動 |
| --- | --- | --- | --- |
| NVDA | Chrome, Windows 11 | 未確認 | 未確認 |
| JAWS | Chrome, Windows 11 | 未確認 | 未確認 |
| VoiceOver | Safari, iOS | 未確認 | 未確認 |
| TalkBack | Chrome, Android | 未確認 | 未確認 |

https://easeweb.dev/ja/learn/screen-reader-support

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）