Pinnable item [Completed]
Findings
Summary
-
Text content needs a contrast ratio of: 4.5:1 between text and background -
Color isn't the only means for conveying information -
⚠ ️ States (hover, focus, active) are distinguishable -
⚠ ️ Drag and drop affordance is apparent when reordering pinned items -
Color should remain distinguishable when testing various color blindness conditions -
❌ Text wrapping and truncation do not impact reading (also consider translations) -
Color should remain distinguishable when testing various color blindness conditions (Deuteranopia, Protanopia, Tritanopia)
Failures
- Grab handle icon fails contrast ratio in all themes and states
- Text truncation will occur in some cases
Failure exceptions
- Badge counter background fails contrast ratio in all themes and states, but the text that sits on it passes.
- Missing
:active
state - The blue
:focus
ring fails contrast ratio in Blue theme, but has the white box-shadow as a fallback. - There is some ghosting available for reordering pinned items, but could be improved further like outlined in this article. Follow-up → gitlab-org/gitlab#404596
Observations
- When grabbing a pinned item to reorder the sort, the cursor does not change from the open hand
to the closed hand
Related
- Pin button covered in #1733 (closed)
Text contrast
Item text
font-size: 14px
font-weight: 400
Theme | :default |
:hover |
---|---|---|
Light Gray (default) | text-color: #333238 background-color: #FBFAFD ↳ 12.2:1 AAA
|
text-color: #333238 background-color: #E9E8EC ↳ 10.4:1 AAA
|
Indigo | text-color: #333238 background-color: #F8F8FF ↳ 12:1 AAA
|
text-color: #333238 background-color: #E7E7EE ↳ 10.3:1 AAA
|
Light Indigo | text-color: #333238 background-color: #F8F8FF ↳ 12:1 AAA
|
text-color: #333238 background-color: #E7E7EE ↳ 10.3:1 AAA
|
Blue | text-color: #333238 background-color: #E6ECF1 ↳ 10.7:1 AAA
|
text-color: #333238 background-color: #D6DBE1 ↳ 9.1:1 AAA
|
Light Blue | text-color: #333238 background-color: #EEF3F7 ↳ 11.4:1 AAA
|
text-color: #333238 background-color: #DDE2E7 ↳ 9.7:1 AAA
|
Green | text-color: #333238 background-color: #EEF4EF ↳ 11.4:1 AAA
|
text-color: #333238 background-color: #DDE3DF ↳ 9.8:1 AAA
|
Light Green | text-color: #333238 background-color: #EEF4EF ↳ 11.4:1 AAA
|
text-color: #333238 background-color: #DDE3DF ↳ 9.8:1 AAA
|
Red | text-color: #333238 background-color: #FAF4F3 ↳ 11.7:1 AAA
|
text-color: #333238 background-color: #E8E3E3 ↳ 10:1 AAA
|
Light Red | text-color: #333238 background-color: #FDF9F8 ↳ 12:1 AA
|
text-color: #333238 background-color: #EBE7E8 ↳ 10.4:1 AA
|
Gray | text-color: #333238 background-color: #F6F6F7 ↳ 11.8:1 AAA
|
text-color: #333238 background-color: #E5E5E7 ↳ 10.1:1 AAA
|
Badge text
Theme | :default |
:hover |
---|---|---|
Light Gray (default) | text-color: #535158 background-color: #E9E8EC ↳ 6.4:1 AA
|
text-color: #535158 background-color: #D9D8DC ↳ 5.5:1 AAA
|
Indigo | text-color: #535158 background-color: #E7E7EE ↳ 6.4:1 AA
|
text-color: #535158 background-color: #D7D7DE ↳ 5.5:1 AA
|
Light Indigo | text-color: #535158 background-color: #E7E7EE ↳ 6.4:1 AA
|
text-color: #535158 background-color: #D7D7DE ↳ 5.5:1 AA
|
Blue | text-color: #535158 background-color: #D6DBE1 ↳ 5.6:1 AA
|
text-color: #535158 background-color: #C7CCD2 ↳ 4.8:1 AA
|
Light Blue | text-color: #535158 background-color: #DDE2E7 ↳ 6.8:1 AA
|
text-color: #535158 background-color: #CED2D8 ↳ 5.5:1 AA
|
Green | text-color: #535158 background-color: #DDE3DF ↳ 6:1 AA
|
text-color: #535158 background-color: #CED3D1 ↳ 5.2:1 AA
|
Light Green | text-color: #535158 background-color: #DDE3DF ↳ 6:1 AA
|
text-color: #535158 background-color: #CED3D1 ↳ 5.2:1 AA
|
Red | text-color: #535158 background-color: #E8E3E3 ↳ 6.2:1 AA
|
text-color: #535158 background-color: #D8D3D4 ↳ 5.3:1 AA
|
Light Red | text-color: #535158 background-color: #EBE7E8 ↳ 6.4:1 AA
|
text-color: #333238 background-color: #D8D3D4 ↳ 5.3:1 AA
|
Gray | text-color: #535158 background-color: #E5E5E7 ↳ 6.2:1 AA
|
text-color: #535158 background-color: #D5D5D8 ↳ 5.3:1 AA
|
Non-text contrast
Badge background contrast
Theme |
default / :active
|
:hover |
---|---|---|
Light Gray | foreground-color: #E9E8EC background-color: #FBFAFD ↳ 1.2:1
|
foreground-color: #D9D8DC background-color: #E9E8EC ↳ 1.2:1
|
Indigo | foreground-color: #E7E7EE background-color: #F8F8FF ↳ 1.2:1
|
foreground-color: #D7D7DE background-color: #E7E7EE ↳ 1.2:1
|
Light Indigo | foreground-color: #E7E7EE background-color: #F8F8FF ↳ 1.2:1
|
foreground-color: #D7D7DE background-color: #E7E7EE ↳ 1.2:1
|
Blue | foreground-color: #D6DBE1 background-color: #E6ECF1 ↳ 1.2:1
|
foreground-color: #C7CCD2 background-color: #D6DBE1 ↳ 1.2:1
|
Light Blue | foreground-color: #EEF3F7 background-color: #EEF3F7 ↳ 1.2:1
|
foreground-color: #CED2D8 background-color: #DDE2E7 ↳ 0.0:1
|
Green | foreground-color: #DDE3DF background-color: #EEF4EF ↳ 1.2:1
|
foreground-color: #CED3D1 background-color: #DDE3DF ↳ 1.2:1
|
Light Green | foreground-color: #DDE3DF background-color: #EEF4EF ↳ 1.2:1
|
foreground-color: #CED3D1 background-color: #DDE3DF ↳ 1.2:1
|
Red | foreground-color: #E8E3E3 background-color: #FAF4F3 ↳ 1.2:1
|
foreground-color: #D8D3D4 background-color: #E8E3E3 ↳ 1.2:1
|
Light Red | foreground-color: #EBE7E8 background-color: #FDF9F8 ↳ 1.2:1
|
foreground-color: #DBD7D9 background-color: #EBE7E8 ↳ 1.2:1
|
Gray | foreground-color: #E5E5E7 background-color: #F6F6F7 ↳ 1.2:1
|
foreground-color: #D5D5D8 background-color: #E5E5E7 ↳ 1.2:1
|
Screenshots
Theme |
|
|
|
|
---|---|---|---|---|
Light Gray | ||||
Indigo | ||||
Light Indigo | ||||
Blue | ||||
Light Blue | ||||
Green | ||||
Light Green | ||||
Red | ||||
Light Red | ||||
Gray |
Truncation
Moving pinned items
Color blindness
Deuteranopia | Protanopia | Tritanopia |
---|---|---|
![]() |
![]() |
![]() |
Edited by Austin Regnery