「PageSpeed Insights」で“リンクは色に依存して識別可能です。”という改善案が出た時の解決策です。
以前ある記事でテキストリンクを使った時に、初めてこの案内が出ました。
“色に依存”とあり、どうせコントラストの問題だろう...と思っていたのですが、合格条件が中々ややこしかったので当記事で対処法をまとめます。
確認すべきポイントは「コントラスト比・文字サイズ・装飾」の３点です。
この記事の目次
PSI：リンクは色に依存して識別可能です。の解決策
当サイトは「PageSpeed Insights」の点数にこだわっていますが、先日またまた見慣れない改善案が出たので解決策を共有します。
今回怒られたのはテキストリンクです。内容は以下の通り。
「PageSpeed Insights」で当サイトを検証した結果画面
リンクは色に依存して識別可能です。
低コントラストのテキストを使用すると、多くのユーザーは読むことが困難または不可能になります。識別可能なリンクテキストを使用すると、ロービジョンのユーザーの利便性が向上します。
実際に怒られた部分は以下のスクショのところです。
PSIで“リンクは色に依存して識別可能です”と指摘された部分
どうやらここ（↑）のテキストリンク部分が読みにくいらしいです。
う～ん、そこまで問題もなさそうだけど...
そして改善案が出たのはこの１ページだけでモバイルだけダメでした。（PCは合格）
では具体的にどうすれば合格できるのか！？早速参りましょう・ｗ・
「コントラスト比・文字サイズ・装飾」が重要
これ「PageSpeed Insights」の“リンクは色に依存して識別可能です。”という日本語が怪しい感じですが、この改善案が出た場合は以下の３点を確認しましょう。
- 背景色とテキストリンクのコントラスト比が4.5以上かどうか？
- 文字サイズは18ポイント以上、または14ポイント以上かつ太字かどうか？
- テキストリンクの下線をCSSなどで消していないかどうか？
分かり易いように、OKな例とNGな例を具体的に書くと以下のようになります。
NGになるテキストリンクの例
- コントラスト比に問題あり：ほげほげテキストリンクほげほげ
- フォントサイズに問題あり：ほげほげテキストリンクほげほげ
- リンクの装飾に問題あり：ほげほげテキストリンクほげほげ
OKなテキストリンクの例
- ほげほげテキストリンクほげほげ（18pt＋コントラスト比3:1以上）
- ほげほげテキストリンクほげほげ（14pt＋太字）
- ほげほげテキストリンクほげほげ（テキストリンクに下線あり）
これらの条件はW3C（↓）で決められている基準でもあります。
外部リンク
【参考：W3C公式サイト】
Web Content Accessibility Guidelines (WCAG) 2.1
うちの場合はコントラスト比は4.93でした。テキストサイズも問題ナシ。
しかし最後のテキストリンクの下線を消していたのが今回怒られた原因でした。
それではそれぞれの合格条件を詳しく見ていきましょう・ｗ・
確認１．テキストリンクの文字サイズ
まずはテキストリンク部分の文字サイズについてです。
これは問題ない方が多いと思いますが、大前提としてPageSpeed Insightsでは記事の文章にあたるテキスト群のフォントサイズが12px未満だと別の内容で怒られます。
そして今回のテキストリンクの部分に関しては以下の通りになっています。
WCAG2.1 AA準拠
18ポイント（18pt）以上の大きいテキスト、又は太字のテキスト（14pt以上）のテキストリンクについては、コントラスト比が少なくとも「3:1」以上である必要がある。
WCAG2.1 AAA準拠
18ポイント以上の大きいテキストならコントラスト比は「4.5:1」以上。
普通のテキストについてはコントラスト比が「7:1」以上である必要がある。
「PageSpeed Insights」に合格するだけならAA準拠レベルでOKです。
ぶっちゃけ殆どの人はココは大丈夫だと思うので最後に確認する感じでOKです。
携帯電話は×、デスクトップは○というのは文字サイズの関係か...
文字サイズについては単位がポイント（pt）だったり、文字サイズとコントラスト比の組み合わせでOKか否かが変わってくるので厄介。だからデスクトップでは改善案が出なかったのかな？
確認２．テキストリンクのコントラスト比
続いてテキストリンク部分のコントラスト比についてです。
コントラスト比というのは背景色と文字色の色の差で、見やすさを意味します。
先ほども書きましたが、コントラスト比は文字サイズにも関係しているので、サイトの背景色を考慮してテキストリンクの色を設定する必要があります。
具体的には以下のような感じで設定しましょう。
- 普通は「4.5:1」以上を目指せばOK
- 18pt以上の大きなテキストなら「3:1」以上でもOK
- さらにユーザビリティーを考えるならWCAG2.1 AAA準拠は「7:1」以上
とりあえずコントラスト比が「4.5」を超えるように設定し、PageSpeed Insightsで確認するというのが一番早くて確実かと思います。
ポイント
リンク色が同じでも背景色によってコントラスト比が変化する点に注意。
↑のような囲みdivを使うとコントラスト比が想定外に低下する可能性があるのでこの点は注意しましょう。
Chromeでコントラスト比を測る方法
ここでコントラスト比の測り方を補足しておきます。
背景色とテキストのコントラスト比は、各ブラウザで簡単に測定できます。この記事では例として、Chromeを使ってコントラスト比を測ってみます。
まずはページ上で右クリックし、出てきたメニューから「検証」を押します。
これでChromeのデベロッパーツール（開発者ツール）が起動します。
デベロッパーツールが起動したら、画面の左上にあるアイコンをクリック。
マウスオンした部分のコントラスト比が計測できる
あとはコントラスト比を測りたい部分（今回はテキストリンク）にマウスオン！
すると「Contrast」の項目に現在の背景色とテキスト色のコントラスト比が出ます。
参考
- コントラスト比は1～21の数字で、21が最大値。
（背景色とテキストが同色の場合は1、黒と白の場合は21になる感じ） - 4.5以上なら問題なし、さらに上を目指すなら7以上で設定する。
確認３．テキストリンク部分の下線
最後にテキストリンクの下線（text-decoration;）についてです。今回はこれが原因で“リンクは色に依存して識別可能です。”が出ていたようです。
当サイトでは文章内のテキストリンクには下線の装飾が出るのですが、文章にドットラインも併用したかったのでリンクの下線を消したのがマズかったみたいです。
リンクの下線があるのに、その下にこんな感じの点線も引くと見た目が悪いので...
元々付いていたテキストリンクの下線をCSSで削除したら怒られたという具合です。
<span style="text-decoration: none;">テキストリンク</span>
このようにしてテキストリンクの下線を消すと今回の改善案が出るのでご注意を！
テキストリンクの下線を消したい時は太字化で対処
テキストリンクの下線を消したい時はどうすれば？と思って色々試してみたところ、下線を消していてもテキストリンクを太字にしていれば怒られないようです。
テキストリンクを太字にするにはfont-weight:bold;を使います。
<span style="text-decoration: none; font-weight: bold;">テキストリンク</span>
こんな感じのコードにして、最終的にはこうなりました。
まぁ違和感はないですね。なんでそこ太字！？っていうのはこの内容を知っている人にしか理解できないと思いますが...ｗ
最後に念のためPageSpeed Insightsの方でも確認しておきます。
問題があったモバイル版で無事に解決できました！
テキストリンクは「青色」＋「下線」というのが当たり前ではあるけど、まさか下線を消しただけでPSIに引っかかるとは思いませんでした～
まとめ
以上、「PageSpeed Insights」で“リンクは色に依存して識別可能です。”が出る時の解決策でした。ポイントをおさらいすると以下の通りです。
ポイント
- テキストリンクはそこそこ大きな文字にしないとダメ。
- 背景色とテキストリンクのコントラスト比は「4.5:1」以上を心掛ける。
- テキストリンクの下線を消したい時は太字にして対処する。
今回この内容がまぁ調べても全然出てこなくて苦労しました・・・
特にPageSpeed Insightsにある参考リンク（リンクを識別可能にする方法の詳細）が微妙で、コントラスト比が「3:1」以上ならOK！という風に読み取れてしまいます。
とにかく「テキストリンク」が「リンク」であることをハッキリと分かり易くしないとダメな訳ですが、文字サイズや装飾も絡むのでややこしいです。
この記事が誰かの何かの役に立てば幸いです。ではではこのへんで・ｗ・
