Inclusive Design Tip : Brightness

A visual tip

Why do it

People with visual disabilities need information that has sufficient contrast. Anyone can have issues with brightness due to context or environmental factors, for example being outside on a sunny day, or using a device with an old or low quality screen.

What to do

  • Chrome: Start Sunshine Sue in the Funkify extension. Set the intensity of the simulation to about 5.
  • Browse your site.

Things to check

  • Are all paragraphs, headings, icons and images visible and readable?
  • Has content disappeared?

Things you could change

  • Use a bigger base font-size. 100% is a good minimum.
  • Make sure text has good foreground/background contrast. See Web Content Accessibility Guidelines (WCAG) 2.0 on colour contrast. A ratio of 4.5:1 gives you WCAG AA compliance (“you’re doing great for Web Content Accessibility”) and 7:1 for WCAG AAA compliance (“you’re doing amazing for Web Content Accessibility!”)