Both color and the contrast between colors are important to accessible design. Color is an objects hue, lightness, and saturation. The eye contains two kinds of receptors: rods and cones. While the rods convey shades of gray, the cones allow the brain to perceive color hues. You need light for color perception, but the way the brain responds to color is not perceived the same exact way for people with visual disabilities. For example, one person may see a color as blue, while another sees the exact same color as green. The eye sees the reflection of light off things around us, including the contents of a webpage. Under the first principle of the Web Content Accessibility Guidelines (WCAG) a person visiting a web page or electronic document must be able to perceive content on the page.
Defining Color Models
A color model is a simple way to define color. The first is RGB, which represents the amount of red, green, and blue. Each color a number value from 0 to 255. Zero represents dark and 255 is bright. The HSL model represents hue, saturation, and luminance. The difference between RGB and HSL are how the colors are expressed with numbers. The hue determines the color, the saturation and luminance determine the variation of the color. Saturation provides the vividness to the color and luminance provides the amount of white light given to the color. The most common color model for websites and coding is the hexadecimal number or HEX. HEX colors have the same informational value as RGB. HEX is a numeric character-based reference of RGB numbers. HEX colors use a hashtag followed by a combination of six letters. For example, the HEX color for white is #FFFFFF. WCAG does not prohibit the use of any specific color or color combination. However, there is a requirement that prohibits the use of color alone to present important content or instructions.
How Different People See Color
A person with low vision refers to visual impairments other than blindness. Low vision represents specific levels of visual acuity and field of vision. Visual acuity represents the clarity or sharpness of vision and field of vision represents the area a person can see when their eyes are in one position. In most instances a person with low vision includes vision that cannot be corrected with regular glasses. This can have an effect on how people perceive color or the ability to see the color when presented on a webpage. Some people cannot see certain colors at all. This is caused by deficiencies in the cone receptors if the eye which are responsible for color perception. Therefore, it is important to not use color as the only way to convey important information.
Contrast of Colors
A person with low vision may have different levels of contrast sensitivity. A contrast sensitivity is the ability to distinguish both bright and dim areas of an image. The most common contrast sensitivity is being able to discern text color on a background color. This creates a barrier if gray text is on a light-colored background. The Web Content Accessibility Guidelines (WCAG) state to meet Level AA requirements the visual presentation of text and images of text should have a contrast ratio of 4.5:1. If the text is larger than 18pt or 14pt bold the contrast ratio should be 3:1. If the text is part of a logo there are no contrast requirements. Contrast is measuring the perceived luminance or brightness between two colors. In some cases, a text outline represents the color when measuring contrast. In WCAG 2.1, 1.4.11 non text contrast extends past text by saying both user interface components and graphical object also need to meet a contrast ratio of 3:1.
Digital accessibility is a way to craft experiences for all people, including those with visual, speech, auditory, physical, and cognitive disabilities. Color accessibility helps people with vision disabilities interact with digital experiences equitable to everyone.