Why are buttons so important? Buttons are the essential element to user-initiated action in your designs. Because they enable action, button states should be considered up front when designing.
So what are the button states that you need to consider?
• Default
• Hover
• Focus
• Pressed
• Inactive
What's the WCAG?
Let’s discuss these various states in terms of accessibility and usage as defined by the Web Content Accessibility Guidelines (WCAG) published by the World Wide Web Consortium (W3C). Updated in 2018, WCAG 2.1 is a set of guidelines for making content on the web more accessible to users with disabilities such as limited mobility or color blindness. Adjacent colors should be kept above a certain ratio–the color contrast ratio–to keep web elements highly visible, even for users with a color blindness disability.
But what is color contrast and how is the proper ratio achieved?
Color contrast is the difference between the luminance of two colors next to each other.
Luminance is a measurement that is used to calculate the perceived brightness from the color.
How color contrast is calculated:
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter of the color.
L2 is the relative luminance of the darker of the color.
The minimum color contrast ratio required by WCAG is 3:1 (large text) or 4.5:1 (small text)–more on this below.
**Pro-tip: You don’t need to calculate this on your own! There are color contrast checking plug-ins out there that will automatically do this for you. Stark is a plug-in for both Sketch & Figma and will make suggestions for you if your ratio is below standards.
Now, let’s get back to the button states and see how contrast ratio and other guidelines apply.
WCAG Compliant Button States
DefaultHover
The default button state is going to be the most used state when creating your designs. This is what the user sees before they interact with it. To meet the rules outlined in WCAG, the color contrast ratio needs to be at least 4.5:1 for small text (16 pt font size and less, unbolded) or 3:1 for large text (18 pt font size, regular or at least 14 pt font size bolded).
Hover
The hover state is initiated when the user hovers with their mouse over the button and indicates the possibility of interaction to the user (ie. you can click this button!). This state’s contrast must meet at least 3:1 ratio (4.5:1 ratio for small text).
**Pro-tip: hover states aren’t needed for apps or mobile–only desktop applications and websites.
Pressed (Active)
The hover state is initiated when the user hovers with their mouse over the button and indicates the possibility of interaction to the user (ie. you can click this button!). This state’s contrast must meet at least 3:1 ratio (4.5:1 ratio for small text).
**Pro-tip: hover states aren’t needed for apps or mobile–only desktop applications and websites.
Focus
The focus state is presented when a user tabs through a website using their keyboard or another device. The focus state is especially important when a user is using a screen reader or has limited mobility and is using a mechanism different than a mouse to navigate a page. Only one element can be focused on at a single time on the page and it should be blatantly obvious to the user where they are on the page. A simple background color change won't do here! A focus state should be a clear, separate element that makes this state stand out from the rest when enabled. And like the other active button states, the contrast ratio must be at least 3:1.
A couple of visual solutions for the focus state could be a separate outline in a high contrast color for a solid button, or a thick underline under a text-only button. Added elements to indicate focus should be at least 2 px and should be completely unique to the focus state. For example, the selected state of a button might have a dark 2px outline. If this is the case, then your focus state needs to have a separate and unique indicator.
Disabled
The disabled or inactive state is used when the button is inactive or un-clickable. This is the only button state that technically doesn’t need to meet the contrast ratio because the rules state that “text or images of text that are part of an inactive user interface component...have no contrast requirement.” Common designs for a disabled state are a grayed out button, lowered opacity (Material.io uses a 38% opacity on its inactive button states), and/or lowered elevation if your default button has a shadow. Neither of these states will consistently pass the 3:1 (or 4.5:1) contrast ratio but again, they don’t technically need to in order to meet the accessibility guidelines. This is a somewhat contentious topic as it is argued by web accessibility advocates that ALL button states should be designed for all users. I imagine in the coming months/years, this will continue to be a hot topic in web accessibility design.
If you’re like us here at Cue and are passionate about designing for accessibility, download our cheat sheet for best practices.
—
Editor’s Note
Section 508 of the Rehabilitation Act of 1973 was added in 1998 to require federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities, including both employees and members of the public. In 2017, Section 508 was revised with the requirement that by January, 2018, all federal agencies and contractors must, among other revisions, comply with WCAG 2.0 A/AA.
So in the context of federal government agencies, the answer is simple: WCAG is formalized under law as the accessibility standard.
References
Is There a Legal Requirement to Implement WCAG?
Active, Hover, and Focus States for Designers
Contrast of Hover and Link States
Understanding Contrast Minimum
Why are buttons so important? Buttons are the essential element to user-initiated action in your designs. Because they enable action, button states should be considered up front when designing.