1.4.3 Contrast (Minimum) - Sufficient Technique for UI Controls

Hi,

I'd like to recommend we add a new Sufficient Technique to 1.4.3 Contrast
(Minimum), to cover UI controls. In particular, there should be a
sufficient technique to meet the contrast ratio of 4.5:1 for active
controls, or 3:1 for inactive controls

The issue is that currently 1.4.3 Contrast (Minimum) doesn't appear to
provide clear guidance around UI controls on web pages that do not have any
text associated with them (i.e. An icon of a gear for options, an _ to
minimize or an 'x' to close a window).

Most of the techniques are for the minimum contrast requirements of text
and images of text.

There is an Advisory Technique that states: "Making icons using simple line
drawings that meet the contrast provisions for text (future link) ".
Perhaps that could be  expanded on to include UI controls on a page and
moved to a Sufficient Technique for UI controls.

Even with that though, we are seeing more and more web pages that consist
of several "portlets" where only one portlet or division on the page might
be active at any one time. The remaining portlets / divisions have controls
that would be in an inactive or disabled state.

Where do we find the balance between meeting minimum contrast requirements
- especially for inactive controls - and cognitive overload where the user
cannot discern between which controls are active or inactive on a page?

Our recommendation to teams has been that the controls on the page should
follow the contrast guidelines, and depending on the size of the actual
control, the control would be treated as either large text or small text
and follow the associated guideline. Disabled / Inactive controls were
included in this recommendation as well.


Do you think this is something that the WG could take a look at and provide
more guidance?


Unfortunately I couldn't quickly find an external site that had an example
of the controls and pages we're seeing lately, but while not a perfect
example, the "Basic Form Widgets" and "Sliders" tabs on the Dojo Toolkit
Rich UI Widgets page help to give a visual sample of disabled / inactive
controls: http://dojotoolkit.org/widgets

The types of controls we're running into are similar but without the text
on or near the control.






Marc Johlic
Accessibility Consultant
Human Ability & Accessibility Center, IBM Research
                                                                                             
  ( (T/L) 391-5905 | External          For self-help visit us at the IBM Human               
  813-356-3081                                  Ability & Accessibility Center               
  * johlic@us.ibm.com                   Follow us on ibm.com/able | Facebook |               
                                                                       Twitter