How to make your website more readable


A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment or social networking.

Get a professional website for your brand.

Low-contrast texts make your website less readable for all users, even more so for users with vision deficiencies. DevTools can automatically find low-contrast issues and suggest better colours to help you fix them.

Use DevTools to:

  • Discover contrast issues. Use the CSS Overview panel, (preview) Issues tab, or a Lighthouse report to get a list of all issues.
  • Fix contrast issues. View the issues with a tooltip in inspector mode and select colors that the Color Picker suggests to fix the contrast ratio.
  • Emulate vision deficiencies. Look at your site the way your users see it.

To discover low contrast text:

  1. Open DevTools on your page. In this tutorial, you can use this demo page.
  2. Get a list of all contrast issues using one of the three panels:

To get an overview:

  1. Open CSS Overview.
  2. Capture an overview.
  3. Open the Colors section, scroll to Contrast issues, and click an issue, if any.
  4. In the Contrast issues table, hover over an element and click the link next to it.
  1. List of contrast issues in CSS Overview.
  2. Fix the issue as described in the Fix low contrast text section.

(Preview) Contrast issues in the Issues tab

Note: This is a preview feature disabled by default.

To get a list of issues:

  1. Enable contrast issues reporting in the Issues tab:
    1. Open Settings > Experimental.
    2. In the filter bar, search for contrast issue.
    3. Check Enable automatic contrast issue reporting via the Issues panelEnable contrast issue reporting.
    4. Click Reload DevTools in the prompt at the top.
  2. Open the Issues tab.
  3. Expand the contrast issues DevTools found, then expand the elements table, and click a link next to the element.Table of elements with contrast issues in the Issues tab.
  4. Fix the issue as described in the Fix low contrast text section.

Contrast issues in a Lighthouse report

To run a report:

  1. In DevTools, open More tabs. More tabs > Lighthouse.
  2. Generate a Lighthouse report with the following settings:
    • Mode: Navigation (default)
    • Categories: Accessibility
    • Device: Desktop Lighthouse report with Navigation, Accessibility, and Desktop settings.
  3. Click Analyze page load and wait for Lighthouse to generate the report.
  4. Scroll down to the Contrast section and, in the elements list, click a link to an effected element. The Contrast section of the Lighthouse report with a list of elements that have contrast issues.
  5. Fix the issue as described in the Fix low contrast text section.

Fix low contrast text

To fix a low contrast issue:

  1. Find a contrast issue and click a link to an affected element either on the CSS Overview panelIssues tab, or Lighthouse report. DevTools takes you to the Elements panel and selects the corresponding element. An element with a contrast issue selected in the Elements panel. For example, on this demo page, the first affected element is h1.line1.
  2. Click Inspect. Inspect at the top-right corner of DevTools and hover over the element in the viewport. DevTools shows a tooltip for this element.The tooltip shows a warning sign next to the contrast value.Notice the Warning. warning sign next to the contrast ratio value in the tooltip. The contrast ratio measures the difference in brightness between the foreground (text color) and background colors.
  3. Open the Color Picker next to the color declaration of the element’s text and, in the Color Picker, expand the Contrast ratio section.The Contrast ratio section of the Color Picker.The Color Picker tells you the contrast ratio doesn’t meet the AA or AAA levels of WebAIM guidelines.
  4. Click the Use suggested color. Use suggested color button next to the AAA level. The Color Picker applies the text color that complies to the contrast ratio guidelines.The applied color complies with the guidelines.
  5. Alternatively, to pick a color manually, you can drag the circle in the shades preview. To stay within the AA or AAA level, pick a color below the top or bottom line respectively.Picking a color shade below the bottom line to stay in AAA level.
  6. Similarly, fix all the contrast issues you found with the CSS Overview panelIssues tab, or Lighthouse report.

Save the changes

To save the changes you made in DevTools:

Sides Network Inc.
Sofia Emelianova, Technical Writer, Google

About Sides Network Inc.

Sides Network Incorporated is a multimedia, web development, publishing/blogging and advertising firm who's motive is to build brands through networks and online. We created this platform precisely to publish educative and inspiring stories to our lovely readers. Our job center alerts job seekers on vacancies across the globe. Submit your articles via Adverts and enquiries; +233 552 32 0487 / +233 269 95 9981

Leave a reply

error: Content is protected !!