Disabled Controls Contrast Test Page

This page contains disabled controls and a toggle to change the contrast ratio of the labels and other text associated with those controls in order, primarily, to test the assumptions the axe-core accessiblity testing library makes about text contrast requirements for disabled controls. (Of course, it could be used for testing other similar tools and libraries as well.)

The default behavior in all modern browsers is to reduce the contrast of disabled controls. Labels and other associated text are unaffected when the control is given the disabled attribute. Only the values of HTML button elements, the value, placeholder, and default iconography of input elements, and the options and default iconography for select elements are affected by the disabled attribute.

Toggle Text Contrast Ratio from Greater to Less Than 4.5:1

Disabled Controls

1. Standard HTML Disabled Button

2. Standard HTML Disabled Text Input with Value (for-id associated `label` and `aria-describedby` associated description)

Label for Disabled Text Input with Value

This is helper text associated via aria-describedby

3. Standard HTML Disabled Text Input with Value (`label` wrapping `input` and `aria-describedby` associated description)

Label Wrapping Disabled Text Input with Value

This is helper text associated via aria-describedby

4. Standard HTML Disabled Text Input with Placeholder (for-id label)

Label for Disabled Text Input with Placeholder

5. Standard HTML Disabled Text Input with Placeholder (wrapped label)

Label Wrapping Disabled Text Input with Placeholder

6. Standard HTML Disabled Checkbox

Disabled Checkbox Label

7. Standard HTML Disabled Radio Group (`disabled` set on `fieldset`)

Disabled Radio Group Legend

Radio Option 1, Implicitly Labeled
Radio Button 2, For-ID Labeled

8. Standard HTML Disabled Select (for-id label)

Label for Disabled Select

9. Standard HTML Disabled Select (wrapped label)

Label Wrapping Disabled Select

10. ARIA Disabled Button (`role=button` on a `div`)

ARIA Disabled Button

11. ARIA Disabled Textbox (`role=textbox` on a `div`)

Label for ARIA Disabled Textbox

ARIA Disabled Textbox Content

12. Standard HTML Disabled Text Input (`aria-labelledby` with `label` element)

Label for Text Input with aria-labelledby

This is helper text associated via aria-describedby

13. ARIA Disabled Combobox (`role=combobox` on an `input` set to `readonly`)

Label for ARIA Disabled Combobox

This is helper text for the combobox associated via aria-describedby

14. Standard HTML Disabled Textarea (for-id label and `aria-errormessage`)

Label for Disabled Textarea

This is an error message associated via aria-errormessage

15. ARIA Disabled Tab (`tab` in `tablist` set to `aria-disabled="true"` and `tabpanel` associated via `aria-controls`)

Disabled Tab (Selected)

This is the content of the disabled tab panel. The tab above is both selected and disabled using aria-selected="true" and aria-disabled="true".

Disabled Controls Contrast Test Page