1. Introduction
Bad contrast is the #1 accessibility issue on the Web, let's learn about how DevTools could help you understand, discover and fix these issues.
What you'll learn
- Understand the low-contrast problem
- How to discover low-contrast text
- How to fix low-contrast text
What you'll need
- A working computer and realiable wifi
- Chrome 87 and above.
What you'll do
You will fix low-contrast issues of a web page.
2. Start
Click the following link to open the page with low-contrast texts:
Next, on the page, open the Chrome DevTools.
3. Understand the low-contrast problem
Roughly 1 in 20 people suffer from a color vision deficiency (also known as the less accurate term "color blindness"). Such impairments make it harder to tell different colors apart, which can amplify contrast issues.
For example, as a developer with regular vision, you might see the text on the page visually look okay to you.
You might still be able to read low-contrast text in some cases, but people with vision impairments don't have that privilege.
DevTools can help you understand these visual impairments by letting you simulate color vision deficiencies on your web app.
Open the Command Menu. Start typing Rendering and select Show Rendering. in the Rendering tab, scroll down to the Emulate vision decifiencies option.
DevTools can emulate blurred vision and the following types of color vision deficiencies:
- Protanopia: the inability to perceive any red light.
- Deuteranopia: the inability to perceive any green light.
- Tritanopia: the inability to perceive any blue light.
- Achromatopsia: the inability to perceive any color except for shades of grey (extremely rare).
Try selecting different options and experience the page yourself. For example, try selecting Protanopia. The color contrast of the text is even worse now — it's almost unreadable.
4. How to discover low-contrast text
There are a few ways to discover low-contrast text.
Inspect mode tooltip
The Inspect Mode tooltip that appears on top of the web page shows the contrast ratio for text elements.
For example, click the Inspect icon in the top-left corner of DevTools to inspect the word "very". The contrast ratio of the text is shown in the tooltip. The exclamation icon next to the ratio indicates the contrast ratio is low.
.
Contrast ratio in the color picker
Alternatively, you can view the contrast ratio in the color picker.
Inspect the word "very". In the Styles pane, click on the color preview of the CSS property color. The contrast ratio is shown in the color picker. The red prohibit icon indicates the contrast ratio is low.
.
[Experimental] Detect page-wide low-contrast issues with the CSS Overview panel
It is tedious to go through each element on the page to check the contrast ratio. The CSS Overview panel can help you detect all the low-contrast texts of your page.
After capturing the CSS Overview, scroll down to the Colors section to view all the contrast issues. Click on one of the colors, for example, the yellow background with lime text, and DevTools will show a list of elements that have the issue. Click on an element in the list to open the element in Elements panel.
5. How to fix low-contrast text
DevTools provides color suggestions for low-contrast text.
Recommended contrast line
Inspect the word "very". In the Styles pane, click on the color preview of the CSS property color. Expand the Contrast ratio section.
DevTools provides AA and AAA color ratio rating:
- AA: color contrast met minimum recommendation
- AAA: color contrast met enhanced recommendation.
In our example, 2 line appears in the visual picker at the top of the color picker. From the top:
- 1st line: AA. Select any color below this line to meet the minimum recommendation.
- 2nd line: AAA. Select any color below this line to meet the enhanced recommendation.
Click and fix the color manually:
- 1 checkmark means that the element meets the minimum recommendation.
- 2 checkmarks means that it meets the enhanced recommendation.
.
Accessible color suggestions
DevTools also suggests accessible colors for both AA and AAA, making it easier for you to just click and fix it.
Click on the suggested color next to contrast ratio, and text color is fix!
.
Now you can try to fix all the low-contrast texts on the page, and re-capture the CSS Overview to see if all contrast issues are fixed.
6. Congratulations!
Congratulations! You've successfully completed this codelab!