Discover and fix low contrast text with DevTools | DevTools Tips

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=t4pDjqhG6fE


Duration: 3:37
9,245 views
372

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



Other Videos By Chrome for Developers


2022-03-16Thinking on ways to solve a LOADING BAR
2022-03-15Building VR and AR experiences using HTML | HTTP 203
2022-03-10CSS Grid debugging tools | DevTools Tips
2022-03-08Chrome 99 - What’s New in DevTools
2022-03-01New in Chrome 99: CSS Cascade Layers, Show Picker, and more!
2022-02-10CSS Flexbox debugging tools | DevTools Tips
2022-02-09Thinking on ways to solve SVG FAVICON
2022-02-01New in Chrome 98: Per-element opt-out for auto-dark, COLRv1, and more!
2022-01-27Chrome 98 - What’s New in DevTools
2022-01-19Thinking on ways to solve a DARK/LIGHT THEME SWITCH
2022-01-13Discover and fix low contrast text with DevTools | DevTools Tips
2022-01-12Workbox TypeScript - Unpacking the Workbox
2022-01-04New in Chrome 97: Web Transport, Script type Detection, and more!
2022-01-04Cross-fading DOM elements | HTTP 203
2022-01-03Chrome 97 - What’s New in DevTools
2021-12-30Record and replay user flow with the Recorder panel | DevTools Tips
2021-12-27Generating your color palette in CSS | HTTP 203
2021-12-21Responsive images & art direction - Designing in the Browser
2021-12-16Authoring colors with DevTools | DevTools Tips
2021-12-15Choosing the right caching strategy - Unpacking the Workbox
2021-12-14The Zombie DOM - old DOM stuff that still haunts us today | HTTP 203


Tags:
purpose: Educate
pr_pr: Chrome
type: DevByte (deck cleanup 0-10min)
GDS: Yes
shortcuts
settings
css
css overview
Chrome Devtools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen