CSS Overview Hands-On 1

Back

very

inaccessible

low-contrast

text

In this hands-on exercise, we'll learn how to identify and fix low contrast text that can make websites hard to read.

What You'll Learn

Step 1: Finding Contrast Issues

You have three ways to check contrast problems:

Method A: Using CSS Overview

  1. Press F12 to open DevTools
  2. Click the "More tools" menu (three dots)
  3. Select "CSS Overview"
  4. Click "Capture overview"
  5. Scroll to the "Colors" section to see contrast issues

Method B: Using Issues Tab

  1. Press F12 to open DevTools
  2. Go to Settings (gear icon) > Experimental
  3. Enable "Show CSS color contrast issues in Issues tab" (filter 'issues')
  4. Open the Issues tab to see problems

Method C: Using Lighthouse

  1. Press F12 to open DevTools
  2. Click the "Lighthouse" tab
  3. Check "Accessibility"
  4. Click "Analyze page load"
  5. Look for contrast issues in the report

Step 2: Fixing Contrast Issues

  1. Click on any reported contrast issue
  2. In the Styles panel, click the color box next to the problematic color
  3. In the Color Picker, look for the "Contrast" section
  4. Choose one of the suggested accessible colors

Step 3: Testing Different Vision Conditions

  1. Press F12 to open DevTools
  2. Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
  3. Type "Rendering" and select "Show Rendering"
  4. Find "Emulate vision deficiencies"
  5. Try different options to test your changes

Try it yourself: Look at the colored text above and use these methods to identify and fix the contrast issues.

jec.fish - dark mode