もずはっく日記(2008年12月)

Bug-org 451204 Highlighted text is white on white text on a yellow background, difficult to read
初回投稿日時: 2008年12月04日05時21分01秒
カテゴリ: Firefox Mozilla Core バグ修正
SNS: Tweet (list)

既に半月ほど前に修正されたバグですが、この辺の元々の設計を行ったので解説しておきます。

バグの元々の内容は検索文字列のハイライト時のテキストがシステムの選択時の文字色をそのまま使っていたため、Windowsのように白い文字が使われている場合には黄色背景だと読めない、というものでした。これを一旦黒い文字を利用するようにしていたのですが、通常の背景が白のページで、WindowsやLinuxでは背景色が黒で文字色が黄色になってしまうということでreopenされていました。

背景色と前景色が入れ替えられていた理由は、その要素の背景色と選択文字の背景色に十分なコントラストが確保されていない場合に選択文字の前景色を背景色に利用する方がよりコントラストが確保できるので、入れ替えて見やすくする、という機能が働いていたためです。Macはこの機能の実装当時に、関係者からの反対でこの機能自体が無効になっているため、Macを利用している開発者には問題無く動くように見えていた、という不幸な理由もこのバグの発生に一役買っています。

詳しい「十分なコントラスト」の定義は複雑なので今回は解説しません(たぶん、過去のエントリで説明していると思うので、興味のある方は検索してみてください)が、もう既にお分かりのように、このバグを修正する一番簡単な方法はハイライト時に利用する色を白と十分なコントラストがある色に変える、ということです。

白と十分なコントラストを確保するには黄色系の色では、黒を混ぜた、かなり濁った色にしないといけませんが、これはあまりにも汚いので、蛍光ピンクのマーカーっぽい色に変更されています。また、これと十分なコントラストを保った文字色として再び白が文字色として選ばれています。

この修正の結果、以下のように表示されるようになりました("ハイライト"部分がそうです)。

この段落のテキストはハイライトの例です。