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 |