「ここ、文字が見えないよ」と言われました。見に行くと、たしかに何も表示されていません。白い背景に、白い文字が乗っていました。しかもそれは、このサイトで一番読んでほしい金額でした。

なぜ自分で気づけなかったか

言い訳をすると、そこには「何かがある」と自分は知っています。知っている人が見ると、無いものが見えます。頭が勝手に補完するのだと思います。

もう1つは、その画面を作ったときには見えていたことです。あとから配色を全部入れ替えたときに、文字色の指定だけが取り残されて背景と同じ色になりました。壊れた瞬間に立ち会っていないので、気づく機会がありませんでした。

原因は単純でした。白い背景を持つ部品に、文字色を指定していなかったのです。ふつうは親から色を受け継ぐので問題になりません。ところがその部品を、白い文字を使う濃紺の面の中に置いた瞬間、白地に白文字になります。

目で見るのをやめて、測ることにした

1箇所直して終わりにすると、同じ穴が他にもある可能性が残ります。そこで、全13ページを順番に開いて、文字と背景の明るさの差を機械的に計算させました。

半透明の重なりがあると単純な比較では答えを間違えるので、重なりを合成したうえで比べる必要がありました。ここを雑にやると、見えている文字を「見えない」と誤判定します。最初に書いたやり方はまさにそれで、正常な箇所を何件も誤検出しました。

やり直した結果、指摘された箇所のほかに、まったく別のページの料金表が丸ごと同じ状態になっていました。表の中身が全部、白地に白文字です。誰にも指摘されていなかったので、そのまま気づかず公開していたはずです。

個別に直さず、部品側で直した

直し方を2つ考えました。見えなくなっている場所に色を足して回るか、部品そのものが自分の文字色を持つようにするか。

前者は早いのですが、次に同じ部品を濃い面に置いたらまた消えます。後者にしました。背景色を持つ部品は、文字色も自分で持つ。それだけの決まりですが、これで置き場所が変わっても消えなくなります。

最後にもう一度、全ページを測り直しました。見えない文字はゼロになりました。ついでに、基準ぎりぎりで薄かったフッターの連絡先も少し濃くしています。

この日おぼえたこと

自分が作ったものを、自分の目で検品するのには限界があります。見えるはずだと知っているものは、見えてしまいます。

だから、指摘されたら「その1箇所を直す」ではなく「同じ種類の問題が他にないか」を機械で洗うようにしています。今回はそれで、指摘されていない分をもう1つ見つけられました。

そして、指摘してくれる人はありがたいです。初めて見る目にしか見つけられないものがあります。もしこのサイトで読みにくい場所を見つけたら、教えていただけると助かります。