Center For University Access And Inclusion Virtual Accessibility Expedition
Virtual Visit Request info Apply
MENUMENU
  • Virtual Accessibility Expedition
    • 1. Color Contrast
    • 2. Gray-scale chart
    • 3. Images
    • 4. Mouseless navigation
    • 5. Video settings
    • 6. Scalability
    • 7. White page
    • 8. Play the game
    • 9. Experience Survey
  • About
    • About our team
    • References
  • IN
  • Center For University Access And Inclusion
  • VAE
  • Color in web design

Color in web design

What is contrast?

Contrast is the difference between two or more things.  There are seven kinds of color contrast.

  1. Contrast of hue
  2. Light-dark contrast
  3. Cold-warm contrast
  4. Complementary contrast
  5. Simultaneous contrast
  6. Contrast of saturation
  7. Contrast of extension

Contrast levels for accessibility

The Web Content Accessibility Guidelines (WCAG) 2.1 AA require that the contrast between text and the background behind it maintain certain ratios dependent on text size.

  • Regular text, including images of text, must have a ratio of 4.5:1
  • Large text (18 point or bigger, or 14 point or bigger when bolded) and non-text elements must have a contrast ratio of 3:1

Virtual Accessibility Expedition Home Page