WCAG 1.4.3: コントラスト（最小）

このルールの意味

WCAG 1.4.3 — コントラスト（最低限）は、Web Content Accessibility Guidelines 2.2 のガイドライン 1.4（判別可能）の下にあるレベル AA の達成基準です。これは、テキストおよびテキストの画像の視覚的な表示が背景との間に十分な輝度コントラスト比を維持し、中等度のロービジョンの人がコントラストを強調する支援技術に頼らずにコンテンツを読めるようにすることを求めています。

必要なコントラスト比は次のとおりです。通常のテキスト — 18 ポイント未満（約 24 CSS ピクセル）または太字 14 ポイント未満（約 18.67 CSS ピクセル）のテキスト — は、少なくとも 4.5:1 のコントラスト比を達成しなければなりません。大きなテキストは、18 ポイント以上の標準ウェイト、または太字 14 ポイント以上のテキストと定義され、最低 3:1 のコントラスト比が必要です。同じ閾値はテキストの画像にも適用されます。読み取り可能な文字を描画するラスタ画像またはベクター画像も、隣接する背景色に対してこれらの比率を満たさなければなりません。

コントラスト比は、WCAG 仕様で定義されている相対輝度の式を用いて計算されます。相対輝度 (L) は、ガンマ補正後の sRGB カラー値から算出され、比率は (L1 + 0.05) / (L2 + 0.05) として表されます。ここで L1 は 2 つの輝度値のうち明るい方、L2 は暗い方です。1:1 の比率はまったくコントラストがない（同一の色）ことを意味し、21:1 が最大で、純粋な白地に純粋な黒を置いた場合にのみ達成されます。

この基準は、ブラウザによってレンダリングされるすべての前景テキストを対象とし、ボタン、リンク、ラベル、フォームフィールド、表のセル、ツールチップ、入力欄内のプレースホルダーテキスト、画像やグラデーションの上に重ねられたテキストを含みます。また、SVG のテキスト要素や、CSS 生成コンテンツ（::before および ::after 疑似要素）によってレンダリングされるテキストも対象です。

WCAG 1.4.3 は、要件から明示的に除外されるいくつかの公式な例外を定義しています。

• 偶発的なテキスト: 純粋に装飾目的のテキストまたはテキストの画像、表示されていないもの、または非アクティブ（無効）のユーザーインターフェイスコンポーネントの一部を構成するものは免除されます。たとえば、無効化されたフォームフィールドの薄暗いラベルは、この比率を満たす必要はありません。
• ロゴタイプ: ロゴやブランド名の一部であるテキストには最低コントラスト要件はありません。これは、ブランドアイデンティティが特定の色の選択に依存することが多く、ユーザーはロゴを視覚的に認識することが期待されているためです。
• 大きなテキスト: 上記のとおり、大きなテキストには 4.5:1 ではなく 3:1 の緩和された比率が適用されます。これは、文字が大きいほど、コントラストが低くても判別しやすいことを踏まえたものです。

合格となるのは、すべての可視で例外に該当しないテキストについて、算出されたコントラスト比が適用される閾値以上である場合です。可視で例外に該当しないテキストまたはテキストの画像のいずれか 1 つでも、比率の小数点以下のわずかな差であっても閾値を下回ると不合格となります。

重要性

世界保健機関によると、世界で約22 億人が何らかの視覚障害を抱えています。このうちの重要な一部 — 白内障、緑内障、加齢黄斑変性症、糖尿病網膜症などのロービジョンの状態を持つ人々 — は、コントラストが十分であれば画面上のテキストを読むことができますが、コントラストが不十分な場合には読むのに苦労したり、まったく読めなかったりします。コントラスト（最低限）は、テキストがアクセス不能になる下限を測定可能かつテスト可能な形で定めることで、この人々のニーズに直接対応しています。

診断されたロービジョン以外にも、北ヨーロッパ系の男性の推定8%、女性の0.5%が何らかの色覚異常（色覚障害）を経験しています。色覚障害は低コントラストとは別のものですが、多くの色覚障害では特定の色相間の知覚される輝度差が減少し、不十分なコントラストがさらに問題になります。たとえば、緑の背景に赤いラベルがあると、第二色覚異常（デューテラノピア）の人にはほぼ一様な灰色に見える可能性があり、基礎となる輝度コントラストが不十分であればテキストは見えなくなります。

高齢者は特に影響を受けやすい層です。加齢に伴い、目はコントラスト感度を失い、瞳孔径が小さくなり、網膜に届く光の量が減少します。70 代の人は、臨床的にロービジョンと診断されていなくても、30 代の人と同じ読みやすさを得るために、はるかに高い輝度コントラストを必要とする場合があります。

具体的な現実のシナリオを考えてみましょう。あるトルコの e コマースサイトが、商品説明や価格情報に白い背景（#FFFFFF）に薄いグレーのテキスト（#999999）を使用しているとします。これはミニマルな美学のために好まれる一般的なデザインのトレンドです。この組み合わせのコントラスト比は約 2.85:1 で、4.5:1 の閾値を大きく下回ります。初期の加齢黄斑変性症のユーザーは、商品の価格をまったく読めず、購入を断念せざるを得ないかもしれません。これは、ユーザーを基本的な商取引から排除するだけでなく、販売者にとっては直接的な収益損失であり、アクセシビリティ遵守を義務付ける法域では法的リスクにもなります。

ユーザビリティと SEO の観点からも、高コントラストのテキストは、厳しい環境下にいるすべてのユーザーに利益をもたらします。たとえば、屋外の強い日差しの下でのモバイル画面、低品質のディスプレイパネル、あるいは単にモニターを適切に調整していないユーザーなどです。アクセシブルな色の選択は、長時間の読書セッションにおける視覚ユーザーの眼精疲労を軽減し、可読性の向上は直帰率の低下やページ滞在時間の増加と相関します。これらは検索エンジンが品質指標として利用するシグナルです。

関連する axe-core のルール

• color-contrast: これは、WCAG 1.4.3 をレベル AA で強制する主要な自動ルールです。axe-core エンジンは、DOM 内のすべてのテキストノードについて、CSS のカスケード、透過度、z-index のスタッキング、アルファ透過を解決しながら前景色と背景色を算出します。そして、通常のテキストで 4.5:1、または大きなテキストで 3:1 を下回るコントラスト比のテキスト要素をすべてフラグします。このルールは、実際に検出された比率、必要な比率、および不合格となった特定の要素を報告するため、修正が容易です。ただし、axe-core が解析できるのは算出スタイルから決定できる色のみです。<canvas> 内にレンダリングされたテキスト、複雑な CSS グラデーション上のテキスト、背景画像の上のテキストなどは、追加のコンテキストがなければ完全には解決できない場合があり、そのようなケースについて axe は明確な合否ではなく「要レビュー」とマークします。フォーム入力のプレースホルダーテキストもこのルールでチェックされます。
• color-contrast-enhanced: このルールは、より厳格な WCAG 1.4.6 — コントラスト（強化）における通常のテキスト 7:1、大きなテキスト 4.5:1（レベル AAA）の閾値を強制します。1.4.6 は AA 準拠のために必須ではありませんが、強化されたアクセシビリティを目指すチームや、AAA 要件を採用する可能性のある規制環境に備えるチームにとって、開発中にこのルールを実行することは有益です。axe-core はこのルールの違反を別個に報告するため、チームは AA の不合格（color-contrast）と、より高い目標である AAA の改善点（color-contrast-enhanced）を切り分けて対応できます。

自動ツールでは完全に解決できないいくつかのシナリオでは、手動テストが必要です。テキストが背景画像や CSS グラデーションの上に重ねられている場合、テキストのバウンディングボックス内で有効な背景色は場所によって変化します。自動ツールは、支配的な色をサンプリングするか、最悪の領域を仮定するか、または手動レビューに委ねる必要があります。同様に、<canvas> 要素内のテキストは、アクセシビリティツリーに利用可能なセマンティックな色情報を持たないピクセルとしてレンダリングされるため、スポイトツールを用いた手動検査が唯一信頼できるアプローチです。:hover や :focus 状態でのみ表示されるテキストも、自動ツールが評価できるようにする前に、手動でインタラクションを行って表示させる必要がある場合があります。

テスト方法

1. axe DevTools による自動スキャン: axe DevTools ブラウザ拡張機能（Chrome、Firefox、Edge 用）をインストールします。テスト対象のページに移動し、拡張機能パネルを開いてページ全体の解析を実行します。結果パネルで、ルール ID color-contrast と color-contrast-enhanced でフィルタリングします。各違反について、ツールは不合格となった要素をハイライトし、実際のコントラスト比（例:「2.85:1」）、必要な比率（例:「4.5:1」）、および算出された前景色と背景色（16 進数）を報告します。結果を CSV または JSON としてエクスポートして追跡します。レスポンシブレイアウトではフォントサイズ（大きなテキストの閾値に影響）やカラースキームが変わる可能性があるため、すべてのブレークポイントで繰り返し実行します。
2. Lighthouse 監査: Chrome DevTools を開き、Lighthouse タブに移動し、「Accessibility」を選択して監査を実行します。Lighthouse は、Accessibility セクションで要素参照とともにコントラスト違反を表示します。環境によっては Lighthouse が古いバージョンの axe-core を使用していることがあるため、axe DevTools を直接使用した方が多くの問題を検出できる場合があります。
3. 手動でのコントラスト測定: ブラウザの DevTools に組み込まれたカラーピッカー、または WebAIM Contrast Checker（webaim.org/resources/contrastchecker/）や TPGi Colour Contrast Analyser デスクトップアプリケーションなどの専用ツールを使用します。スポイトで前景色と背景色を選択し、報告された比率が閾値を満たしていることを確認します。グラデーションや画像上のテキストについては、テキスト領域全体で複数のポイントをサンプリングし、最もコントラストが低い測定値を決定的な値として使用します。
4. インタラクティブ状態のテスト: リンクやインタラクティブ要素に対して、:hover、:focus、:active、:visited 状態を手動でトリガーし、それぞれの状態でコントラストを個別に測定します。一部のデザインでは、ホバー時に色が明るくなり、意図せずコントラストが不足することがあります。ブラウザの DevTools にある「Force element state」機能を使用して状態を固定し、その間に測定します。
5. スクリーンリーダーとキーボードによるレビュー（文脈的）: コントラストは視覚的な基準であり、スクリーンリーダーでは直接検出できませんが、NVDA + Firefox、VoiceOver + Safari、JAWS + Chrome などでテストすることで、テキストがアクセシビリティツリーに存在し、color: transparent のような CSS テクニックによって視覚的にアクセス不能になっていないことを確認できます。スクリーンリーダーが画面上では見えないテキストを読み上げる場合、その視覚的なレンダリングが視覚ユーザー向けのコントラスト要件を満たしているかどうかを調査します。
6. ズームとフォントスケーリング: ブラウザのデフォルトのフォントサイズ（設定 → 外観 → フォントサイズ）を大きくし、ズームを 200% にします。これらのサイズで「通常」から「大きな」テキストに移行するテキストが、依然として適切な閾値を満たしていることを確認します。デフォルトズームで 14px のフォントは、200% ズームでは 28px になり、適用される閾値が変わる可能性があります。

修正方法

本文テキストのコントラスト不足 — 不適切な例

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

本文テキストのコントラスト不足 — 適切な例

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

コントラストが低いコールトゥアクションボタン — 不適切な例

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

コントラストが低いコールトゥアクションボタン — 適切な例

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

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

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

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

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

背景画像やグラデーション上のテキスト — 不適切な例

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

背景画像やグラデーション上のテキスト — 適切な例

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

よくある間違い

• 自分の調整済みモニターで見やすければ問題ないと仮定すること: 広色域かつ高輝度のハイエンドディスプレイでは、コントラストが低い組み合わせでも、正常な視力を持つデザイナーには制御された環境下で読みやすく見えることがありますが、同じテキストが安価なノート PC の画面やオフィスの蛍光灯の下では判読不能になることがあります。必ず視覚的な判断だけでなく、コントラスト比ツールで検証してください。
• インタラクティブ状態を個別にテストするのを忘れること: リンクはデフォルト状態では 4.5:1 を満たしていても、:hover 時に色が明るくなり 2.8:1 に下がることがあります。各インタラクティブ状態は、それぞれ独立して閾値を満たさなければなりません。
• 無効なフォームフィールドは一律に例外だとみなすこと: 例外が適用されるのは、非アクティブな UI コンポーネントのみです。フィールドが視覚的には無効のようにスタイルされていても、プログラム上は有効（disabled 属性がない）である場合、そのフィールドは例外ではなく、コントラスト要件を満たす必要があります。
• 実効色を考慮せずに不透明度でテキストを薄くすること: opacity: 0.5 を暗いテキストに設定すると、背景と実質的にブレンドされ、より明るい合成色が生成されます。コントラスト比は、元の CSS 値ではなく、結果として得られる合成色に対して計算しなければなりません。たとえば、白地に 50% の不透明度で配置された #000000 は、おおよそ #808080 としてレンダリングされ、そのコントラスト比は約 3.9:1 となり、通常のテキストに対する 4.5:1 の閾値を下回ります。
• SVG 要素内のテキストを見落とすこと: fill でスタイルされ、CSS の color ではない SVG の <text> 要素も 1.4.3 の対象です。SVG の埋め込み方法（インライン、<img>、<object>）によっては、自動ツールがこれらを見逃すことがあります。インライン SVG が最も確実にテスト可能なアプローチです。
• 大きなテキストの例外におけるテキストサイズの誤認識: 18pt / 太字 14pt の閾値は、ソースの CSS ピクセル値ではなく、ユーザーのブラウザにおけるレンダリングされたサイズを指します。CSS の font-size: 24px は 1pt = 1.333px であるため正確に 18pt に相当しますが、ユーザーがデフォルトのフォントサイズを大きく設定している場合、16px の要素が 18pt より大きくレンダリングされることがあります。ブラウザのデフォルトフォントサイズでテストし、サイズ計算を慎重に確認してください。
• リンクテキストと本文テキストの区別に色だけを頼ること: 下線のないリンクが周囲のテキストと色だけで区別されている場合、リンク色はページ背景に対して 4.5:1 を満たすだけでなく、本文テキストの色に対しても 3:1 を達成しなければなりません。多くのデザインは、このいずれか、または両方の要件を満たしていません。下線（または色以外の視覚的な指標）を追加する方が安全なアプローチです。
• サードパーティのウィジェットやチャットプラグイン内のテキストを無視すること: 埋め込みウィジェット — ライブチャットウィンドウ、クッキー同意バナー、レビューカルーセル、ソーシャルメディアフィードなど — はページの一部であり、WCAG 1.4.3 準拠の対象範囲に含まれます。自社のコードベースが完全に準拠していても、サードパーティウィジェット内の低コントラストテキストは不合格となります。
• ダークモードやハイコントラストモード有効化後に再テストしないこと: ライトモードでは合格しているカラースキームでも、CSS カスタムプロパティが適切に管理されていないと、ダークモードでは不合格になる場合があります。同様に、Windows のハイコントラストモードは多くの CSS の色指定を上書きします。テキストが引き続き読みやすいこと、強制色環境でカスタム CSS が誤って低コントラストの組み合わせを再導入していないことを確認してください。
• CSS の background-clip: text やグラデーションテキストのテクニックをフォールバックなしで使用すること: -webkit-background-clip: text; color: transparent によって作成されるグラデーション塗りのテキストは、文字の中で色が変化するため、複雑なコントラストの課題をもたらします。自動ツールは通常これを解決できず、文字の各部分の実際の輝度をページ背景に対して手動で検証する必要があります。

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

トルコの大統領通達第 2025/10 号は、2025 年 6 月 21 日付官報（Resmî Gazete）第 32933 号で公布され、デジタルアクセシビリティに関する拘束力のある国内枠組みを確立しました。この通達は、国際的に認められたウェブアクセシビリティ標準への準拠を義務付けており、実質的にトルコの規制要件を WCAG 2.2 と整合させています。また、適合するデジタル製品およびサービスの公式認証マークとして、家族・社会サービス省（Aile ve Sosyal Hizmetler Bakanlığı）が発行するErişilebilirlik Logosu（アクセシビリティロゴ）を導入しています。

WCAG 1.4.3 — コントラスト（最低限）はレベル AA の達成基準であり、レベル AA 準拠はアクセシビリティロゴ取得のためのベースライン要件です。これは、ロゴ取得を目指すすべての組織が、自らのウェブサイトやアプリケーション上の可視で例外に該当しないすべてのテキストおよびテキストの画像について、この基準で定義される 4.5:1（通常のテキスト）および 3:1（大きなテキスト）のコントラスト閾値を満たさなければならないことを意味します。1.4.3 の不遵守は、自動テストで最も頻繁に検出される違反の 1 つであり、認証に対する直接的な障壁となります。

この通達は、民間および公共部門の幅広い主体に適用されます。対象となるのは、中央および地方レベルの公的機関・団体、銀行規制監督庁（BDDK）の規制対象である銀行および金融機関、公立・私立の病院および医療提供者、20 万人以上の加入者を持つ通信事業者、一定の売上または取引量の閾値を満たすe コマースプラットフォーム、旅行代理店、民間の交通事業者、および国民教育省（MEB）に認可された私立学校および教育機関などです。

これらの主体にとって、コントラストの遵守は単なるベストプラクティスの推奨事項ではなく、規制上の重みを持ちます。不遵守の組織は行政上の監視や評判上の悪影響のリスクを負う一方、遵守している組織は、トルコにいる約850 万人の障害者だけでなく、読みやすく高コントラストなデザインの恩恵を受ける高齢ユーザー、モバイルユーザー、一般の利用者に対して信頼のシグナルとして Erişilebilirlik Logosu を表示することができます。

トルコで事業を行う組織で、まだ WCAG 1.4.3 の監査を実施していない場合は、すべての対外的なデジタル接点 — ウェブ、モバイルウェブ、該当する場合はネイティブアプリケーション — に対する自動スキャンを優先し、その後、グラデーション背景、画像オーバーレイ、サードパーティ埋め込みコンポーネントの手動レビューを行うべきです。事前承認されたコントラスト検証済みのカラーペアを備えたデザイントークンシステムを構築することが、最もスケーラブルな長期的解決策です。これにより、新しい UI コンポーネントはデフォルトでアクセシブルな色の組み合わせを継承し、将来のリデザインでもコントラストの不備が意図せず導入されることを防げます。