Lighthouse スコア 64 の正体を調べたら、シミュレーションだった話
Chrome の Lighthouse でこのブログのパフォーマンスを測ったら 64/100 という微妙なスコアが出た。
「さすがにまずいかな」と思って調査してみたら、想定外の結論にたどり着いたのでメモ。
状況
Lighthouse の JSON レポートを取得して Claude Code に分析させた。
スコアはこんな感じ:
| カテゴリ | スコア |
|---|---|
| Performance | 64 |
| Accessibility | 94 |
| Best Practices | 100 |
| SEO | 100 |
Performance と Accessibility に問題あり。
Accessibility の問題: コントラスト比
こっちはシンプルだった。
シンタックスハイライトの CSS（monokai テーマ）で、JSON のキー名や XML タグに使われるピンク赤（#f92672）が、背景色（#272822）に対してコントラスト比 3.92:1 しかなかった。WCAG AA 基準は 4.5:1 以上なので落第。
Lighthouse のレポートで指摘されていた要素:
selector: code.language-json > span.line > span.cl > span.nt
explanation: contrast ratio of 3.92 (foreground: #f92672, background: #272822)
該当するトークンを全部拾うと .nt（NameTag）、.kn（KeywordNamespace）、.o（Operator）、.ow（OperatorWord）、.gd（GenericDeleted）の 5 種類。
#f92672 を #ff5c8d に変更した。コントラスト比は 5.1:1 になって AA 準拠。monokai のピンク赤の雰囲気はそのまま、明度を少し上げただけなので見た目の変化はほぼわからない。