本文中のリンクが色だけで区別されている場合は、下線などの目印を加えます。
リンクと背景のコントラストと、リンクと周囲の文字の識別は別の確認項目です。
色の比率を混同しない
通常の文字と背景は4.5:1以上が目安で、大きな文字には3:1以上の基準があります。
W3CのG183で示すリンクと周囲の文字の3:1は、背景とのコントラストを満たすこととは別です。
下線があれば色以外でもリンクを識別できますが、背景とのコントラスト不足は別途修正します。
SWELLの本文リンク設定を使う
カスタマイザーの投稿・固定ページ→コンテンツのデザインで、テキストリンクにアンダーラインを付ける設定を確認します。
テーマのバージョンで名称が異なる場合は、本文リンクの装飾設定を探します。
特定範囲へCSSを適用する例
対象のグループブロックの高度な設定に、追加CSSクラスwaza-link-exampleを指定します。
次のCSSを追加CSSまたは子テーマのスタイルへ保存します。
.waza-link-example a {
text-decoration: underline;
text-underline-offset: .15em;
}
.waza-link-example a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}専用クラスを付けたグループ内のリンクに適用します。ナビゲーションや画像リンクを含めないグループで使ってください。
動く見本
これは確認項目へ移動するリンクです。
確認と戻し方
PCとスマホで通常時の下線を確認し、Tabキーでリンクへ移動したときにフォーカス枠が見えるか確かめます。
Enterでリンク先へ移動できることを確認し、PageSpeed Insightsの該当指摘も再測定します。
元に戻す場合は追加CSSと対象のクラスを外し、テーマ設定を変更前の値へ戻します。
この見本の表示と操作を確認し、サイト全体のWCAG適合やPageSpeed指摘の解消は別途評価としています。
参照：W3C G183。
キーボードで見本を確かめる手順
見本の前のコード欄からTabで「確認項目へ移動するリンク」へ進むと、下線に加えて2pxの枠が付きます。Enterを押すと「確認と戻し方」の見出しへ移動します。Shift+Tabでは前の操作対象へ戻れます。マウスでクリックした表示だけで、キーボード時の枠を判断しないでください。
リンクの文字と背景の比率を測る場合は、コントラストの確認方法を参照してください。下線の有無と文字の読みやすさを分けて確認できます。
よくある質問：PageSpeed Insightsの「リンクは色に依存して識別可能です」を解決する方法
「リンクは色に依存して識別可能です」と指摘されたら、どうしますか？
記事では、本文中のリンクが色だけで区別されている場合は、下線などの目印を加えます。
リンクの色のコントラストと、周囲の文字との識別は、同じですか？
記事では、リンクと背景のコントラストと、リンクと周囲の文字の識別は別の確認項目です。通常の文字と背景は4.5:1以上が目安で、大きな文字には3:1以上の基準があります。W3CのG183で示すリンクと周囲の文字の3:1は、背景とのコントラストを満たすこととは別です。下線があれば色以外でもリンクを識別できますが、背景とのコントラスト不足は別途修正します。
SWELLでは、どこで下線を設定しますか？
記事では、カスタマイザーの投稿・固定ページ→コンテンツのデザインで、テキストリンクにアンダーラインを付ける設定を確認します。テーマのバージョンで名称が異なる場合は、本文リンクの装飾設定を探します。
特定の範囲だけ、下線を付けるには？
記事では、対象のグループブロックの高度な設定に追加CSSクラスwaza-link-exampleを指定し、記事のCSSを追加CSSまたは子テーマのスタイルへ保存します。専用クラスを付けたグループ内のリンクに適用するため、ナビゲーションや画像リンクを含めないグループで使ってください。
設定したあとは、何を確認しますか？
記事では、PCとスマホで通常時の下線を確認し、Tabキーでリンクへ移動したときにフォーカス枠が見えるか確かめます。Enterでリンク先へ移動できることを確認し、PageSpeed Insightsの該当指摘も再測定します。マウスでクリックした表示だけで、キーボード時の枠を判断しないでください。
元に戻すには、どうしますか？
記事では、元に戻す場合は追加CSSと対象のクラスを外し、テーマ設定を変更前の値へ戻します。
この見本で、サイト全体の問題が解消されたといえますか？
記事では、この見本の表示と操作を確認し、サイト全体のWCAG適合やPageSpeed指摘の解消は別途評価としています（2026年10月2日撮影、390px幅でTab操作を確認）。リンクの文字と背景の比率を測る場合は、記事内で案内しているコントラストの確認方法を参照してください。基準や仕様は変わる可能性があるため、最新は公式で確認してください。
