What constitutes an accessible button? For one, it has to have high color contrast for low vision users to see. Another thing is that it has to maintain as much of its color when colorblind users perceive it.
There are button colors that meet the first criteria but fail the second and vice versa. A button color that meets both is the most accessible. Let’s find out what color that is. The result of this analysis will help you choose a button that’s accessible to the majority of users.
Setting the Standard
There are many colors on the visible spectrum. Since the goal is to find the optimal hue, it’s necessary to maintain the same saturation and lightness levels in this analysis. The color saturation will be kept at 80% and lightness at 30% on the HSL color system.
The seven colors on the visible spectrum are red, orange, yellow, green, blue, indigo, and violet. Since we’re weighing these colors against color contrast and color blindness accessibility, we have to set the standard for what is optimal.
Optimal color blindness accessibility is when the hue that colorblind users see is as close to its original hue as possible. The three most common types of color blindness are Protanopia, Deuteranopia, and Tritanopia.
Red-green color blindness affects more of the population, while blue-yellow color blindness is rarer. Therefore, the color performance for Protanopia and Deuteranopia will have more weight than Tritanopia.
WCAG’s color contrast ratio standards determine the optimal color contrast accessibility. A color contrast ratio that exceeds 4.5 is considered accessible. Ratios that are less than that are deemed inaccessible.
Subscribe to read the full article
Become a paying subscriber of UX Movement Newsletter to get access to this post and other subscriber-only content.
Book
Affiliate
