Seven pager items do not meet WCAG AA 1.4.3 for contrast

Thanks for the colour contrast reports @sdweitt

This has a tag of novice and the extra detail for the specific areas to address is helpful. While I believe this would be a few CSS changes to address, the bigger question I have is if there is someone or a group that needs to be involved from a branding/design perspective to approve. Or if it's simply a matter of increasing the contrast until the threshold is crossed before that warrants a conversation.

If no response, suggestion on moving forward is to just get the patch to review and then it will be quicker to turn around feedback if/when the appropriate stakeholders can provide feedback.

I created a patch based on the previous comment for community review.

+.pager__item.pager__item--ellipsis {

Thank you for the patch.

Can't we just use `.pager__item--ellipsis` instead of the increased specificity?

Thanks for working on this @rickmanelius and @ddavidd.

Or if it's simply a matter of increasing the contrast until the threshold is crossed before that warrants a conversation.

Go for it! Then we'll see how it looks. Before and after screeshots will help. So long as it doesn't disrupt the design too much we'll be fine I think.

Thanks mradcliffe, I added the interdiff.

My Test

• Setup: I provisioned a fresh drupal 8 site, enabled devel generate to make 500+ nodes, and then downloaded the WAVE Chrome plugin.
• Before: WAVE noted 6 contrast errors and caught the issue with the ellipses in the pager (see attachment).
• After: WAVE noted 5 contrast errors and no longer specifies the ellipses as an issue (see attachment).

I believe this along with the previous review by @mradcliffe in #14 and the follow-up modification by @ddavidd in #16 would justify making this RBTC. Looking forward to your thoughts, @andrewmacpherson!

Removed Needs screenshots tag. Added screenshots to summary.

Good work so far. Thanks for the screenshots.

Review of patch from #16:

1.
This fixes the contrast problem for the pager ellipsis, so it passes WCAG 2.0 SC 1.4.3 Contrast (Minimum) at level AA, comfortably over the line. I think the impact on the visual aesthetics is minimal. Good!
Before: contrast ratio 3.36:1
After: contrast ratio 4.6:1

2.

+.pager__item--ellipsis {
+  color: #757575;
+}

I don't think we need to add a whole new ruleset block just for the ellipsis. Instead, we can just update the color for .pager__item. It just happens that the ellipsis is the only kind of .pager__item that doesn't contain a link.

Re: #17,

After: WAVE noted 5 contrast errors and no longer specifies the ellipses as an issue

Some of these are from the primary tabs, which are already being addressed by #2930508: Seven inactive tabs do not meet WCAG AA 1.4.3 for contrast.
The others are invisible text in the toolbar, I think. This might warrant a separate issue, but is out of scope here.

I just removed the ruleset I created and instead updated the .pager__item as suggested in #19. This should do the trick. I updated to 'needs review.'

This needs a re-review and maybe an update on screenshots.

Patch #20 is good IMO.

Screenshot evidence will be good. Keep in mind this is a really subtle colour change which will be hard to see. So, some before AND after screenshots will demonstrate that the change isn't disruptive to the established design. The actual contrast assessment has been done already in #19.

Looks great to me. Here are screenshots showing before/after of WAVE tool output + pager only.

@if-jds Thanks for adding the new screenshots!

The issue summary is still using the older screenshots, based on the patch from #16. I am adding the "Needs issue summary update" tag because we should update the IS with the new screenshots.

Went ahead and added those new screenshots to the IS, based on #20. Hope I'm doing this right (first-time sprinter here)!

Committed a1cbb16 and pushed to 8.6.x. Thanks for everyone who worked on this!