Sidebar button [Completed]

Findings

Summary 💡

⚠ 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
⚠️ Color should remain distinguishable when testing various color blindness conditions (Deuteranopia, Protanopia, Tritanopia)

Failure exceptions 👌

Iconography contrast ratio on :active passes only in Light Gray. This will be marked as an opportunity for improvement since it is not a requirement for WCAG 2.1 AA.
Iconography contrast ratio fails on :hover \ :focus on (Light Indigo, Light Blue, Green, Light Green, and Light Red themes) but other themes are accessible.
Adjacent backgrounds on :hover fails the contrast ratio, however, since the pointer changes in addition to the background of the button that is enough to to indicate an interactive element.
:focus primarily the focus ring is used to evaluate contrast, but in cases where it fails (Light Indigo, Light Blue, Light Green, and Light Red themes) the backup 1px #FFF focus ring is used to compare against it's background.

Observations 🤔

The Light Gray theme uses a mix-blend: multiply giving it a slight different interaction.

Non-text contrast

Icon contrast

Theme	`:default`	`:hover` / `:focus`	`:active`
Light Gray (default)	icon-color: `#535158` background-color: `#FBFAFD` ↳ ✅ `7.5:1` AA	icon-color: `#4F4D54` background-color: `#E0DFE5` ↳✅ `6.3:1` AA	icon-color: `#302F36` background-color: `#D1D0D4` ↳✅ `8.6:1`
Indigo	icon-color: `#c7c7f2` background-color: `#222261` ↳ ✅ `8.8:1` AA	icon-color: `#c7c7f2` background-color: `#575787` ↳ ✅ `4.1:1` AA	icon-color: `#C7C7F2` background-color: `#DCDCDE` ↳❌ `1.2:1`
Light Indigo	icon-color: `#c7c7f2` background-color: `#41419F` ↳ ✅ `5.2:1` AA	icon-color: `#c7c7f2` background-color: `#6E6EB6` ↳ ❌ `2.8:1`	icon-color: `#C7C7F2` background-color: `#DCDCDE` ↳❌ `1.2:1`
Blue	icon-color: `#a6bdd5` background-color: `#0B2640` ↳ ✅ `8:1` AA	icon-color: `#a6bdd5` background-color: `#455A6E` ↳ ✅ `3.7:1` AA	icon-color: `#A6BDD5` background-color: `#DCDCDE` ↳❌ `1.4:1`
Light Blue	icon-color: `#a0bedc` background-color: `#145AA1` ↳ ✅ `3.6:1`	icon-color: `#a0bedc` background-color: `#4C81B7` ↳ ❌ `2.1:1`	icon-color: `#A0BEDC` background-color: `#DCDCDE` ↳❌ `1.4:1`
Green	icon-color: `#8cc497` background-color: `#0E4328` ↳ ✅ `5.6:1` AA	icon-color: `#8cc497` background-color: `#48705B` ↳ ❌ `2.8:1`	icon-color: `#8cc497` background-color: `#DCDCDE` ↳❌ `1.5:1`
Light Green	icon-color: `#8cc497` background-color: `#1B653F` ↳ ✅ `3.5:1` AA	icon-color: `#8cc497` background-color: `#528A6D` ↳ ❌ `2:1`	icon-color: `#8cc497` background-color: `#DCDCDE` ↳❌ `1.5:1`
Red	icon-color: `#e3bab5` background-color: `#580D02` ↳ ✅ `8.1:1` AA	icon-color: `#e3bab5` background-color: `#80473F` ↳ ✅ `4.1:1` AAA	icon-color: `#e3bab5` background-color: `#DCDCDE` ↳❌ `1.3:1`
Light Red	icon-color: `#ebada2` background-color: `#A02E1C` ↳ ✅ `3.8:1` AA	icon-color: `#ebada2` background-color: `#B76052` ↳ ❌ `2.3:1`	icon-color: `#ebada2` background-color: `#DCDCDE` ↳❌ `1.4:1`
Gray	icon-color: `#dcdcde` background-color: `#333238` ↳ ✅ `9.3:1` AA	icon-color: `#dcdcde` background-color: `#646368` ↳ ✅ `4.3:1` AA	icon-color: `#DCDCDE` background-color: `#DCDCDE` ↳❌ `1:1`

Adjacent color comparison

Theme	`:hover`	`:focus`	`:active`
Light Gray (default)	foreground-color: `#E0DFE5` background-color: `#F2F1F4` ↳ ❌ `1.2:1`	foreground-color: `#F2F1F4` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#F2F1F4` ↳ ✅ `3:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#F2F1F4` ↳ ✅ `3:1`
Indigo	foreground-color: `#575787` background-color: `#222261` ↳ ❌ `2.1:1`	foreground-color: `#575787` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#222261` ↳ ✅ `4.2:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#222261` ↳ ✅ `4.2:1`
Light Indigo	foreground-color: `#6E6EB6` background-color: `#41419F` ↳ ❌ `1.8:1`	foreground-color: `#6E6EB6` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#41419F` ↳ ❌ `2.5:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#41419F` ↳ ❌ `2.5:1`
Blue	foreground-color: `#455A6E` background-color: `#0B2640` ↳ ❌ `2.2:1`	foreground-color: `#455A6E` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#0B2640` ↳ ✅ `4.5:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#0B2640` ↳ ✅ `4.5:1`
Light Blue	foreground-color: `#4C81B7` background-color: `#145AA1` ↳ ❌ `1.7:1`	foreground-color: `#4C81B7` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#145AA1` ↳ ❌ `2.1:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#145AA1` ↳ ❌ `2.1:1`
Green	foreground-color: `#48705B` background-color: `#0E4328` ↳ ❌ `2.1:1`	foreground-color: `#48705B` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#0E4328` ↳ ✅ `3.3:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#0E4328` ↳ ✅ `3.3:1`
Light green	foreground-color: `#528A6D` background-color: `#1B653F` ↳ ❌ `1.8:1`	foreground-color: `#528A6D` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#1B653F` ↳ ❌ `1.8:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#1B653F` ↳ ❌ `2.1:1`
Red	foreground-color: `#80473F` background-color: `#580D02` ↳ ❌ `2:1`	foreground-color: `#80473F` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#580D02` ↳ ✅ `4.2:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#580D02` ↳ ✅ `4.2:1`
Light red	foreground-color: `#B76052` background-color: `#A02E1C` ↳ ❌ `1.7:1`	foreground-color: `#B76052` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#A02E1C` ↳ ❌ `2.1:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#A02E1C` ↳ ❌ `2.1:1`
Gray	foreground-color: `#646368` background-color: `#333238` ↳ ❌ `2.1:1`	foreground-color: `#646368` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#333238` ↳ ✅ `3.7:1`	foreground-color: `#E0DFE5` box-shadow: `1px` `#FFF` box-shadow: `3px` `#428FDC` background-color: `#333238` ↳ ✅ `3.7:1`
Unauthenticated	foreground-color: `#292632` background-color: `#171321` ↳ ❌ `1.2:1`	foreground-color: `#292632` box-shadow: `1px` `#00000099` box-shadow: `3px` `#63a6e9` background-color: `#171321` ↳ ✅ `7.1:1`	foreground-color: `#171321` box-shadow: `1px` `#00000099` box-shadow: `3px` `#63a6e9` background-color: `#171321` ↳ ✅ `7.1:1`