Color contrast is the biggest consideration in accessible design. High contrast between the background and foreground (color/image) is necessary for users with color blindness, or low vision.
What you see may NOT be what others see
Don’t assume that the way you see something is the same as everyone else viewing your content. An everyday example would be user’s viewing your content on a phone in bright sunlight. Another example, users of a screen magnifiers can change the way the color looks on their personal display, shifting it to high contrast. Others may have an older computer with different color calibrations on their monitor. You will never have control over what the users see, if you follow these two simple rules you will have a more accessible design:
- Never use color alone to show emphasis
- Make sure your colors have strong contrasts between them
Never use color alone to show emphasis
Color should never be the sole means of conveying information. Always use color plus bold, color plus size, color plus patterns or shapes, or color plus halo (highlight) to show emphasis. This simple technique can help improve information access for people in a wide variety of contexts and conditions:
- Color blindness
- Low vision
- Age-related vision issues such as macular degeneration
- Monitors with incorrect or imperfect color rendering
- People trying to read your materials on their phone while standing in broad daylight
Techniques for Text Emphasis
Correct: I want to emphasize this point. (uses boldface plus color difference)
Incorrect: I want to emphasize this point. (only uses color)
Techniques for Graphic Emphasis
For non-text graphics, color plus shape, color plus size, color plus texture or pattern, or some other means of visually distinguishing information differences. Here’s a chart where the areas are denoted just with color.
Here’s how that chart appears to someone with red-green color blindness:
If you design this chart with color and pattern, a person who can’t see color will still be able to interpret it. Here’s the same chart, corrected with an accessible design that includes color and pattern fill:
Adapted from https://accessibility.umn.edu/core-skills/color-contrast