Shortcut buttons (Issues/Merge Request/To-Do list/Search or go to...) [Completed]

Findings

Summary 💡

⚠️ Text content needs a contrast ratio of: 4.5:1 between text and background
⚠ Icons and other non-text interactive elements need a 3:1 contrast ratio against the background or sibling elements (logos and avatar images are excluded)
Color isn't the only means for conveying information
⚠️ States (hover, focus, active) are distinguishable
Text remains readable and layout doesn't break when text (font size) is scaled up to 200 percent
Text wrapping and truncation do not impact reading (also consider translations)
Color should remain distinguishable when testing various color blindness conditions

Failure exceptions 👌

Text contrast will fail in some themes (Light Blue, Light Green, Light Red :hover) but there are other accessible themes available.
Icon contrast will fail in some themes (Light Indigo :hover, Light Blue, Green :hover, Light Green, Light Red) but there are other accessible themes available.
No difference between the :active state and default

Related link 🔗

Focus ring was evaluated in the top row buttons like #1710 (closed)

Text contrast

size: 12px (counts) / 14px (search or go to...)
font-weight: 400

Theme	`default`	`:hover`
Light Gray (default)	text-color: `#333238` background-color: `#fbfafd` ↳ ✅ `12.2:1` AA	text-color: `#333238` background-color: `#E0DFE5` ↳✅ `9.6:1` AA
Indigo	text-color: `#f1f1ff` background-color: `#46467A` ↳ ✅ `7.8:1` AAA	text-color: `#fff` background-color: `#575787` ↳ ✅ `6.7:1` AA
Light Indigo	text-color: `#f1f1ff` background-color: `#6060AE` ↳ ✅ `5:1` AA	text-color: `#fff` background-color: `#6E6EB6` ↳ ✅ `4.6:1`AA
Blue	text-color: `#cdd8e3` background-color: `#32495F` ↳ ✅ `6.4:1` AA	text-color: `#fff` background-color: `#455A6E` ↳ ✅ `4.9:1` AA
Light Blue	text-color: `#dde6ee` background-color: `#3A75B0` ↳ ❌ `3.8:1`	text-color: `#fff` background-color: `#4C81B7` ↳ ❌ `4.1:1`
Green	text-color: `#dde9de` background-color: `#35614B` ↳ ✅ `5.7:1` AA	text-color: `#fff` background-color: `#48705B` ↳ ✅ `5.6:1` AA
Light Green	text-color: `#dde9de` background-color: `#407E5E` ↳ ❌ `3.8:1`	text-color: `#fff` background-color: `#528A6D` ↳ ❌ `4:1`
Red	text-color: `#f4e9e7` background-color: `#73342B` ↳ ✅ `7.8:1` AAA	text-color: `#fff` background-color: `#80473F` ↳ ✅ `7.3:1` AAA
Light Red	text-color: `#faf2f1` background-color: `#AF5040` ↳ ✅ `4.7:1` AA	text-color: `#fff` background-color: `#B76052` ↳ ❌ `4.4:1`
Gray	text-color: `#ececef` background-color: `#545358` ↳ ✅ `6.5:1` AA	text-color: `#fff` background-color: `#545358` ↳ ✅ `5.1:1` AA

Non-text contrast

Icon review

Theme	`default`	`:hover`
Light Gray (default)	icon-color: `#737278` background-color: `#FBFAFD` ↳ ✅ `4.6:1` AA	icon-color: `#737278` background-color: `#E0DFE5` ↳✅ `3.6:1` AA
Indigo	icon-color: `#c7c7f2` background-color: `#46467A` ↳ ✅ `5.3:1` AA	icon-color: `#c7c7f2` background-color: `#575787` ↳ ✅ `4.1:1` AA
Light Indigo	icon-color: `#c7c7f2` background-color: `#6060AE` ↳ ✅ `3.4:1` AA	icon-color: `#c7c7f2` background-color: `#6E6EB6` ↳ ❌ `2.8:1`
Blue	icon-color: `#a6bdd5` background-color: `#32495F` ↳ ✅ `4.8:1` AA	icon-color: `#a6bdd5` background-color: `#455A6E` ↳ ✅ `3.7:1` AA
Light Blue	icon-color: `#a0bedc` background-color: `#3A75B0` ↳ ❌ `2.5:1`	icon-color: `#a0bedc` background-color: `#4C81B7` ↳ ❌ `2.1:1`
Green	icon-color: `#8cc497` background-color: `#35614B` ↳ ✅ `3.5:1` AA	icon-color: `#8cc497` background-color: `#48705B` ↳ ❌ `2.8:1`
Light Green	icon-color: `#8cc497` background-color: `#407E5E` ↳ ❌ `2.4:1`	icon-color: `#8cc497` background-color: `#528A6D` ↳ ❌ `2:1`
Red	icon-color: `#e3bab5` background-color: `#73342B` ↳ ✅ `5.3:1` AA	icon-color: `#e3bab5` background-color: `#80473F` ↳ ✅ `4.1:1` AA
Light Red	icon-color: `#ebada2` background-color: `#AF5040` ↳ ❌ `2.7:1`	icon-color: `#ebada2` background-color: `#B76052` ↳ ❌ `2.3:1`
Gray	icon-color: `#dcdcde` background-color: `#545358` ↳ ✅ `5.6:1` AA	icon-color: `#dcdcde` background-color: `#646368` ↳ ✅ `4.3:1` AA

Backgrounds

Default has a very small border that is imperceptible, so the main button background was utilized.

Theme	`default` / `:active`	`:hover` / `:focus`
Light Gray	foreground-color: `#FBFAFD` background-color: `#F2F1F4` ↳ ❌ `1.1:1`	foreground-color: `#E0DFE5` background-color: `#F2F1F4` ↳ ❌ `1.2:1`
Indigo	foreground-color: `#46467A` background-color: `#222261` ↳ ❌ `1.6:1`	foreground-color: `#575787` background-color: `#222261` ↳ ❌ `2.1:1`
Light Indigo	foreground-color: `#6060AE` background-color: `#41419F` ↳ ❌ `1.5:1`	foreground-color: `#6E6EB6` background-color: `#41419F` ↳ ❌ `1.8:1`
Blue	foreground-color: `#31485E` background-color: `#0B2640` ↳ ❌ `1.6:1`	foreground-color: `#455A6E` background-color: `#0B2640` ↳ ❌ `0.0:1`
Light Blue	foreground-color: `#3A75B0` background-color: `#145AA1` ↳ ❌ `1.4:1`	foreground-color: `#4C81B7` background-color: `#145AA1` ↳ ❌ `1.7:1`
Green	foreground-color: `#35614B` background-color: `#0E4328` ↳ ❌ `1.6:1`	foreground-color: `#528A6D` background-color: `#0E4328` ↳ ❌ `1.8:1`
Light Green	foreground-color: `#407E5E` background-color: `#1B653F` ↳ ❌ `1.5:1`	foreground-color: `#528A6D` background-color: `#1B653F` ↳ ❌ `1.8:1`
Red	foreground-color: `#73342B` background-color: `#580D02` ↳ ❌ `1.5:1`	foreground-color: `#80473F` background-color: `#580D02` ↳ ❌ `2:1`
Light Red	foreground-color: `#AF5040` background-color: `#A02E1C` ↳ ❌ `1.4:1`	foreground-color: `#B76052` background-color: `#A02E1C` ↳ ❌ `0.0:1`
Gray	foreground-color: `#545358` background-color: `#333238` ↳ ❌ `1.7:1`	foreground-color: `#646368` background-color: `#333238` ↳ ❌ `0.0:1`