自分の発信を1か所に集めるハブサイト「Hubpin」を、個人で作りました。
制作の経緯は「Hubpin 開発記録」に時系列でまとめています。
Claude Code を取り入れながら、設計から実装まで一人で進めています。
公開した Hubpin を Lighthouse で測ると、アクセシビリティは 100 でした。
ところが同じサイトに、本文の基準に届かない文字色が残っていました。
なぜ 100 だったのかを1ヶ月ほど確かめずにいて、保存してあった結果を開き直したら、測った画面はダークでした。
公開したアプリは、Lighthouse で全カテゴリ 100 でした
8月17日、公開ページの表示速度を直す工程の仕上げに、AI に Lighthouse で測ってもらいました。
モバイルとデスクトップの2条件で、直す前と直した後の4回です。
4回とも、アクセシビリティは 100 でした。
文字と背景のコントラストを見る項目も合格で、指摘は1件もありませんでした。
結果は JSON とスクリーンショットで残しています。
同じサイトに、3.54:1 の文字色が残っていました
実はその9日前、8月8日の時点で、引っかかる色が1つ見つかっていました。
補足の文字に使っていた灰色（#888888）です。
AI に測ってもらうと、白い背景に対して 3.54:1 でした。
本文の文字に求められる基準（WCAG の AA）は 4.5:1 なので、届いていません。
全画面で使っている色なので、その場では値を変えずに、後の工程に回していました。
つまり Lighthouse が 100 を出したとき、この色はまだサイトに残っていたことになります。
8月20日にこの色を直す Issue を立てたときも、8月17日の 100 の理由は未確認、と書き添えてありました。
100 だから問題ない、とは言えない。
分かっていたのはそこまでで、理由は調べないまま、1ヶ月ほど置いていました。
保存していた結果を開いたら、画面はダークでした
9月16日、この件を記事にしようとしたところで、置いていた「なぜ」に戻りました。
推測で書くと間違えそうだったので、8月17日に保存した結果を AI に開いてもらいました。
Lighthouse の結果には、測り終えたときの画面が画像で入っています。
直す前の2本（モバイルとデスクトップ）からその画像を取り出してもらうと、どちらも暗い背景に明るい文字でした。
カードも文字も描画されていて、読み込み途中の真っ黒な画面ではありません。
Hubpin はライトとダークの両方の配色を持っています。
ダークのときは、同じ補足の文字に別の色（#8b949e）が当たっていて、背景に対して 6.15:1 あります。
基準を満たしているので、この画面を測る限り、指摘が出ないのは自然なことでした。
100 は、ダークの画面を測った結果だったわけです。
ライトの画面で 3.54:1 だった色は、その測定の範囲に入っていませんでした。
直した後の2本の画面は開いていないので、4本ともダークだったかまでは確かめていません。
なぜダークで描画されたのかも、まだ分かっていません。
後で測り直したときも、テーマは指定できていませんでした
振り返ると、もう1回同じ形の測定をしていました。
9月8日の工程18では、PageSpeed Insights で測っています。
ただ、PageSpeed Insights ではライトかダークかを指定できません。
このときの値も、どちらの画面のものかが分からない記録になっています。
Lighthouse の数字が間違っていたわけではありません。
見せられた画面に対しては、正しく測っていました。
足りなかったのは、自分がどちらの画面を測ったのかを残しておくことのほうでした。
色は、暗くするだけでなく役割で分けて直しました
色そのものは、8月21日の工程で直しています。
この工程は、どう直すかを自分が決め、色の値を当てる作業は AI に任せる分担にしていました。
AI に灰色の使われ方を数えてもらうと、18箇所のうち16箇所が文字でした。
そこで、文字の色は #6e6e6e に暗くすることにしました。白地で 5.10:1 です。
一方で #888888 は捨てずに、カードの枠など線の色として残すことにしました。
枠のような文字でない部品は 3:1 が目安なので、線の色としてはちょうどよかったからです。
途中で「ライトの配色全体を一段濃くする」案も考えましたが、これは締めないことにしました。
測ってもらうと、足りないのはこの灰色と枠線の2色だけで、本文やボタンの色は十分に出ていたからです。
背景まで暗くすると、今度はフォーカスの枠が 2.99:1 になり、基準を割ってしまいます。
文字用に暗くした色を枠にも使う案も出ましたが、実際の画面で見るとダークで枠が明るく浮いて見えました。
数字だけなら基準を満たしていたものの、使わないことにしました。
スコアと一緒に、どちらの画面を測ったかを残す
今回いちばん大きかったのは、100 という数字を「サイト全体が大丈夫」と同じ意味で受け取りかけていたことです。
100 は、そのとき測った1つの画面の結果でした。
ライトとダークを持つサイトでは、スコアだけ残すと、後からどちらの画面の話か分からなくなります。
実際、8月と9月で、どちらの画面か分からない記録が2組たまっていました。
次に測るときは、スコアと一緒に「ライトかダークか」と、測り終えた画面の画像を残しておこうと思っています。
画面の画像は、今回いちばん役に立ちました。
