Lighthouse 1 / 1

Color Contrast is Satisfactory に引っかかるを色（コントラスト）を変えずに回避する

関連

このサイト(2019-01)時点でも結構引っかかりました。

Color Contrast is Satisfactory に引っかかるテキスト

このサイトでこれに引っかかるケースは以下のようなものがありました。

非アクティブなのを表すために色を薄くしたテキスト (目次)
highlight.jsなどで勝手に色が付けれれたテキスト (コンテンツ）
テーマカラーに変えたテキスト（全体）

この「learn more」先のページには次のようなことが書かれています。

This rule will not report on text elements that have a background-image, are obscured by other elements or are images of text.

よって、以下のような要素にすることによって対象外にすることでこの問題を回避できます。

background-image が指定されている要素のテキスト
目視できない部分にある要素のテキスト
画像の中のテキスト

Color Contrast is Satisfactory を回避できるCSS

Lighthouse の調査では丁寧にも引っかかってしまった要素を羅列してくれています。なのでその中から、どうしても色を変更せずにいたい要素に対して以下のCSSを適用しましょう。

  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
  background-repeat: no-repeat;
  background-position: -1px -1px;

上記のCSSは以下のようなことをしています。

1ドットの画像を設置
そのままだと要素いっぱい表示されてしまうのでリピートしないように
-1px -1pxの位置、つまり要素外に配置することで表示されないように

そして再度 Lighthouse をしたところ、無事回避に成功してスコアが上がっていました。

CLI

関連

個人的には他の拡張などが入っていないきれいな状態で検証ができるので Chrome 拡張よりもオススメです。

インストール

以下のどちらかでインストールができます。

npm install --global lighthouse
yarn global add lighthouse

使う

引数に URL を渡して実行するだけです。実行すると Chromium が立ち上がり検証が始まります。この時--viewオプションを付けると、検証終了後に自動で結果ページを開いてくれます。

lighthouse https://nju33.com

Basic 認証があるサイトで使う

Basic 認証があるサイトでは認証に通らねばなりません。--extra-headersオプションからヘッダーにAuthorizationを追加できるので、

lighthouse \
  --extra-headers '{"Authorization": "Basic "}' \

とすれば見ることができます。ちなみに<base64な認証情報>は以下で作ると楽です。

bash -c 'base64 <(echo -n ':')'