CSS Overview Hands-On 2
Instructions
- - Open Chrome DevTools using F12 or Ctrl+Shift+I
- - Click the three-dot menu (⋮) in DevTools
- - Navigate to More Tools > CSS Overview
- - Click "Capture overview"
- - Review the contrast issues between badge text and background colors
- - Notice how badges with poor contrast ratios (<4.5:1) are marked
- - Compare contrast issues between light and dark themes
Light theme
- Panel
- Drawer
- Appearance
- Console
- Debugger
- Elements
- Global
- Grid
- Help
- Mobile
- Navigation
- Network
- Performance
- Rendering
- Resources
- Screenshot
- Settings
Dark theme
- Panel
- Drawer
- Appearance
- Console
- Debugger
- Elements
- Global
- Grid
- Help
- Mobile
- Navigation
- Network
- Performance
- Rendering
- Resources
- Screenshot
- Settings