Claro Shortcuts star fails WCAG Use of Color and Non-text contrast

Created on 18 September 2020, over 4 years ago
Updated 15 May 2023, over 1 year ago

Problem

The shortcuts star icon doesn't satisfy WCAG Success Criteria 1.4.1 "Use of Color", or 1.4.11 "Non-text contrast".

  • The grey outline of the star is too faint. It has a contrast ratio of just 2.78:1 against the grey page background.
  • The yellow fill isn't sufficiently distinguishable from the transparent fill. The contrast between the yellow and the grey page background is 1.29:1.
  • The yellow-fill is the only indication of state. On it's own, it isn't a reliable signifier. Even if these did have good contrast in the full-colour situation, the state can still be difficult for some users to notice: users with a colour vision impairment, or other visual impairments, or who have adjusted the colour space in some way, or where the screen is overpowered by ambient light.
  • When a Windows high-contrast theme is used, the star remains the same colour. We cannot rely on either the grey outline or the yellow fill to be distinguishable from the page background, because we cannot know what the background colour will be.
  • The Star is missing entirely in IE 11 when a Windows High Contrast theme is used. It's a CSS background image, and it gets stripped out by the browser. Users cannot perceive, operate, or understand it; they likely won't know it's there at all.
πŸ› Bug report
Status

Needs work

Version

10.1 ✨

Component
ShortcutΒ  β†’

Last updated 3 months ago

  • Maintained by
  • πŸ‡¨πŸ‡¦Canada @jibran
Created by

πŸ‡ΊπŸ‡ΈUnited States dyannenova

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024