Color
Color
Color is often used in web design for grouping related items, denoting required fields on a form, or distinguishing one piece of text from another, e.g., hyperlinks. Color enhances the aesthetics, usability, and even the accessibility of a website. However, some users have difficulty perceiving color so, when color is used, it must not be the only means of conveying information.
Who Does Making Color Accessible Help?
- Users who are colorblind might be unable to distinguish the colors being used.
- Older users and users with partial sight might not be able to see colors well.
- Users who are blind, who use text-only, or who use monochrome displays have no access to information that depends on color alone.
- Users who have customized style sheets may perceive colors on the page differently.
What Does It Mean to Make Colored Content Accessible?
If color is used to convey information, such as indicating required fields, hyperlinks, active elements, or other information, there needs to be another, secondary method of conveying the same information. For example, required fields could be marked with a red asterisk; hyperlinks could be blue and underlined, and active elements could change color and be marked with a heavy border.
How to Check
To check whether color alone is being used to convey information, visually inspect the pages to find all instances of color usage, and if the use of color is meaningful, ensure that there is a secondary means of conveying the same information. Also, look for references to color in the content, and make sure that these references describe where to find the information. For example, you might include some of the text and/or the page location so all users will be able to identify the information.
- Accessible Color Palette Evaluator
- How to Design for Color Blindness
- Visualizing for the Color Blind
Color Contrast
Users with moderately low vision need to be able to read and navigate, so there must be enough contrast between text and its background.
Who Does Adequate Contrast Help?
- Users with low vision, including those people whose vision is deteriorating, often have difficulty reading content if the text and background don't have sufficient contrast.
- Users who are color blind can experience loss of contrast.
- Users who are using devices with small screens might need additional contrast, depending on the environment.
What Does Adequate Contrast Mean?
The minimum contrast ratio between most text and its background should be 4.5:1. Text that is larger and/or bold can have a contrast ratio of 3:1. Large and/or bold is defined as 18-point text or 14-point bold text. These requirements also apply to images of text if those images are intended to be understood as text.
How to Check
The best way to check the contrast of text or other content is to use one of the following tools that can be downloaded for free: