LoginSignup
0
0

More than 1 year has passed since last update.

【Lighthouse】Background and foreground colors do not have a sufficient contrast ratio.が出た時の解決策

Posted at

事象

Lighthouse AccessibilityでBackground and foreground colors do not have a sufficient contrast ratio.が出た時の対処法

img.png

解決策

背景色と前景色のコントラスト比が十分でない(直訳)と怒られてますので、適切なcolorに変えます。

手順

1.chormeのdeveloperツールを開き、該当タグのcolorの四角(赤枠)をクリックします。
スクリーンショット 2022-01-15 23.29.39.png

2.赤枠の右矢印をクリックします。
スクリーンショット 2022-01-15 22.56.40.png

3.適切なcolor(コントラスト比4.5以上)を選択します。
スクリーンショット 2022-01-15 23.00.31.png

以上で修正終了です。

コントラスト比に注意しよう

コントラスト比を意識してデザインしてもらってます。
ですが、予想以上に注意しないといけない点でした。今後もより良いプロダクトを目指してチームで話し合っていきます。

参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0