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`