WCAG 1.4.6: コントラスト（強化）

WCAG 1.4.6は、前景色と背景色の間のコントラスト比について、通常のテキストには7:1、拡大されたテキストには4.5:1の最小値を求めており、低視力や色覚異常のユーザー、あるいは厳しい照明条件下で操作しているユーザーの可読性を確保するために、AAの閾値を超えた基準を定めています。

このルールの意味

WCAG 1.4.6 コントラスト（強化）は、ガイドライン 1.4（判別可能）のレベル AAA 達成基準です。これは、テキストおよびテキストの画像の視覚的な提示が背景に対して少なくとも7:1のコントラスト比を持つことを求めています。大きなテキスト（通常の太さで少なくとも 18pt（約 24px）、または太字で少なくとも 14pt（約 18.67px）と定義される）については、必要なコントラスト比は少なくとも4.5:1です。これは、通常のテキストに 4.5:1、大きなテキストに 3:1 を求めるだけのレベル AA の達成基準 1.4.3 から大きく引き上げられたものです。

コントラスト比は、WCAG 仕様で定義されている 2 色の相対輝度を用いて計算されます。この式は前景色と背景色の線形化された RGB 値を考慮し、1:1（コントラストなし、同一色）から 21:1（最大コントラスト、白地に黒または黒地に白）までの比率を算出します。

この達成基準は、インターフェイス内でレンダリングされるすべてのテキストに適用されます。画像内のテキスト、テキストを含むアイコン、レンダリングされた出力にアクセス可能な canvas 要素内でレンダリングされるテキストも含まれます。見出し、本文、ラベル、意味のある情報を伝えるフォームフィールドのプレースホルダーテキスト、ボタンラベル、リンクテキスト、ナビゲーション項目、その他画面上に表示されるあらゆるテキストコンテンツに影響します。

WCAG 1.4.6 は、達成基準 1.4.3 と同じ公式の例外を共有しています。以下は要件から明示的に除外されます。

偶発的なテキスト: 純粋に装飾目的のテキストまたはテキストの画像、誰からも見えないもの、あるいは他の重要な視覚コンテンツを含む画像の一部であるもの。例としては、装飾として使用される写真の背景に見えるテキストなどがあります。
ロゴタイプ: ロゴやブランド名の一部であるテキストにはコントラスト要件はありません。これは企業ロゴのワードマーク部分のみに適用され、隣接する本文や UI ラベルには適用されません。
非アクティブなユーザーインターフェイスコンポーネント: 無効化されたフォームコントロール、無効化されたボタン、その他現在操作できないインターフェイス要素内のテキストは免除されます。ただし、この免除は慎重に適用すべきです。非アクティブな UI であっても、その存在が伝わる程度には知覚可能であるべきです。

この達成基準に合格するということは、明示的に例外とされていないすべてのテキストコンテンツが 7:1（大きなテキストの場合は 4.5:1）以上の比率を満たしていることを意味します。失敗となるのは、例外ではないテキストのいずれかが、わずかでもこれらの閾値を下回った場合です。コントラストは、ホバー、フォーカス、アクティブ、訪問済みといったすべてのサポートされる状態にわたって維持されなければなりません。なぜなら、この達成基準は各状態でレンダリングされる提示に適用されるからです。

なぜ重要か

世界保健機関によると、世界で約 22 億人が何らかの視覚障害を抱えて生活しています。そのうち数億人は、白内障、緑内障、黄斑変性症、さまざまな色覚異常など、色の識別能力や低コントラストのテキストを知覚する能力を直接低下させる状態を経験しています。この人々にとって、4.5:1 という AA のコントラスト閾値だけを満たすインターフェイスは、読解や理解に依然として大きな障壁となり得ます。

この達成基準が求める 7:1 の比率は、加齢に伴う視力低下や一般的なロービジョン状態に関連するコントラスト感度の低下を織り込んで特別に調整されています。視覚科学の研究によると、中程度にコントラスト感度が低下した人（矯正レンズを使用した 20/80 の視力の人におおよそ相当）は、実効的に約 3 対 1 のコントラスト低下を経験し得ることが示されています。7:1 のデザイン比率は、この知覚上の低下を経ても、およそ 2.3:1 の知覚コントラストを提供し、これはテキストが読めるようになる最小閾値付近です。この余裕がなければ、そのようなユーザーはコンテンツをまったく読めない可能性があります。

現実のシナリオを考えてみましょう。68 歳の銀行顧客が、明るい午後にノートパソコンの画面に日光が反射する中でオンラインで財務管理を行っているとします。臨床的には視力が十分であっても、まぶしさや加齢に伴うコントラスト感度の自然な低下により、白い背景に中程度のグレーのテキストは完全に判読不能になることがあります。通常の条件で 7:1 のコントラストを達成しているデザインは、このような状況でも引き続き利用可能ですが、4.5:1 をかろうじて満たしているだけのデザインはそうではありません。

障害に特化した影響を超えて、高コントラストのテキストは、最適とは言えない読書環境にいるほぼすべてのユーザーに利益をもたらします。明るい屋外の日光、バックライトが弱くなった古い画面、モノクロの電子ペーパー表示、会議室の低品質なプロジェクターなどです。したがって、強化されたコントラスト要件は、アクセシビリティの改善であるだけでなく、広範なユーザビリティの向上でもあります。

検索エンジン最適化の観点から見ると、高コントラストのテキストは、よりクリーンで構造化されたタイポグラフィ階層と相関する傾向があります。検索エンジンはコントラストを直接測定してはいませんが、AAA のコントラスト基準を満たすために必要なデザイン上の規律は、視覚的な階層が強く、可読性スコアの高いページを生み出すのが一般的であり、それが直帰率の低下や滞在時間の増加につながります。これらは間接的に SEO パフォーマンスに寄与するシグナルです。

テスト方法

axe DevTools による自動スキャン: axe DevTools ブラウザ拡張機能（Chrome または Firefox）をインストールします。対象ページを開き、拡張機能を有効にしてページ全体のスキャンを実行します。結果パネルでルール ID color-contrast-enhanced でフィルタするか、問題リストで「enhanced」を検索します。フラグされた各要素について、パネルには要素、実際のコントラスト比、必要な比率が表示されます。「要確認」として報告される要素に注意してください。これらは通常、解決できなかった計算済み背景を含み、手動での検証が必要です。
Lighthouse による自動スキャン: Chrome DevTools を開き、Lighthouse タブに移動してアクセシビリティ監査を実行します。Lighthouse は内部的に axe-core を使用しているため、同じ color-contrast-enhanced の違反を表示します。レポートはそれらを Accessibility の下にグループ化し、各不合格要素へのリンクを提供します。Lighthouse はページのデフォルト状態を監査し、ホバーやフォーカスなどのインタラクティブ状態はテストしないことに注意してください。
手動での色サンプリング: ブラウザの開発者ツールのカラーピッカーや、Colour Contrast Analyser（TPGi）などの専用ツールを使用して、テキスト要素の前景色と背景色を手動でサンプリングします。これは、画像、グラデーション、半透明の背景上のテキストに特に重要です。背景が変化するテキストに沿って複数のポイントをサンプリングし、サンプリングしたすべてのポイントにおける最小コントラスト比が、通常テキストで 7:1、大きなテキストで 4.5:1 を満たしていることを確認します。
インタラクティブ状態のテスト: ブラウザの DevTools を使用して、要素をホバー、フォーカス、アクティブ、訪問済み状態に強制します（Chrome DevTools の :hov パネルなどを使用）。各状態でコントラストチェックを再実行し、CSS の疑似クラスによって適用される色の変更がコントラストの不備を生まないことを確認します。特に、リンクの訪問済み状態、ボタンのホバー状態、フォームフィールドのフォーカスインジケーターに注意してください。
スクリーンリーダーによる検証（NVDA + Firefox）: スクリーンリーダーはコントラストを直接テストしませんが、NVDA でテキストにアクセスできることを確認することで、それが DOM 上の実テキスト（代替のないテキスト画像ではない）であることが確認できます。Firefox を起動し、NVDA を開いて読み上げカーソルを使ってページを閲覧します。NVDA が読み上げられないテキストがあれば、それがコントラストテストを画像レベルで必要とするテキスト画像でないか調査する必要があります。
スクリーンリーダーによる検証（macOS の VoiceOver + Safari）: Command+F5 で VoiceOver を有効にし、VO+右矢印でページをナビゲートします。NVDA の場合と同様に、VoiceOver が飛ばしたり誤って読み上げたりするテキストは、手動でのコントラスト検査が必要な非標準的なテキストレンダリングを示している可能性があります。
グレースケールシミュレーション: オペレーティングシステムのアクセシビリティ設定（Windows、macOS、iOS、Android で利用可能）からグレースケール表示モードを有効にします。これによりすべての色情報が除去され、コントラストの違いが即座に可視化されます。グレースケールモードで読みづらくなるテキストは、ほぼ確実に強化されたコントラスト要件に不合格です。

修正方法

明るい背景上の本文テキスト — 不適切

<!-- Fails 1.4.6: #767676 on #ffffff yields approximately 4.54:1,
     which passes AA (1.4.3) but falls far short of the 7:1 AAA requirement -->
<p style='color: #767676; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

明るい背景上の本文テキスト — 適切

<!-- Passes 1.4.6: #595959 on #ffffff yields approximately 7.0:1,
     meeting the enhanced contrast requirement for normal-weight body text -->
<p style='color: #595959; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

ブランド背景上の有色見出し — 不適切

<!-- Fails 1.4.6: brand blue #4A90D9 on white #ffffff yields approximately 3.0:1.
     Even though this is a heading and may appear large, bold headings at
     common web sizes (e.g. 20px bold) may not qualify as WCAG "large text"
     depending on rendering, and 3.0:1 fails even the large-text 4.5:1 threshold -->
<h2 style='color: #4A90D9; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

ブランド背景上の有色見出し — 適切

<!-- Passes 1.4.6: dark navy #1A3A5C on white #ffffff yields approximately 12.6:1.
     Exceeds the 7:1 requirement for normal text and comfortably surpasses
     the 4.5:1 large-text requirement. Brand identity is preserved through
     the use of a darker shade within the same hue family. -->
<h2 style='color: #1A3A5C; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

グラデーション背景上のテキスト — 不適切

<!-- Fails 1.4.6: The gradient transitions from a dark color that provides
     adequate contrast on the left to a light color that provides insufficient
     contrast on the right. Text spanning the full width will fail at some point. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff;'>Create your account today and get started.</p>
</div>

グラデーション背景上のテキスト — 適切

<!-- Passes 1.4.6: A semi-transparent dark overlay behind the text ensures
     that foreground text maintains at least 7:1 contrast regardless of
     the underlying gradient value at any point beneath the text block. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff; background-color: rgba(0,0,0,0.75); padding: 8px 12px; display: inline-block;'>
    Create your account today and get started.
  </p>
</div>

フォーム入力のプレースホルダーテキスト — 不適切

<!-- Fails 1.4.6: default browser placeholder styling is typically around
     #aaaaaa on white, yielding approximately 2.32:1. If placeholder text
     conveys meaningful information (e.g. format hints), it must meet contrast requirements. -->
<input type='text' placeholder='DD/MM/YYYY' style='background: #ffffff;'>

フォーム入力のプレースホルダーテキスト — 適切

<!-- Passes 1.4.6: Override the default placeholder color to achieve 7:1 contrast.
     Also adds a visible label as best practice, since placeholders disappear on input. -->
<label for='dob'>Date of Birth</label>
<input type='text' id='dob' placeholder='DD/MM/YYYY'
  style='background: #ffffff; color: #000000;'>
<style>
  input::placeholder {
    color: #595959; /* approximately 7.0:1 on white — meets AAA */
  }
</style>

よくある間違い

AAA の閾値を確認せずに AA に合格する色の組み合わせだけに頼ること: 多くのデザイナーは、白地に一般的な中間グレーの #767676 を使用しますが、これは 1.4.3 には約 4.54:1 で合格する一方、1.4.6 には大きく届きません。4.5:1 ではなく、必ず 7:1 の目標に対して検証してください。
大きなテキストの例外が広く適用されると誤解すること: 大きなテキストの例外（7:1 ではなく 4.5:1）は、通常の太さで少なくとも 18pt（24px）、または太字で少なくとも 14pt（18.67px）のテキストにのみ適用されます。20px の通常の太さのテキストは該当せず、依然として 7:1 を満たす必要があります。
インタラクティブ状態でのコントラストを無視すること: 視覚的なアフォーダンスを作るためにホバー時に色を明るくし、そのホバー状態が依然として 7:1 を満たしているか確認しないこと。例えば、ホバー時にボタンの背景を暗くしつつテキストを白のままにする場合は依然として合格するかもしれませんが、ホバー時にテキストを明るくすると不合格になることがよくあります。
CSS カスタムプロパティの連鎖を見落とすこと: テキスト色を var(--color-primary) のように定義し、--color-primary がグローバルに設定されているものの、コンポーネントスコープ内で上書きされているにもかかわらず、コントラストを再検証しないこと。実際にレンダリングされる色はグローバルトークンの値と異なり、特定のコンポーネントコンテキストで不合格の比率を生む可能性があります。
無効状態の免除をデザイン上の免罪符とみなすこと: 非アクティブな UI の免除を口実に、無効な要素を 1:1 のコントラスト（見えないテキスト）でスタイリングし、ユーザーがフィールドの存在自体を認識できないようにしてしまうこと。無効な要素は 7:1 の要件から免除されていても、視覚的に知覚可能であるべきです。
画像や動画上にレンダリングされたテキストをテストしないこと: ヒーロー画像や動画の背景上にテキストを直接配置し、テキストが通過する画像の最も明るい部分ではなく平均色に対してのみコントラストを確認すること。最小コントラストは、平均ではなくテキストの下にあるすべてのピクセルにわたって維持されなければなりません。
デスクトップのブレークポイントにのみコントラスト修正を適用すること: モバイルのブレークポイントで異なる背景色を使用するレスポンシブデザイン（例えば、デスクトップでは白い背景だが、モバイルでは淡いベージュのカード背景に切り替えるなど）は、デスクトップテスト時には存在しなかった新たなコントラスト不備を小さな画面サイズで生み出す可能性があります。
フォーカスインジケーターのテキストコントラストを忘れること: カスタムフォーカスリングやフォーカス状態で、フォーカスされた要素の背景とテキスト色の両方を変更する場合、フォーカス状態での新しいテキストと背景の組み合わせは、デフォルト状態が達成しているかどうかに関係なく、独立して 7:1 の比率を満たさなければなりません。
ロゴの免除が隣接する説明テキストにも及ぶと想定すること: ブランドロゴと同じタイポグラフィブロック内にタグラインや製品説明を配置し、ブロック全体にロゴの免除を適用しようとすること。この免除は、ロゴ自体の不可分な一部であるテキストにのみ厳密に適用され、近くのコピーには適用されません。
CSS フレームワークの上書き後にコントラストを検証しないこと: テキスト色を 7:1 未満の値にリセットまたは上書きするサードパーティのコンポーネントライブラリや CSS フレームワークをインポートし、そのデフォルトを監査せずに出荷してしまうこと。フレームワークのデフォルトは、AAA のコントラスト基準に合わせて調整されていることはほとんどありません。

トルコのアクセシビリティ規制との関係

2025 年 6 月 21 日付官報第 32933 号で公布されたトルコ大統領通達 2025/10 は、トルコで事業を行う幅広い機関・組織に対して、デジタルアクセシビリティ要件を義務付けています。この通達は、WCAG 2.2 レベル AA への準拠をベースライン標準として義務付けています。対象となる組織には、公的機関・庁、e コマースプラットフォーム、銀行および金融サービス提供者、病院および医療機関、20 万人以上の加入者を持つ通信会社、旅行代理店、民間輸送会社、国民教育省（MoNE）に認可された私立学校が含まれます。

WCAG 1.4.6 コントラスト（強化）はレベル AAA の達成基準であり、そのため大統領通達の下では必須要件ではありません。レベル AA 準拠のみを達成している組織（法的に義務付けられたベースライン）については、達成基準 1.4.3 で定義される通常テキストに対する 4.5:1 の AA 閾値を満たしている限り、7:1 の強化コントラスト要件を満たしていなくても通達違反にはなりません。

しかし、コントラストにおいて AAA 準拠を達成することは、最低限の法的遵守をはるかに超えたインクルーシブデザインへの意味のあるコミットメントを表します。障害の有無にかかわらずすべての市民にサービスを提供する最も広範な義務を負う公的機関にとって、強化されたコントラスト基準を自主的に採用することは、真にユニバーサルアクセスに取り組んでいることを示すシグナルとなります。患者がすでに身体的または認知的ストレス下にある場合や、明るい臨床照明などの厳しい条件下でデジタルシステムとやり取りしている場合がある医療機関や病院にとっては、最小コントラスト閾値を超えることには特に強い実務的な根拠があります。同様に、高齢のユーザーが増えつつある銀行や金融サービス提供者は、AAA のコントラスト準拠が伝える信頼性とユーザーからの信頼から恩恵を受けるのに適した立場にあります。

ISO 30071-1 認証、欧州 EN 301 549 への整合、またはアクセシビリティ成熟度を評価する国際的な調達プロセスを目指す組織にとって、レベル AAA のコントラスト準拠は自らの立場を強化することになります。世界的に、そしてトルコにおいてもデジタルアクセシビリティの執行が成熟するにつれ、現在レベル AAA にある達成基準が、規制の更新を経て義務的なステータスへ移行してきた歴史があります。今のうちに強化コントラストを採用することは、将来予想される要件に先んじて対応することになり、将来的な是正コストを削減します。

Accsible overlay SDK を使用している組織にとっては、プラットフォームのコントラスト調整ツールが、ウィジェットレベルで高コントラストモードを適用する際にユーザーを支援し、公開されたデザインのコントラストレベルと個々のユーザーのニーズとのギャップを埋める補完的なレイヤーを提供します。これはソースコードレベルでこの達成基準を満たすことの代替にはなりませんが、強化されたコントラストを必要とし、まだ完全な AAA 準拠を達成していないサイトを訪れるユーザーに対して、意味のあるランタイムサポートを提供します。

出典と参考資料

AWCAG 1.1.1: 非テキストコンテンツ AWCAG 1.2.1: 音声のみおよび映像のみ（事前録画）AWCAG 1.2.2: キャプション（事前録画）