list-box: divider with insufficient contrast

[TetraLogicalHelpdesk]

WCAG Level

Level AA

Priority

Low

Pages/screens/components affected

• List Box

Description

An important design consideration is to make sure there is enough contrast between the colour of meaningful non-text elements (such as controls denoted purely through graphical elements, icons used as the only visible indicator for errors, charts/graphs, meaningful borders/outlines used to denote a selected item) and their background. Good colour contrast ensures that all sighted users, including those who have a condition that affects their ability to perceive colour, are able to see/understand meaningful non-text content.

In the Dividers example, the divider has low contrast against the background.

User impact

Without sufficient contrast, content can be difficult to perceive and therefore difficult to identify. In extreme cases, content with low contrast may not be visible at all to people with colour perception impairments.

Required solution

Make sure that non-text content has a colour contrast ratio of at least 3:1 against its background and the content that is adjacent to it.

Elements that are disabled or inactive, and elements that use the browser's default styles, are exempt.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the components, their variants, and the documentation website.

Implementation guidance

The background of the divider <hr> element is

background-color: var(--lumo-contrast-10pct);

which evaluates as:

--lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);

Against a white background, this results in a colour contrast ratio of 1.2:1, which is well below the minimum 3:1 ratio.

We recommend darkening this colour (or increasing its opacity) in order to achieve at least a 3:1 contrast ratio.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the components, their variants, and the documentation website for instances of the same issue:

1. Check the contrast of the list box divider using a tool such as the TPG: Colour Contrast Analyser.
2. Check that the contrast level between the divider and its background is at least 3:1.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the components, their variants, and the documentation website have been tested for the same issue.
• All issues identified throughout the rest of the components/website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast (Level AA)

More information

• TPG: Colour Contrast Analyser
• WebAIM: Contrast and Color Accessibility - 1.4.11 Non-text Contrast
• WebAIM: Color blindness

Test data

Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta

[jouni]

Quickly checked both macOS Big Sur and Windows 10. Neither give 3:1 contrast ratio for menu dividers.

If you look at the Win10 screenshot, you notice that the same border color is used for many UI elements, including text inputs. That makes me think this accessibility requirement is either not important, or that major software companies expect visually impaired users to switch on high contrast colors.

Another example, here in GitHub: the <h2> elements inside comments get an underline. Not exactly the same use case, but they are also there to visually divide the content into sections. They have 1.35:1 contrast.

If we “punch up” the contrast of the dividers up to 3:1, it will look crude and distracting, in my opinion. I agree that we could use contrast-20pct to make them stand out a bit more. In addition, we could offer a high contrast color theme.

[jouni]

I suggest we don't do any changes based on this issue.

The divider is a visual decoration, not a required element to comprehend the UI. The visual added space between the items is enough to discern the visual grouping.