画面の文字色を自分で置いていると、薄いグレーが読みにくかったり、ツールにコントラストの警告が出たりします。そのときは、文字と背景のコントラスト比を測り、基準を下回っていれば色を変えます。この記事では、このブログの記事ページにある目次の文字で、この手順を試しました。
結果を先に書きます。目次の灰色は、背景との比が 4.31:1 で、次の節で決める基準の 4.5:1 を下回っていました。文字の色を濃くすると 6.75:1 になり、基準を超えました。
始める前に決めた基準
下回ったら直す基準は、通常の大きさの文字で 4.5:1 にしました。Web を見えにくさや使いにくさなく使えるようにするための指針に、WCAG 2 があります。WCAG には A、AA、AAA の3段階があり、4.5:1 は AA が通常の文字に求める比です。いちばん厳しい AAA では 7:1 です。大きい文字（おおむね 24px 以上、太字なら約 18.7px 以上）は、AA で 3:1 です。
目次の文字は、見出しの「目次」が 11px、各項目が 13px です。どちらも大きい文字には入らないので、4.5:1 で判断します。
測った場所と、測り方
測ったのは、記事の左に出る目次の枠です。薄いベージュの枠の中に、見出しの「目次」と、各見出しへのリンクが灰色で並んでいます。
文字色は、ブラウザの開発者ツールで目次のリンクを選び、計算済みのスタイルにある color で確かめました。背景色は、その文字の要素ではなく、外側の枠に付いていることが多いです。今回も、リンク自体の背景は透明で、色は目次の枠（.article__toc）の background にありました。文字の要素だけを見ると、背景を白だと取り違えやすくなります。読み取った2色は、枠の背景が #F3F2EF、文字が #6B7280 です。#6B7280 は、このテーマで日付や注記などの補足の文字に使っている灰色です。
比は、WebAIM の Contrast Checker という無料の測定ツールに、この2色を入れて測りました。文字色と背景色を入れると、比と、WCAG の各段階で合格（Pass）か不合格（Fail）かが、通常の文字（Normal Text）と大きい文字（Large Text）に分けて出ます。
出た比は 4.31:1 でした。通常の文字の欄は、AA も AAA も不合格です。大きい文字の欄は AA が合格ですが、目次は通常の文字なので、基準を下回っています。
同じ2色を WCAG の計算式で求めると 4.3184:1 です。WebAIM は小数第3位以下を切り捨てて 4.31 と表示します。四捨五入なら 4.32 です。どちらで見ても 4.5 には届きません。このあとの記事中の比も、WebAIM と同じく小数第3位以下を切り捨てて書きます。
同じ灰色でも、背景で結果が変わった
この灰色を、記事全体の背景 #FAFAF8 の上で計算すると 4.62:1 で、基準を超えます。目次の枠は、記事全体の背景よりわずかに濃い #F3F2EF を敷いているので、そこに乗せた同じ灰色だけが 4.5 を下回っていました。
灰色を選んだときに記事全体の背景の上で確かめていても、目次の枠のような別の背景に置くと、比は変わります。今回の目次は、記事全体の背景の上でしか測っていなければ、見落とす場所でした。
色を変えて、もう一度測った
直したのは目次の文字色だけです。灰色 #6B7280 そのものは、記事全体の背景の上で基準を超えているので変えていません。変えると、日付や注記などの補足の文字までまとめて濃くなるからです。
テーマの CSS に目次用の文字色を一つ加え、目次の見出しとリンクだけをその色にしました。色は #4B5563 です。4.5 ちょうどの色にすると、枠の背景がわずかに変わっただけでまた下回るので、余裕のある濃さにしました。
テーマを本番に反映したあと、記事ページを先頭から開き直し、目次の見出しと各リンクの色を開発者ツールで読み直しました。いま読んでいる見出しを示す緑の印が付いた項目はなく、見出しと各リンクはどれも #4B5563、背景は #F3F2EF のままです。この2色を、同じツールで測りました。
比は 6.75:1 で、通常の文字の AA は合格です。AAA の 7:1 には少し届きませんが、今回の基準は AA の 4.5:1 なので、ここで止めました。目次の見た目は灰色のままで、文字が少し締まった程度です。
暗い表示（ダークモード）の目次は、CSS の指定では暗い背景 #1C1C1A に明るい灰色 #9CA3AF です。この2色を計算すると 6.72:1 で、基準を超えているので、そのままにしています。ダークモードの実際の画面は、今回は読み取っていません。
まだ下回っているところ
目次でいま読んでいる見出しは、灰色ではなく、サイトの緑 #728B2A で示します。この緑も同じ枠の上では、計算で 3.44:1 です。通常の文字の基準を下回っていますが、サイト全体の強調色なので、今回は変えていません。次に直すなら、目次の現在地だけに濃い緑を使うところからです。
測ってみると、目次の灰色は、色そのものより、敷いた背景との組み合わせで基準を下回っていました。いまは、色を置いた背景ごとに、文字と背景の2色を測るようにしています。
※ 執筆支援に AI を使用しています。事実確認・コード検証・構成の最終判断は著者が行っています。