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 context may occure.MustEN 301 549: 9.3.2.1, 11.3.2.1 und 9.3.2.2, 11.3.2.2
865Focus orderThe focus order in the color picker should correspond to the visual presentation.ShouldDIN EN ISO 9241-171: 9.3.18
866Focus orderIf the color picker outside a dialog contains several control elements that receive the focus with TAB, it should be possible to skip the color picker with the keyboard (see navigation sequence)ShouldDIN EN ISO 9241-171: 9.3.17
867Click areaThe click area of the control elements for the color picker should be at least 24 x 24 px (see use of the pointing device).ShouldWCAG 2.2

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 API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
869Desktop: Element hierarchyThe parent / child relationships of the elements within the color picker must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9
870Status, valueThe value and status of the color picker and its control elements must be communicated to the Accessibility API (see Element status).

Note 1: Status refers, for example, to the „open“ or „closed“ status with respect to the dialog, and to the „selected“ status with respect to the selected color within one of the selection elements.

Note 2: Value refers, for example, to the selected color or the value of a color channel. Color names are to be preferred over color values.

MustEN 301 549: 11.4.1.2, 11.5.2.5
871NameThe color picker and its control elements must have a concise and expressive Accessible Name.MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
872NameIf the color picker or its control elements have a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
873OperationIt must be possible to access, operate and exit the color picker and its control elements with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
874UpdateUpdates concerning the Accessible Name or status of the color picker and its control elements must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
875Desktop: PositionThe size and position of the color picker and its control elements must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 11.5.2.5, 11.5.2.13

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 <input type=color>.

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 <label for=ID> element.

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!