WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Star ratings

for

From: Mark Magennis
Date: Oct 26, 2021 3:22AM

There are two aspects to this - contrast against background and colour indicating state.

In terms of contrast against background, if the star has an outline of a different colour and either the outline/background has sufficient contrast or the star/outline has sufficient contrast then it meets the WCAG contrast requirements. In practice, a thicker outline may make it easier for some users to perceive the contrast, but that is not taken into account in the requirements.

But since the star colour is used to indicate state (checked or not checked), then a star sldo has to contrast against stars in the other state, so either the star colour should contrast or the outline should contrast (different thicknesses for example).

The understanding article for WCAG SC 1.4.11 has a helpful example. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Mark