Color Accessibility Checklist

UX Tip | Color

Color can guide the user’s attention and help group information—but if used incorrectly, it could exclude users, confuse meaning, and create visual strain. About 300 million people around the world have some form of color blindness, or color vision deficiency. Many more may experience poor contrast or overstimulation from saturated designs. 

When making choices about color, here are some things to keep in mind to help ensure clarity, inclusivity, and usability—making products that are better for everyone. 

• Never rely on color alone to convey meaning. Also use icons, labels, or patterns—especially for statuses, graphs, or alerts.
• Ensure that there’s sufficient contrast between the foreground and background. Use tools like the WebAIM Contrast Checker to help meet WCAG 2.1 standards (a contrast ratio of 4.5:1 for body text, 3:1 for large text).
• In general, avoid combinations like red/green, green/brown, or saturated red/blue. Some users may be unable to distinguish and focus on them.

Do

Don’t

• Limit the number of colors used at once. Research shows that using more than 6 colors at a time can cause cognitive overload and reduce scanning efficiency. 
• Test in grayscale or simulate color blind vision. Use tools like Color Oracle and Vischeck.