> 
Wiki
 / 
Background and foreground colors do not have a sufficient contrast ratio

Accessibility Errors in Google Lighthouse

Reset filters
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
<dl>s do not contain only properly ordered <dt> and <dd> groups, <script>, or <template> elements
<frame> or <iframe> elements do not have a title
<html> element does not have a [lang] attribute
<html> element does not have a valid value for its [lang] attribute
<input type="image"> elements do not have [alt] text
<object> elements do not have [alt] text
<th> elements and elements with [role="columnheader"/"rowheader"] do not have data cells they describe
<video> elements do not contain a <track> element with [kind="captions"]
ARIA IDs are not all unique
Background and foreground colors do not have a sufficient contrast ratio
Buttons do not have an accessible name
Cells in a <table> element that use the [headers] attribute refer to an element id not found within the same table
Custom controls have ARIA roles
Custom controls have associated labels
Definition list items are not wrapped in <dl> elements
Document doesn't have a <title> element
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children
Form elements do not have associated labels
Form fields have multiple labels
HTML5 landmark elements are used to improve navigation
Heading elements are not in a sequentially-descending order
Image elements do not have [alt] attributes
Interactive controls are keyboard focusable
Interactive elements indicate their purpose and state
Links do not have a discernible name
List items (<li>) are not contained within <ul> or <ol> parent elements
Lists do not contain only <li> elements and script supporting elements (<script> and <template>)
Not all ARIA input fields have accessible names
Not all ARIA toggle fields have accessible names
Offscreen content is hidden from assistive technology
Presentational <table> elements do not avoid using <th>, <caption>, or the [summary] attribute
Some elements have a [tabindex] value greater than 0
The document uses <meta http-equiv="refresh">
The page does not contain a heading, skip link, or landmark region
The page has a logical tab order
The user's focus is directed to new content added to the page
User focus is not accidentally trapped in a region
Visual order on the page follows DOM order
[accesskey] values are not unique
[aria-*] attributes are not valid or misspelled
[aria-*] attributes do not have valid values
[aria-*] attributes do not match their roles
[aria-hidden="true"] elements contain focusable descendants
[aria-hidden="true"] is present on the document <body>
[id] attributes on active, focusable elements are not unique
[lang] attributes do not have a valid value
[role] values are not valid
[role]s are not contained by their required parent element
[role]s do not have all required [aria-*] attributes
[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is greater than 5

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.