「リンクは色に依存せずに識別可能です」についてPageSpeed Insightsの改善指摘を完全攻略

8 min 6 views

こんなメッセージがPageSpeed Insightsで表示されて、頭を悩ませている方も多いのではないでしょうか。

実は、この改善指摘は単なる表示速度の問題ではありません。Webアクセシビリティの観点から、すべてのユーザーがリンクを正しく認識できるかどうかという重要な課題なのです。

私たちlandinghub（https://www.landinghub.net/）では、多くのWebサイトの表示速度改善を手がけてきましたが、この「リンクは色に依存せずに識別可能です。」という指摘は、近年特に多くなってきている改善項目の一つです。

今回は、この改善指摘について詳しく解説し、具体的な解決方法まで網羅的にご紹介します。

目次

PageSpeed Insightsでの「リンクは色に依存せずに識別可能です。」とは何か

改善指摘の背景と意味

PageSpeed Insightsで「リンクは色に依存せずに識別可能です。」と表示される場合、これは低コントラストのテキストリンクや、色だけで識別可能なリンクが問題となっています。

この指摘は、WCAG（Web Content Accessibility Guidelines）2.1の達成基準1.4.1「色の使用」に関連しており、色覚多様性のあるユーザーや視覚障害のあるユーザーでも、リンクを正しく認識できるようにすることを目的としています。

具体的な問題点

以下のような状況で、この改善指摘が表示されます：

  1. テキストリンクが色だけで通常のテキストと区別されている
  2. 背景色とリンクテキストのコントラスト比が不十分
  3. リンクの下線が削除されており、他の視覚的な区別要素がない
  4. 文字サイズが小さく、コントラスト比の要件を満たしていない

WCAG 2.1とアクセシビリティ基準の詳細解説

達成基準1.4.1「色の使用」

WCAG 2.1の達成基準1.4.1では、**「色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段」**として使用してはならないと定められています。

つまり、リンクを識別するために色だけに頼ってはダメなんです。

F73失敗例：色覚なしで視覚的にはっきりと区別できない

WCAG技術文書のF73では、色の違いを認識できない人々がリンクを識別できない状況を避けることが求められています。

NGな例：

  • 通常のテキストが黒色、リンクが青色だけで区別されている
  • 下線が削除されており、色だけでリンクを判別している

OKな例：

  • リンクに下線が付いている
  • リンクが太字になっている
  • 十分なコントラスト比が確保されている

合格条件の詳細解説

1. コントラスト比の要件

リンクテキストと背景色のコントラスト比は、以下の基準を満たす必要があります：

WCAG 2.1 AA準拠（PageSpeed Insightsの合格基準）

  • 通常のテキスト：4.5:1以上
  • 大きなテキスト（18pt以上または14pt以上の太字）：3.1以上

WCAG 2.1 AAA準拠（より高いアクセシビリティ基準）

  • 通常のテキスト：7:1以上
  • 大きなテキスト：4.5:1以上

2. 文字サイズの要件

文字サイズとコントラスト比は密接に関連しています：

  • 18ポイント（18pt）以上の大きなテキスト：コントラスト比3:1以上で合格
  • 14ポイント（14pt）以上の太字テキスト：コントラスト比3:1以上で合格
  • それ以外のテキスト：コントラスト比4.5:1以上が必要

3. 視覚的な区別要素

色以外の視覚的な区別要素として、以下が有効です：

  • アンダーライン（下線）
  • 太字（font-weight: bold）
  • イタリック体
  • 文字の装飾（text-decoration）
  • 明度の差（3:1以上）

具体的な改善方法

方法1：アンダーライン（下線）の追加

最も確実で推奨される方法は、リンクテキストにアンダーラインを追加することです。

Copy/* すべてのリンクにアンダーラインを追加 */
a {
    text-decoration: underline;
}

/* より美しい下線の実装 */
a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: #0066cc;
}

方法2：太字の適用

下線を付けたくない場合は、リンクテキストを太字にすることで改善できます。

Copy/* リンクテキストを太字にする */
a {
    font-weight: bold;
    text-decoration: none;
}

方法3：コントラスト比の改善

コントラスト比を改善することで、視認性を向上させます。

Copy/* 背景色が白の場合のリンク色例 */
a {
    color: #0066cc; /* コントラスト比4.5:1以上 */
}

/* 背景色が濃い場合のリンク色例 */
.dark-background a {
    color: #66ccff; /* 背景色に対してコントラスト比4.5:1以上 */
}

方法4：複合的なアプローチ

最も効果的なのは、複数の視覚的区別要素を組み合わせることです。

Copy/* 理想的なリンクスタイル */
a {
    color: #0066cc;
    text-decoration: underline;
    font-weight: 500;
    text-underline-offset: 2px;
}

/* ホバー時の状態 */
a:hover {
    color: #0052a3;
    text-decoration-thickness: 2px;
}

/* フォーカス時の状態（キーボードナビゲーション） */
a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

WordPressでの実装方法

テーマのカスタマイズ

SWELLテーマの場合：

  1. 管理画面で「外観」→「カスタマイズ」
  2. 「投稿・固定ページ」→「コンテンツのデザイン」
  3. 「テキストリンクにアンダーラインを付ける」にチェック

その他のテーマの場合：

Copy/* テーマのCSS追加エリアまたはstyle.cssに追加 */
.entry-content a,
.post-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

プラグインでの対応

カスタムCSSプラグインを使用する場合：

  1. 「Simple Custom CSS」などのプラグインをインストール
  2. 上記のCSSコードを追加
  3. 変更を保存

コントラスト比の測定方法

Chrome DevToolsでの測定

  1. 検証ツールの起動
    • ページ上で右クリック→「検証」
    • またはF12キーを押す
  2. 要素の選択
    • 左上の要素選択アイコンをクリック
    • 測定したいリンクテキストをクリック
  3. コントラスト比の確認
    • ElementsタブでColorの項目を確認
    • 「Contrast」の値を確認

オンラインツールでの測定

WebAIM Contrast Checker（https://webaim.org/resources/contrastchecker/）

  • 前景色と背景色のカラーコードを入力
  • 自動的にコントラスト比を計算
  • WCAG基準の合格/不合格も表示

Colour Contrast Analyser

  • デスクトップアプリケーション
  • リアルタイムでのコントラスト比測定が可能

よくある失敗パターンと解決法

失敗パターン1：下線を削除してしまう

Copy/* ❌ NG例：下線を削除するだけ */
a {
    text-decoration: none;
    color: #0066cc;
}

解決法：

Copy/* ✅ OK例：下線を削除する場合は太字にする */
a {
    text-decoration: none;
    color: #0066cc;
    font-weight: bold;
}

失敗パターン2：コントラスト比が不十分

Copy/* ❌ NG例：薄い色でコントラスト比が低い */
a {
    color: #cccccc; /* 白背景では見えにくい */
}

解決法：

Copy/* ✅ OK例：十分なコントラスト比を確保 */
a {
    color: #0066cc; /* 4.5:1以上のコントラスト比 */
}

失敗パターン3：背景色を考慮しない

Copy/* ❌ NG例：背景色によってコントラスト比が変わる */
.highlight-box {
    background-color: #f0f0f0;
}
.highlight-box a {
    color: #0066cc; /* 背景色が変わるとコントラスト比も変わる */
}

解決法：

Copy/* ✅ OK例：背景色に応じてリンク色を調整 */
.highlight-box {
    background-color: #f0f0f0;
}
.highlight-box a {
    color: #0052a3; /* 背景色に合わせて濃い色に調整 */
}

異なるデバイスでの対応

モバイル端末での注意点

モバイル端末では、文字サイズが小さく表示される場合があります。

Copy/* モバイル対応のリンクスタイル */
@media (max-width: 768px) {
    a {
        font-size: 16px; /* 最小16px以上を推奨 */
        text-decoration: underline;
        text-underline-offset: 2px;
        padding: 4px 0; /* タップしやすさも考慮 */
    }
}

タブレット端末での考慮事項

Copy/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
    a {
        font-size: 18px;
        text-decoration: underline;
        font-weight: 500;
    }
}

SEOへの影響とメリット

検索エンジンからの評価向上

Googleは、Webアクセシビリティを重視しており、アクセシブルなサイトは検索結果で優遇される傾向があります。

SEOへの具体的なメリット：

  1. Core Web Vitalsの改善
  2. ユーザーエクスペリエンスの向上
  3. 滞在時間の増加
  4. 離脱率の改善

UXの改善効果

適切なリンクの識別により、以下のUX改善が期待できます：

  • 視覚障害のあるユーザーの利用しやすさ向上
  • 色覚多様性のあるユーザーへの配慮
  • キーボードナビゲーションの改善
  • スクリーンリーダーでの読み上げ精度向上

表示速度への影響

CSS最適化のポイント

リンクスタイルの改善は、適切に実装すれば表示速度に悪影響を与えません。

Copy/* 軽量なリンクスタイル */
a {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.125em;
}

不要なスタイルの削除

Copy/* ❌ 重いスタイル例 */
a {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 2s infinite;
}

/* ✅ 軽量なスタイル例 */
a {
    color: #0066cc;
    text-decoration: underline;
}

高度な実装テクニック

CSS変数を使用した一元管理

Copy:root {
    --link-color: #0066cc;
    --link-hover-color: #0052a3;
    --link-visited-color: #551a8b;
}

a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--link-hover-color);
}

a:visited {
    color: var(--link-visited-color);
}

アニメーション効果の追加

Copya {
    color: #0066cc;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.3s ease;
}

a:hover {
    text-decoration-color: #0066cc;
}

検証とテスト方法

自動化ツールでの検証

axe DevTools（Chrome拡張機能）

  1. 拡張機能をインストール
  2. 検証したいページでツールを実行
  3. アクセシビリティの問題を自動検出

Lighthouse（Chrome内蔵）

  1. DevToolsの「Lighthouse」タブを開く
  2. 「Accessibility」にチェック
  3. 「Generate report」をクリック

手動テストの方法

コントラスト比の確認

  1. 様々な背景色でテストする
  2. 異なる文字サイズで確認する
  3. モバイル端末での表示を確認する

色覚シミュレーション

  • Chrome DevToolsの「Rendering」タブ
  • 「Vision deficiencies」で色覚の違いをシミュレート

ユーザビリティテストの実施

実際のユーザーでのテスト

テスト対象者：

  • 色覚多様性のあるユーザー
  • 視覚障害のあるユーザー
  • 高齢者
  • 一般的なユーザー

テスト項目：

  1. リンクの識別しやすさ
  2. クリックのしやすさ
  3. 読みやすさ
  4. 理解しやすさ

今後のアップデート対応

WCAG 2.2への対応

WCAG 2.2では、新しい達成基準が追加されています：

2.4.11 Focus Not Obscured (Minimum)

  • フォーカスされた要素が他の要素に隠れないようにする

2.4.12 Focus Not Obscured (Enhanced)

  • フォーカスされた要素が完全に見えるようにする

実装例

Copy/* WCAG 2.2対応のフォーカススタイル */
a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    z-index: 1;
    position: relative;
}

/* フォーカスが隠れないようにする */
a:focus {
    scroll-margin-top: 20px;
}

まとめ

「リンクは色に依存せずに識別可能です。」という改善指摘は、単なる技術的な問題ではなく、すべてのユーザーがWebサイトを快適に利用できるようにする重要な取り組みです。

改善のポイント：

  1. アンダーラインの追加または太字の適用
  2. コントラスト比4.5:1以上の確保
  3. 文字サイズの適切な設定
  4. 複数の視覚的区別要素の組み合わせ

これらの改善により、PageSpeed Insightsでの評価が向上するだけでなく、SEO効果やユーザーエクスペリエンスの大幅な向上が期待できます。

landinghub（https://www.landinghub.net/）では、こうした表示速度改善とアクセシビリティ向上を総合的にサポートしています。専門的な診断と改善提案により、あなたのWebサイトのパフォーマンスを最大化させていただきます。

初心者の方でも実装しやすい方法から、高度なテクニックまで幅広くご紹介しましたが、まずは基本的なアンダーラインの追加から始めてみてください。小さな改善の積み重ねが、大きな成果につながります。

継続的な改善と検証を通じて、すべてのユーザーにとって使いやすいWebサイトを目指していきましょう。

<PREV
「aria id が一意ではありません」エラーの原因と対処法 – PageSpeed Insights改善ガイド
NEXT>
「一部の要素にラベル要素が関連付けられています」エラーの原因と対処法｜PageSpeed Insights改善ガイド
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です