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 backup1px
#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
|
Screenshots
Theme | default |
:hover |
:focus |
:active |
---|---|---|---|---|
Light Gray | ![]() |
![]() |
![]() |
![]() |
Indigo | ![]() |
![]() |
![]() |
![]() |
Light Indigo | ![]() |
![]() |
![]() |
![]() |
Blue | ![]() |
![]() |
![]() |
![]() |
Light Blue | ![]() |
![]() |
![]() |
![]() |
Green | ![]() |
![]() |
![]() |
![]() |
Light Green | ![]() |
![]() |
![]() |
![]() |
Red | ![]() |
![]() |
![]() |
![]() |
Light Red | ![]() |
![]() |
![]() |
![]() |
Gray | ![]() |
![]() |
![]() |
![]() |
Color blindness
Deuteranopia | Protanopia | Tritanopia |
---|---|---|
![]() |
![]() |
![]() |
Edited by Austin Regnery