Embedded Files
Vision and Color
Everyone sees colors in different ways. For some users, colors can be the difference between a successful interaction and a frustrating experience. Colorblind and low vision users often have a hard time picking up colors. For this reason, avoid using color combinations that have low contrast or using colors as the only way to add or convey meaning or value.
When you are finished, be sure to assess your learning by taking the Vision and Color Quiz.
Exercise #18: Optical Illusions
When it comes to perception, visual perception can range widely and there are many factors that can influence our visual perception. Visual impairments, brightness, saturation, and where our eyes are drawn to first, can significantly impact how we see and interpret the world around us.
Look at the viral optical illusions below and think about how you perceive them compared to how others might perceive them.
What do you see in the image to the right?
The Rorschach Test is a collection of 10 symmetrical blots that were presented to people alongside of the questions "What do you see in this image?" in an effort to better understand peoples' perceptions.
Is the dress blue and black or white and gold?
This dress took the social media world by storm in 2015 as people debated whether the dress in the photo was black and blue or white and gold. This photo revealed the differences between color perceptions and lead to several research studies and scientific investigations. You can also view a comparison GIF image.
Which animal do you see first?
Originating in the late 1800's this image was used as a way of describing two different ways of seeing: "seeing this" versus "seeing as". Depending on whether you see a bunny rabbit or a duck, or if you see both, can have strong correlations to sociological, biological, and psychological factors.
Exercise #19: Color Simulator
Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using limited-color or monochrome displays and browsers will be unable to access information that is presented only in color. If you have color blindness, also known as color vision deficiency, you may perceive colors differently from others. This condition often makes it challenging to distinguish between certain colors, affecting how you see the world around you.
Select a vision type from the dropdown menu to see how the map appears through different types of color vision deficiencies.
Exercise #20: Vision Simulator
Visual impairments can vary widely depending on the diagnosis, the progression of the vision loss, and the surrounding environment. The following vision simulator is designed to help you explore what the world looks like through the lens of someone with a visual impairment.
Use the simulator below to explore a variety of visual impairments, at different levels, across mobile, tablet, and laptop screens.
Exercise #21: High Contrast Mode
For this exercise, check out the slideshow below to see how this website looks when different color themes are applied at the device level. Be sure to look at the various elements in the photos including the text, photos, background colors, links, and buttons.
On Windows computers, color themes or high contrast modes can be used to make for better viewing for users who have colorblindness, visual impairments, or other vision problems. These themes often make it easier to read text, but can lead to issues with other content if they are not part of the design process from the start.
In this exercise, go through the five (5) images for these Microsoft Windows contrast modes to see how it affects the user's experience. Take note of how text link color changes, how icons can appear (or disappear), and how color fills over an image.
Users with low vision tend to use high contrast modes to help with visual processing, color perception, and personal preferences.
Some contrast modes may conflict with certain elements on a page making them less accessible than default views.
Exercise #22: Contrast Ratios
For this exercise, visit the WEBAIM Contrast Checker. Use the foreground and background selectors to test the contrast ratios of colored text on colored backgrounds in the image. Take note of the contrast ratio that is provided once both colors are populated and look at the pass/fail messages for normal text and large text below the color selectors.
This exercise shows how to evaluate color combinations to make sure they meet the needs of the visually impaired. To meet these needs, text needs to be easy to read for all users, including those with low vision.
Large blocks of brightly colored text can be hard to read. Too much color can cause eyestrain and may induce migraines.
In this exercise use this color checker to compare the colors in the palette on the left, taking note of the combinations that meet the WCAG requirement of 4.5:1 for standard text.
Page updated
Report abuse