Color Selections for Accessibility

Websites and web tools that are designed and coded so that people with disabilities can use them are referred to as web accessible websites. According to W3C Web Accessibility Initiative (WAI)1, web accessibility refers to websites, tools, and technologies designed and developed so that people with disabilities can use them. This utilization encompasses the ways that people with disabilities perceive, understand, navigate, interact, and contribute to the web. Web accessibility encompasses all types of disabilities that affect web access including auditory, cognitive, neurological, physical, speech, and visual. Access to information and communication technologies, including the web, is defined as a basic human right in the UN Convention on the Rights of Persons with Disabilities2.

When designing a website with visual and readable content with accessibility for all sighted users, the website must be designed with an understanding of color, light, and perception. This design insight is especially important when designing accessible websites for individuals with reduced vision, color deficient vision, and for individuals with certain neurological, cognitive, and other impairments3. The following are a few concepts that web designers keep in mind when they are designing for visual accessibility:

Color. Color perception is complex. In the visual range, light exists at different frequencies, or wavelengths. Similar to how a piano creates sound at different frequencies and our ears hear sounds as a range of notes, the normal human eye divides the visible light into three overlapping ranges. The three bands of overlapping light are detected by sensitive cells in the eye known as cones, and the three cone types are referred to as L, M, or S for long, medium, and short wavelengths. L, M, or S cone sensitivity is normally associated with the sensation of red, green, and blue colors, the three primary colors of light. Specific red, green, and blue hues are used for the “color primaries” in an RGB additive color model. The sRGB colorspace is the defined by the W3C as the default colorspace for web content and is an example of an additive RGB color model. The sRBG colorspace is most commonly used for accessibility guidelines.

Luminance. Luminance is a measure of light, which is spectrally weighted for human vision, but not perceptually weighted in terms of lightness and darkness. sRGB color values are converted to linear light values of luminance (Y), which can be used relative to another color’s luminance to determine a contrast ratio or to predict perceptual contrast, which is important to determine the readability of text on a page.

Perceptual lightness. Luminance is a linear measure of light as it exists in the real world, but it does not predict our perception of light. The human vision system normally has a wide range of vision due to a mechanism known as light and dark adaption, where the eye adjusts to the current overall light level. Light adaption is also known as “daylight vision”, dark adaptation is also known as “night vision”, and other adaptations include twilight adaption and adaptions related to contrast levels and chroma and hue.

These areas represent only some of the aspects that accessible website designers must be mindful of in order to provide accessible content for individuals with reduced vision, color deficient vision, and for individuals with certain neurological, cognitive, and other impairments. Other considerations, with regard to color, include cultural meanings of color, color and emotions, color and perceptions of time, red environments and traumatic brain injury, and how stripes and flashes can induce seizures. The complexity of color in web accessible design necessitates consultation with website designers who have knowledge of the wide array of guidelines and best practices that undergird accessible websites, and the skills to apply that knowledge.

1W3C Web Accessibility Initiative, 2019, “Introduction to Web Accessibility”

2UN, 2006, CRPD

3 MDN, 2022, “Web Accessibility: Understanding Colors and Luminance”