Accessibility and the importance of interactive button states in web designAccessibility and the importance of interactive button states in web design

Button States and Why They Matter

Accessibility and the importance of interactive button states in web design
Monday, January 31, 2022

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

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.

How to Calculate Contrast

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.

Default

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).

Default State

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.

Hover State

Pressed (Active)


The pressed or active state shows a user-initiated tap or click. This state needs to meet the 3:1 contrast ratio (or 4.5:1 for small text). It is not clearly outlined in the guidelines, but this state is usually designed with an additional element indicating its active status–an icon, an outline, elevation change, or slight shape change.

Pressed (Active) State

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.

Focus State

Disabled (Inactive)


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.

Disabled (Inactive) State

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

Federal Registrar

Essential Accessibility

Domino's Pizza Lawsuit

Is There a Legal Requirement to Implement WCAG?

Active, Hover, and Focus States for Designers

Contrast of Hover and Link States

Understanding Contrast Minimum