Synonyms: Color picker

See also: Slider , Date picker The color picker serves the selection of a color (see DIN EN ISO 9241-161: 8.6). Color pickers can be implemented in different ways, e.g. as

  • Table , Drop down list or Selection list for selecting a color,
  • single input field for entering a color value (e.g. HEX value),
  • several input fields or spin buttons for entering single color channels (e.g. RGB, RGBA, CMYK or HSB),
  • two-dimensional gradient field for selecting a value,
  • individual slider for selecting a color,
  • several sliders for selecting individual color channels (e.g. RGB, RGBA, CMYK or HSB),
  • button , with which a dialog can be opened for selecting a color (the dialog contains one of the above-mentioned elements),
  • a combination of the above-mentioned elements.

The requirements for the individual control elements within the color picker are described for the respective control element. Only the additional requirements for the whole of the element are described here.

Figure: Color picker
No.PropertyDescriptionClassificationReference
861Color codingThe color picker must contain at least one option for selecting a color by its color name, color code (such as HEX), or values of the color channels (such as RGB).MustEN 301 549: 9.1.4.1, 11.1.4.1
862Color codingIf the selectable values or the current value are visually displayed in color, the elements should have a tooltip with the color name or the color value in text form.

Note: The output of the color name should preferably be used.

ShouldDIN EN ISO 9241-143: 9.6.11
No.PropertyDescriptionClassificationReference
863Use of the keyboardIt must be possible to access, operate and exit the color picker and the elements that it contains with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
864UpdateWhen focusing and operating the color picker, no unexpected change of contextnavigation sequenceuse of the pointing device

Use of the keyboard: color picker

Permalink "Use of the keyboard: color picker"
ActionKeyClassification
Focusing of the color pickerTABRequired
Exiting the color pickerTAB

Note: There can be several control elements within the color picker that have been previously focused with TAB.

Required
Navigating within the color pickerTAB or LEFT/RIGHT/UP/DOWN ARROW (depending on the used control element)Required
Activation of the control elements in the color pickerENTER or SPACE (depending on the used control element)Required

Use of the pointing device: color picker

Permalink "Use of the pointing device: color picker"
ActionKeyClassification
Activation of the control elements in the color pickerleft clickRequired
No.PropertyDescriptionClassificationReference
868RoleThe role of the color picker and its control elements must be communicated to the Accessibility API (see Accessibility APIElement status

Practical tip: color picker in Web applications

Permalink "Practical tip: color picker in Web applications"

The color picker can be implemented with the HTML element .

The initial value is communicated through the value attribute. Only the hexadecimal color values starting with a diamond and followed by 6 characters are permitted as values.

The label of the color picker should be linked to the color picker with the

The color picker can be marked as disabled, but not as a required field (required) or as read-only (readonly).

Please note: Depending on the browser and screen reader used, the HTML color picker is either not perceptible at all (e.g. JAWS with Chrome and Edge) or only partially perceptible and operable (e.g. NVDA with Chrome, Edge and Firefox). Using the HTML color picker is not recommended, unless the application is only intended to work with a browser and specific assistive technology, and accessibility can be guaranteed in this environment. Otherwise, depending on the requirement, for instance, a button , which opens a modal dialog for the color selection, one or several input fields , a drop-down list , slider or a combination of these elements can be used.

Further information: 4.10.5.1.14 Color state (type=color) - HTML Standard (whatwg.org)

There is no role for color pickers in ARIA. Instead, depending on the requirement, for instance, a button which opens a modal dialog for the color selection, one or several input fields, a drop-down list, slider or a combination of these elements can be used.

Information about this article

You are welcome to send feedback by email about our handout!