Color is an important part of design, but it cannot be the only way information is conveyed. Many users have low vision or color vision deficiencies and may not perceive color cues at all.
Do not use color alone to convey meaning. For example, avoid instructions like “items in red are required.” Add text, symbols, or icons to communicate the same information.
Avoid sensory-only instructions. Instead of “click the green button on the right,” use descriptions such as “select the Submit button below the form.”
Ensure sufficient contrast between text and its background so that content is readable for people with low vision and on different devices.
Keep links visually distinct using more than color alone (for example, color plus underline or bold) so they are easy to identify.
Color contrast
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold or larger).
Test text and background color pairs with a color contrast checker.
Avoid very light text on light backgrounds or dark text on dark backgrounds, even if it looks okay on your own screen.
Check contrast for text in buttons, navigation, and images that contain text.
Use real HTML text instead of text baked into images whenever possible.
For examples of campus brand colors that meet accessibility contrast guidelines, see the university’s Fonts and Colors page.
Styling and readability
Use semantic structure. Use real headings, lists, and paragraphs rather than relying only on changes in color, size, or bolding to indicate structure.
Choose readable fonts and spacing. Use fonts and sizes that are easy to read and provide enough line spacing so that text doesn’t feel crowded.
Avoid flashing or blinking content. Do not create content that flashes more than three times per second, and avoid flashing content altogether when possible.
Related WCAG 2.1 criteria
1.4.1 Use of Color (Level A): Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
1.4.3 Contrast (Minimum) (Level AA): Text and images of text have sufficient contrast with their background.
1.4.11 Non-text Contrast (Level AA): Visual information required to identify user interface components and graphical objects has a contrast ratio of at least 3:1.
Before you publish
Check that color is never the only way information is conveyed (add text labels, patterns, or icons).
Confirm that text and important graphics meet minimum contrast ratios.
Make sure links are visually distinct using more than color alone.
Verify that headings, lists, and other structures use proper HTML rather than just styling.
Remove or replace any flashing or blinking content.