Accessibility Errors in Google Lighthouse

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Background and foreground colors do not have a sufficient contrast ratio

Color Contrast Ratio

The contrast ratio between colours on the page helps people like me with poor vision, people with colour blindness and other visual impairments to see and read what's on the page. Having a good contrast between the background and text is also useful to people who are looking at the web in strong sunlight, or who are saving battery on their phone.

Webflow have a built in color contrast analyzer.

Webflow color contrast analyzer

This tool works out the color contrast based on the brightness of the color and the font size of the text. When you have chosen your colors, save them to the swatch so you can reuse them in your project. Just hit the + at the bottom of the color tool.

Building a color palette

There are loads of free tools to check the color contrast for your designs. A couple that I use are:

Accessible color palette builder lets you try out up to 6 colors, showing which ones have a contrast ratio of 4.5:1.

Contrast Grid takes this further, allowing for unlimited color choices.

Leonardo Color is for hard core color design professionals.

Once you have your color palette, save them into your Webflow style guide so they are always at hand.

Webflow tips

  • Use fewer colors, not more.
  • Check the contrast ratio against your background
  • Decorative elements do not need to conform to this guideline.
  • Links, buttons and headings must be easy to read.

Google Lighthouse says

Text that has a low contrast ratio—that is, text whose brightness is too close to the background brightness—can be hard to read. For example, presenting light gray text on a white background makes it difficult for users to distinguish the shapes of the characters, which can reduce reading comprehension and slow down reading speed.While this issue is particularly challenging for people with low vision, low-contrast text can negatively affect the reading experience for all your users. For example, if you've ever read something on your mobile device outside, you've probably experienced the need for text with sufficient contrast.