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