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.

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:
   • CSS Overview
   • (Preview) Issues
   • Lighthouse

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. 
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 panel. 
   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.
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 > Lighthouse.
2. Generate a Lighthouse report with the following settings:
   • Mode: Navigation (default)
   • Categories: Accessibility
   • Device: Desktop 
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. 
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 panel, Issues tab, or Lighthouse report. DevTools takes you to the Elements panel and selects the corresponding element.  For example, on this demo page, the first affected element is h1.line1.
2. Click  Inspect at the top-right corner of DevTools and hover over the element in the viewport. DevTools shows a tooltip for this element.Notice the  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 Color Picker tells you the contrast ratio doesn’t meet the AA or AAA levels of WebAIM guidelines.
4. Click the  Use suggested color button next to the AAA level. The Color Picker applies the text color that complies to the contrast ratio 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.
6. Similarly, fix all the contrast issues you found with the CSS Overview panel, Issues tab, or Lighthouse report.

Save the changes

To save the changes you made in DevTools:

• Copy all CSS changes at once and paste them to your code
• Consider setting up a Workspace that lets DevTools save files directly to your sources.

• About
• Latest Posts

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 Articles@sidesnetwork.com
Adverts and enquiries; +233 552 32 0487 / +233 269 95 9981

Latest posts by Sides Network Inc. (see all)

• 10 natural ways to last long in bed as a man - November 16, 2023
• Single Spine Salary Structure Base Pay for 2024 - November 14, 2023
• Ghana Armed Forces Voucher Sale Points and Purchase Information in 2023 - November 1, 2023