Accessibility
Choosing Color
Last modified 9/26/2025
Color is a powerful design tool—but only when used with accessibility in mind. Color can be a barrier to some people. By making smart color choices, you can ensure your content works for everyone, including people with color blindness or low vision. Color blindness effects approximately 1 in 12 men (8%) and 1 in 200 women worldwide. Choosing color with accessibility in minde includes:
- avoiding color-only instructions
- selecting high-contrast text and background combinations,
- ensuring color-coded elements are supported by text or symbols.
Color alone should not convey meaning
Avoid using color-only instructions, or using color alone to convey a certain message. For example, certain types of color blindness might make it difficult or even impossible to see important messages in a red font. Try to include An approach is to use both colors and symbols where people’s attention is required.
Example
Often, color is used to indicate that something is very important. This is a wise use of color, however, individuals who are color blind or have other visual disabilities will not be able to know that the color red below is used to draw attention and importance. By adding an asterisks to the bulleted items in red font, there are now two ways for students to identify what information requires particular attention. Color is therefore not the sole means of conveying importance. This is not to say, never use color in your document, but where you are able to edit color be sure there are multiple ways to determine meaning or information.
Use sufficient color contrast for font and symbols
If you must use color in your document, make sure the color contrast between the foreground (i.e. text or content) and the background color are sufficient. WCAG 2.0 Level AA standards require a luminosity of greater than 4.5:1 for normal text sizes. Some color combinations can be more difficult to read, be selective and conscious of the colors you choose.
Examples of Poor and Good Color Contrast
| Color Contrast Examples |
|---|
Light Gray on White |
| Dark Gray on Light Gray Hex codes: #7A869A on #F4F5F7 3.30:1 (fails for normal text, but passes for large and bold text ) |
| Light Gray on Black Hex codes: #C1C7D0 on #000000 12.3:1 (pass) |
Resources
Feedback
To suggest an update to this article, ISU students, faculty, and staff should submit an Update Knowledge/Help Article request and all others should use the Get IT Help form.