E-mail List Archives
Thread: Star ratings
Number of posts in this thread: 10 (In chronological order)
From: Radhika Soni
Date: Fri, Oct 22 2021 9:13AM
Subject: Star ratings
No previous message | Next message →
Hi Everyone!
I am looking at most of the sites for star rating they have on PLP and PDp
pages. These star ratings fail for color contrast ratio.
And some sites do have strokes around them, but not a thicker stroke.
So do think the stroke would help to pass for color contrast ratio if the
actual color of the star is failing for color contrast. Looking for
everyone's feedback and viewpoints.
[image: image.png]
Happy Friday!
Regards,
-Radhika
From: glen walker
Date: Fri, Oct 22 2021 2:05PM
Subject: Re: Star ratings
← Previous message | Next message →
Rather than writing my own thoughts on this, there's a decent example on
w3.org
https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating
They have an underline under the highest star selected so that "color only"
is not used as the only indicator.
And the contrast between the blue selected stars and the gray unselected
stars is 3.4:1 so it passes 1.4.11, although the stars don't actually touch
each other so they're not considered "adjacent" colors and 1.4.11 doesn't
really apply.
On Fri, Oct 22, 2021 at 9:13 AM Radhika Soni < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Everyone!
>
> I am looking at most of the sites for star rating they have on PLP and PDp
> pages. These star ratings fail for color contrast ratio.
> And some sites do have strokes around them, but not a thicker stroke.
> So do think the stroke would help to pass for color contrast ratio if the
> actual color of the star is failing for color contrast. Looking for
> everyone's feedback and viewpoints.
>
> [image: image.png]
>
> Happy Friday!
>
> Regards,
> -Radhika
> > > > >
From: Mark Magennis
Date: Tue, Oct 26 2021 3:22AM
Subject: Re: Star ratings
← Previous message | Next message →
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
From: Radhika Soni
Date: Tue, Oct 26 2021 7:33AM
Subject: Re: Star ratings
← Previous message | Next message →
Appreciate all the responses.
And if the outline is not thick enough but has a contrast of 3:1. Is it ok
to provide the rating in text next to stars? SO that color blind users can
know what the rating values are.
Or can we skip the text part?
Thanks a lot!
Regards,
-Radhika
On Tue, Oct 26, 2021 at 5:22 AM Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:
> 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
>
>
From: Mark Magennis
Date: Tue, Oct 26 2021 9:24AM
Subject: Re: Star ratings
← Previous message | Next message →
For WCAG compliance, as long as the contrasts are sufficient you don't need to provide the rating value in text. But for maximum accessibility it is a good idea to do that if you can.
Be careful to consider the screen reader experience too with respect to how the text (or lack of it) is read. It must be absolutely clear what the rating is and there should be no repetition or unnecessary things read. It is more complex if the stars are buttons that you can use to make a rating, because then the whole thing should give all the information in a coherent way both while tabbing through it and while arrowing through it. It can all be made very coherent with a bit of careful design though.
From: Radhika Soni
Date: Tue, Oct 26 2021 9:32AM
Subject: Re: Star ratings
← Previous message | Next message →
But it is the star color which is failing for color contrast but the
strokes around it are passing. But the stroke is not thick enough. Is that
ok?
What else can be done? Any suggestions?
Regards,
-Radhika
On Tue, Oct 26, 2021 at 11:24 AM Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:
> For WCAG compliance, as long as the contrasts are sufficient you don't
> need to provide the rating value in text. But for maximum accessibility it
> is a good idea to do that if you can.
>
> Be careful to consider the screen reader experience too with respect to
> how the text (or lack of it) is read. It must be absolutely clear what the
> rating is and there should be no repetition or unnecessary things read. It
> is more complex if the stars are buttons that you can use to make a rating,
> because then the whole thing should give all the information in a coherent
> way both while tabbing through it and while arrowing through it. It can all
> be made very coherent with a bit of careful design though.
>
>
From: glen walker
Date: Tue, Oct 26 2021 12:53PM
Subject: Re: Star ratings
← Previous message | Next message →
>
> But since the star colour is used to indicate state (checked or not
> checked), then a star also 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).
>
I don't think WCAG 1.4.11 says this. I think it's a great practice to have
different states contrast with each other but WCAG doesn't require it.
1.4.11 starts off by saying "adjacent colors" before it qualifies whether
it's a "User Interface Components" or "Graphical Objects". The key is that
1.4.11 is talking about colors that are literally touching each other.
With states, you typically don't see them at the same time, or in the star
rating example where you *can* see them at the same time, they're not
touching each other so technically they're not "adjacent" and 1.4.11
doesn't apply.
If you take the state by itself and not compared to other states, then any
particular state must have sufficient contrast with its adjacent colors in
order to "identify" (WCAG wording) the state.
That might be a nit pick and perhaps it's just my interpretation, but the
different star states do not have to contrast with each other.
From: Patrick H. Lauke
Date: Tue, Oct 26 2021 12:56PM
Subject: Re: Star ratings
← Previous message | Next message →
whether the selected/filled in stars contrast enough with the non-selected/empty ones is more a 1.4.1 Use of Color issue (see latest update coming in the understanding doc for WCAG 2.2 which bubbles up the "if it's below a 3:1 difference, it counts as color alone)
P
> On 26 Oct 2021, at 19:53, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>
>>
>>
>> But since the star colour is used to indicate state (checked or not
>> checked), then a star also 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).
>>
>
> I don't think WCAG 1.4.11 says this. I think it's a great practice to have
> different states contrast with each other but WCAG doesn't require it.
> 1.4.11 starts off by saying "adjacent colors" before it qualifies whether
> it's a "User Interface Components" or "Graphical Objects". The key is that
> 1.4.11 is talking about colors that are literally touching each other.
> With states, you typically don't see them at the same time, or in the star
> rating example where you *can* see them at the same time, they're not
> touching each other so technically they're not "adjacent" and 1.4.11
> doesn't apply.
>
> If you take the state by itself and not compared to other states, then any
> particular state must have sufficient contrast with its adjacent colors in
> order to "identify" (WCAG wording) the state.
>
> That might be a nit pick and perhaps it's just my interpretation, but the
> different star states do not have to contrast with each other.
> > > >
From: glen walker
Date: Tue, Oct 26 2021 1:31PM
Subject: Re: Star ratings
← Previous message | Next message →
> whether the selected/filled in stars contrast enough with the
> non-selected/empty ones is more a 1.4.1 Use of Color issue (see latest
> update coming in the understanding doc for WCAG 2.2 which bubbles up the
> "if it's below a 3:1 difference, it counts as color alone)
>
Yeah, I was just addressing the 1.4.11 aspect.
1.4.1 is a tricky can of worms. You can get weird situations such as G183
that says color alone is actually ok as long as the colors have sufficient
contrast *and* there's another visual clue upon hover or focus.
Lots of elements use color alone to display a different state. A radio
button might be empty or filled depending on its selection. That's color.
Many navigation menus display the currently selected menu with a different
background color. That's color. Sure, they can have aria-selected or
aria-current or similar, but aria only helps assistive technology. It
doesn't help me see a color better.
But as I said earlier, I think differentiating states is a good thing.
It's just that 1.4.11 doesn't require it.
From: Mark Magennis
Date: Thu, Oct 28 2021 4:03AM
Subject: Re: Star ratings
← Previous message | No next message
Yes Glen I believe you're right that poor state contrast is not necessarily a WCAG failure and if that's a nit pick it's WCAG that's nit picking. I'm not used to working strictly within WCAG requirements so I sometimes I forget some of the details. Thanks for pointing that out.