The practice of choosing and using colors in a way that ensures content is perceivable and understandable for users with color vision deficiencies or low vision.
Color accessibility means designing with color in a way that all users can perceive your content, including the roughly 8% of men and 0.5% of women who have some form of color vision deficiency (commonly called color blindness), as well as users with low vision, aging vision, or those viewing screens in bright light.
Color accessibility is part of the broader Web Content Accessibility Guidelines (WCAG), which define measurable requirements around contrast ratios and prohibit the use of color as the sole means of conveying information.
Beyond being a legal requirement in many jurisdictions (through laws referencing WCAG compliance), color accessibility is a fundamental part of usable design. A button that is only distinguishable from its background by hue (with no difference in lightness) becomes invisible to a user with deuteranopia. An error message shown only in red may not be noticed by a user who cannot distinguish red from green.
Designing for accessibility generally improves the experience for everyone: high-contrast text is easier to read in sunlight, clear visual hierarchies help all users scan content faster, and non-color cues (icons, labels, patterns) reduce cognitive load.
Contrast: Ensure text has a contrast ratio of at least 4.5:1 against its background for normal text, and 3:1 for large text (WCAG AA). Use a contrast checker to verify this.
Never use color alone: Always pair color cues with a second signal: an icon, a text label, a pattern, or a shape difference. For example, an error field should show a red border AND an error icon AND an error message, not just a red border.
Test with simulation: Use browser devtools or design tool plugins to simulate deuteranopia, protanopia, tritanopia, and achromatopsia. Check whether your UI remains usable in each simulation.
Use sufficient lightness contrast: Even within a palette with strong hues, if the lightness values are similar, users with color blindness cannot distinguish the colors. Vary lightness, not just hue.
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and above). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text UI components (buttons, inputs, icons) require a 3:1 ratio against adjacent colors.
Deuteranomaly and deuteranopia (reduced or absent sensitivity to green) are the most common forms, affecting about 6% of males. Together with protanomaly/protanopia (red sensitivity), red-green color blindness is the most prevalent type. Tritanopia (blue-yellow) is much rarer. Designing with sufficient lightness contrast protects users across all these types.
Yes. A palette that passes contrast checks in light mode may fail in dark mode if the same colors are used against darker backgrounds. Always check contrast for both light and dark themes independently. Some colors that work as accessible text on white become too bright and cause halation (a glowing effect) in dark mode.