Skeleton loader > Increase contrast

Problem

The skeleton loader graphically represents something meaningful while it's displayed, and for that reason should have sufficient contrast (3:1 foreground to background). The loader itself isn't disabled, nor does it represent disabled or non-interactive content. Instead it's a graphical representation of content.

Solution

Increase the opacity of the SVG fill to achieve at least a 3:1 contrast ratio. Note: Dark UI is out of scope for this issue.

While this is quite a change (more than double the necessary opacity from the current state), keep in mind that skeleton loaders should be used minimally and appear for a short time. If it's agreed that the intent is to communicate something, then it should satisfy WCAG SC 1.4.11 Non-text Contrast which states:

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Before	After
#00000012	#00000042

View proposed design in Figma →

Reference

https://adrianroselli.com/2020/11/more-accessible-skeletons.html

Previous description

When adding the skeleton loader component to our Figma library (gitlab-design#888 (closed)), we decided that it would be better to use transparent colors instead of the current opaque colors. You can see the design specs here (the gradient is not detailed here): https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Globals-beta?node-id=2844%3A0

Transparent colors allow for a better contrast regardless of the background. Additionally, this is a good step towards having both a light and dark UI.

	Current	Proposed
Fill (primary-stop)	#dfdfdf	Black 16% opacity
Pulsing gradient wave (secondary-stop)	#f2f2f2	Black 8% opacity