Accessibility
Choosing Color
Last modified 1/27/2026
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) |
Color Combinations to Avoid
When choosing colors, certain pairings can become completely indistinguishable to those with color vision deficiencies (CVD), often appearing as similar shades of muddy brown, gray, or yellow.
Color Combination | Risk Level | Notes / Issue |
|---|---|---|
Red + Green | High | Most problematic for red–green deficiency |
Green + Brown | High | Often appears as similar muted colors |
Red + Brown | High | Red may appear brownish |
Red + Orange | Medium | Low contrast; not ideal for charts or alerts |
Green + Gray | High | Can appear as same tone for red–green deficiency |
Blue + Purple | Medium | Tritanopia can confuse these colors |
Blue + Green | Medium | Tritanopia may see as similar muted colors |
Yellow + Light Green | Medium | Low contrast for tritanopia |
Blue + Gray | Medium | Can appear very similar; low legibility |
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.