Discover and fix low contrast text with DevTools | DevTools Tips
Discover and fix low contrast text with DevTools | DevTools Tips
Learn how to discover and fix low contrast text with DevTools
Chapters:
0:00 - Intro
0:26 - Inspect mode tooltip
0:38 - Contrast ratio in the Color picker
1:04 - Fix low contrast text
1:33 - Identify page’s low contrast issues with the CSS Overview panel
1:51 - Identify light/dark theme contrast issues
2:07 - [Experimental] Automatically detect low contrast issues
2:37 - Emulate color vision deficiencies
Resource:
Discover and fix low-contrast text with Chrome DevTools → https://goo.gle/devtools-fix-contrast
Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools
Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#DevToolsTips #Chrome #Developer
Content
0 -> [Music]
3.12 -> low contrast text is the most common
5.6 -> accessibility issue
7.68 -> roughly 1 in 20 people suffer from a
10.48 -> color vision deficiency
12.639 -> such impairments make it harder to tell
15.04 -> different colors apart
16.88 -> which can amplify contrast issues
20 -> here is how you can discover and fix
22.8 -> slow contrast issues with depth tools
26.08 -> let's start with inspecting the text
28.56 -> the inspect mode 2 tip shows the current
30.96 -> contrast ratio of the text and the
33.68 -> warning icon next to it to indicate that
36.32 -> it is low contrast
38.559 -> let's further examine that in the styles
40.96 -> pane
42.079 -> click on the color preview to open the
44.32 -> color picker
46 -> there is a warning icon next to the
47.92 -> contrast ratio here as well
50.559 -> expand the contrast ratio section
53.12 -> here it shows you the minimum contrast
55.92 -> ratio to meet the aa and aaa guidelines
60 -> to learn more about the color contrast
62.16 -> guidelines click on the link
64.559 -> there are two ways to fix the issues
66.72 -> with devtools
68.24 -> you can fix it by clicking on the
70.159 -> suggested color or you can use the
73.119 -> recommended contrast line to manually
75.68 -> fix it
76.88 -> the first line indicates the aa
78.96 -> guidelines
80.32 -> select any color below this line to meet
82.72 -> the minimum recommendation
85.04 -> the second line indicates the aaa
87.439 -> guidelines
88.64 -> select any color below this line to meet
91.28 -> the enhanced recommendation
94.159 -> it is tedious to go through each element
96.72 -> on the page to check the contrast ratio
99.92 -> the css available panel can help you
102.64 -> detect all the low contrast text of your
105.28 -> page
106.479 -> watch my previous tip to learn more
108.72 -> about the css overview panel
111.68 -> if your page supports both light and
114.079 -> dark themes you can emulate the theme
117.04 -> via the rendering tab and generate the
119.92 -> css overview for each theme to detect if
123.52 -> there is any team specific low contrast
126.079 -> issues
127.439 -> by the way
128.56 -> devtools has an experimental feature to
131.52 -> automatically detect low contrast issues
134.64 -> on your page
136.319 -> go to settings experiments
138.959 -> enable the automatic contrast reporting
141.76 -> experiment
143.36 -> reload devtools and open the issues tab
146.64 -> the low contrast issues are now reported
149.28 -> automatically
151.2 -> expand the affected resources and click
153.84 -> on it to highlight the elements on
155.92 -> screen
157.519 -> apart from that devtools can help you
160.319 -> understand visual impairments by letting
162.959 -> you simulate color vision deficiencies
165.68 -> on your web app
167.76 -> open the rendering tab scroll down to
170.56 -> the emulate vision deficiencies option
174.08 -> devtools can emulate blood vision and
177.12 -> other color vision deficiencies
180 -> for example protonopia is the inability
183.36 -> to perceive any red lights
185.84 -> select that and observe
187.92 -> the color contrast of the text is even
190.159 -> worse now
191.28 -> it is almost unreadable
193.92 -> to learn more about fixing low contrast
196.159 -> text in dev tools go to good.gear
199.599 -> devtools dash page contrast
202.64 -> see you for the next devtools tip
204.959 -> bye
208.37 -> [Music]
215.92 -> you
Source: https://www.youtube.com/watch?v=t4pDjqhG6fE