2-3 min

Color Contrast Champion

Visual Accessibility Heroes

Scenario

Emma is designing a call-to-action button for her nonprofit's donation page. She chose a beautiful light gray text on a white background because it looks elegant and minimal. However, her grandmother Rose, who has age-related vision changes, mentioned she couldn't read the button text clearly during a family video call. Emma realizes that what looks stylish to her might be completely invisible to users with visual impairments. Help Emma create a button that's both beautiful and accessible to everyone, including users like Rose!

Your Task

Adjust colors to meet contrast requirements

Success Metric:

4.5:1 contrast ratio achieved

Hints
  • 1.WCAG AA requires 4.5:1 contrast ratio for normal text
  • 2.Dark text on light backgrounds or light text on dark backgrounds work best
  • 3.Use online contrast checkers to verify your color combinations
Code Editor
Edit the code below to complete the activity
HTML1 lines