WCAG color contrast is more than just text
Most designers know the basics of web accessibility and color contrast. We’ve memorized that “normal text” (24 CSS pixels and below) needs to meet a 4.5:1 contrast ratio with its background, and “large text” (greater than 24 CSS pixels) needs to meet a 3:1 ratio.
But WCAG (Web Content Accessibility Guidelines) color contrast requirements don’t stop at text. There are lesser known WCAG success criteria (or “rules”) that are still very important for inclusive design; these ensure interfaces are usable to users with low vision or color blindness.
Some of these forgotten requirements circle around UI components, inline links, and data visualizations, which all have color contrast rules of their own. When these details are overlooked, users can’t tell what’s interactive, what’s linked, or what the data is actually saying (even if all the text uses accessible colors).
And these accessibility gaps aren’t edge cases. They show up in mature Design Systems, enterprise products, and well-intentioned designs because they live outside the accessibility standards designers tend to learn and adopt.
To avoid these gaps for the future, let’s go over 3 ongoing color contrast issues, how WCAG applies beyond text, and who exactly is impacted by color contrast.
Note: I reference WCAG 2.1, Level AA standards. If your product needs to comply with Level AAA, required color contrast ratios increase (i.e., normal text needs a 7:1 ratio with its background).
UI components that look accessible (but aren’t)
WCAG criteria: SC 1.4.11: Non-Text Contrast (Level AA)
In plain english, this WCAG criteria requires that non-text UI elements that are interactive or communicate meaning have a minimum of 3:1 contrast ratio against adjacent colors (like the UI background).
But what is covered by “UI elements”? Basically, anything that a user can interact with or needs to see to use; such as:
- Buttons and button states
- Form fields and their borders
- Checkboxes, radio buttons, and toggles
- Focus indicators
- Icons that convey meaning or affordance
Important note: If color contrast fails WCAG standards from the Design System level, the failure is replicated across all product adopters; it’s critical to check system UI component’s color contrast.
What designers miss and why it matters
This is where many designs that are intended to be accessible quietly fail. Since these UI elements don’t contain text, they’re excluded from color contrast checks. And yes, text is very important to check, but so are the UI elements that provide any product its functionality.
Common gaps within UI elements include:
- Input borders that blend into the product background
- Custom focus indicators that rely on subtle color shifts instead of high-contrast
- Icon-only controls (like buttons) that don’t meet contrast on their own
When UI elements lack minimum contrast, users can’t reliably:
- Identify what’s interactive or understand UI component states (like hover)
- Navigate interfaces using only their keyboard
- Complete forms without repetitive errors
Who are the users impacted?
Though low-contrast UI elements affect everyone at some capacity (you might have to do some squinting), they make products unusable to people like:
- Users with low vision who need distinct visual styling
- Keyboard users who depend on focus indicators that stand-out on the UI
- Older users experiencing reduced contrast sensitivity
- Users in low-contrast environments (i.e., sun-glare, small screens, fluorescent lights)
Note: To check a UI component’s contrast (or any element that needs contrast), you can also use Web Disability Simulator on any web page to simulate how it looks for users with color-blindness or cognitive disabilities.
Data visualizations with low contrast
WCAG criteria: SC 1.4.11: Non-Text Contrast (Level AA)
This accessibility gap references the same WCAG standard as UI components from above. But though data visualizations (data viz) may not always be interactive, they’re communicating meaningful information. Because of this, data viz must be perceivable without relying only on color and must meet a minimum 3:1 contrast ratio against adjacent colors.
This standard applies to:
- Chart lines, bars, and segments
- Data points and markers
- Axes, gridlines, or any reference lines that convey meaning
- Legends or other visual keys
What designers miss and why it matters
Data viz is an already complex and complicated UI element, so it’s even more difficult to bake in accessibility guidelines (especially if it’s being retrofitted). But color contrast issues are frequently found in charts and heatmaps that use the brand’s color palette rather than accessibility-tested colors.
Common issues with data viz include:
- Chart colors that are distinguishable in isolation but fail 3:1 contrast when touching one another
- Data series using colors that aren’t distinguishable for color-blind users (i.e., red-green)
- Thin gridlines with low contrast that disappear against the background
- Charts that use multiple colors without secondary text indicators
- Legends that depend on matching colors instead of labels or patterns
When data viz lack contrast and use color alone, users can’t:
- Clearly and quickly understand trends in the data set
- Confidently compare data without the feeling of guessing
- Lose access to critical insights (especially when the data isn’t provided in another way)
Who are the users impacted?
Again, all users are affected on some level by low contrast data viz. But other users need to be considered when designing the different types of charts so they can perceive and comprehend the same information as everyone else.
Some of these users include:
- Color-blind users (especially those with red-green color blindness)
- Users with low vision who need high contrast for visual distinction
- Users with cognitive disabilities who benefit from redundant cues
- Users viewing charts on small screens or in poor lighting
Note: Simply by adding a white border between data viz elements, the colors become more distinguishable and meet accessibility guidelines.
Inline links that rely on low contrast color
WCAG criteria: SC 1.4.1: Use of Color (Level A)
Color cannot be the only visual means used to indicate a link on a web page. But not only that, inline links also must have at least 3:1 contrast against surrounding body text to be distinguishable (especially when the link doesn’t have an additional visual cue, like an underline or bold font weight).
What designers miss and why it matters
Inline links are such simple and subtle UI components; it’s easy to miss the checks needed to ensure accessibility. Designers typically think that since a paragraph of text meets the 4.5:1 color ratio requirement, any inline link using the same text color within the paragraph also passes. Since links are interactive elements, they have additional guidelines other than passing the color requirements for text.
Frequent issues with inline links include:
- Links that are differentiated only by an underline when the link receive mouse hover or keyboard focus
- Link colors that meet contrast against the background, but not against adjacent text
- Underlines removed for aesthetic or simplicity reasons
When inline links aren’t clearly distinguishable, users can’t:
- Easily comprehend what’s interactive (especially when hidden in body copy)
- Efficiently navigate a website or product page
- Find important actions or information they need to complete a task
Who are the users impacted?
I’ve said it before, and I’ll say it again… this affects all users at some capacity. Inline links are not as recognizable to any user when the underline affordance or high contrast color is taken away. But for some users, it becomes impossible to identify links that could lead the user to information or product pages they need.
Users to consider when designing inline links include:
- Color-blind users who may not perceive color differences
- Users with low vision who require visual affordances with high contrast
- Users with cognitive disabilities who benefit from consistent patterns
- All users scanning content quickly
Note: A simple rule of thumb is to make a link look like a link for optimal usability and accessibility.
UI components, inline links, and data visualizations often fall outside the mental checklist of color contrast and accessible design. WCAG covers these elements, but it’s often overlooked when focusing on adequate contrast for text. This leads to websites and interfaces that look high contrast, but are near impossible to use for some user groups.
By spreading awareness to these accessibility gaps, we can expand how we define color contrast and better apply ideal accessibility practices. When these requirements are built into components, patterns, and Design Systems from the start, accessibility stops being a last-minute fix (or remediation plan) and becomes part of the design process.
3 color contrast mistakes designers still make was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.