WCAG 2.1 - Disabled Buttons

[TheUntamed]

In the past I already asked about contrast ratio of buttons on hover and focused. See this post: #3353
Now I wonder, what about disabled/deactivated buttons? Are they treated like usable buttons or differently?
Under deactivated/disabled buttons I understand buttons that are not interactable in the current state of the site, like a submit button that is not clickable while required fields of the form are still empty.

Here are two examples for buttons that are deactivated and don't fulfill the default contrast ratio requirement:

Would that be fine as long as they fulfill the requirements once activated?

[JAWS-test]

1.4.3:

Text or images of text that are part of an inactive user interface component, ... have no contrast requirement.

1.4.11:

... except for inactive components ...

Conclusion: There are no contrast requirements for deactivated elements.

[JAWS-test]

Related: #3173, #2308, #922

[bruce-usab]

@TheUntamed i do want to acknowledge that deactivated elements being of low contrast is a significant accessibility barrier for many (or even most) people with low vision. I do not know of any great alternatives, since "grayed out" meaning "unavailable" is such a long-standing UI convention.

[Myndex]

Hi @bruce-usab @TheUntamed

Per WCAG 2

Under WCAG 2, there is no contrast requirement for disabled or inactive components, a sort of catch-all which keeps WCAG 2 (developed circa 2005-2007) simpler to implement, and (hopefully) focus on the most important content.

However, there are other guidelines than WCAG 2 with which to find salient guidance. And certainly for items like this which are not covered by WCAG 2, it's useful to look toward other standards and practices.

Inactive Components

Elements that are not active, not engageable, not in focus, semi-suppressed, present various considerations.

1. There is a definite need to present the non-active element in a manner that is clearly distinguishable from active elements.

2. Non active elements often need some level of readability/discernablility as well, so that a user can determine what is inactive.

3. In some cases, inactive elements should be accompanied by a label or tool tip that explains why it is inactive.

   • Example, the user needs to complete more elements in a form.
   • Example, the user needs to purchase a subscription.
   • Example, the element is not available during the processing of a request.

Practical Guidance

In the 1990s research of Whittaker/Lovie-Kitchin/Legge et alia in peer reviewed papers such as Visual Requirements for Reading, the definitions of critical size, and critical contrast were established. But also the concept of "contrast reserve", which is the amount of contrast above the JND threshold contrast (the fine point of visibility/invisibility).

A Table Referencing Establisshed Contrast Levels and Guidelines

Contrast Reserve	WPMa	WLK¹ term	APC-RC² term	$L^c$³	Comments
$JND$	$NA$	Threshold	Threshold	$01-5$	This defines the minimum for an individual
$3\times$	$40$	Spot	Non-Fluent	$15-45$	Items discernable with fixation (text cutoff is $L^c\ 30$)
$4\times$	$80$	Fluent	Sub-Fluent	$30-60$	Items of lower priority or secondary to content
$10\times$	$>160$	Hi Fluent	Fluent	$45-75$	Primary content
$>20\times$	$>160$	Optimum	Body Text	$75-100$	Columns or Blocks of Body Text

^a Words per Minute
¹ Whittaker/Lovie-Kitchin
² APC-Readability Criterion
³ Typical APCA Contrast, not considering size

Inactive

Draft guidance at APC-RC is

• Non-Fluent & Incidental
  • Per Lookup Table
  • Contrast Value can be reduced by $L^c\ 30$
  • But in no case can it be under $L^c\ 30$

A contrast reduction of $L^c\ 30$ from active to inactive component is sufficient to express that an item is inactive, but is still readable provided it does not decend lower than $L^c\ 30$. There is some consideration that this could be increased to a reduction of as much as $L^c\ 45$ in some cases, where the spatial resolution supports it.

References

1 Visual Requirements for Reading
2 APC-RC Uee Cases for Text
3 Easy Intro to APCA
4 APC-RC Mid level conformance

[TheUntamed]

A followup question: If the button is not disabled, would an icon in the middle, like in the examples of my post above, be enough to fulfill the contrast requirements? (If the icon has a sufficent contrast to the background.) Even if there is no border or background with sufficent contrast to the outside?

[JAWS-test]

If the button is not disabled, would an icon in the middle, like in the examples of my post above, be enough to fulfill the contrast requirements?

Yes, border or background are not necessary for a button according to WCAG. However, a border would be useful to distinguish a button (control element) from an icon (non-operable graphic).

See https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html, chapter "Boundaries"