Global Search [Completed]
Findings
Summary
Only focused on the controls that are unique to the search results context sidebar
-
⚠ 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 -
Text wrapping and truncation do not impact reading (also consider translations) -
Color should remain distinguishable when testing various color blindness conditions (Deuteranopia, Protanopia, Tritanopia)
Failure exceptions
- The link button will fail contrast ratio in themes other than Light Gray. This will be an opportunity for improvement since it is not a problem in the default theme.
Observations
- No
:active
state on radios and checkbox items. - Reset filters button has no rounded edges. Not using proper styling of a button.
- Same challenges as other items with focus rings and background colors.
Text contrast
Fields
Theme | default |
---|---|
Light Gray (default) | text-color: #333238 background-color: #FBFAFD ↳ 12.2:1 AAA
|
Indigo | text-color: #333238 background-color: #F8F8FF ↳ 12:1 AAA
|
Light Indigo | text-color: #333238 background-color: #F8F8FF ↳ 12:1 AAA
|
Blue | text-color: #333238 background-color: #E6ECF1 ↳ 10.7:1 AAA
|
Light Blue | text-color: #333238 background-color: #EEF3F7 ↳ 11.4:1 AAA
|
Green | text-color: #333238 background-color: #EEF4EF ↳ 11.4:1 AAA
|
Light Green | text-color: #333238 background-color: #EEF4EF ↳ 11.4:1 AAA
|
Red | text-color: #333238 background-color: #FAF4F3 ↳ 11.7:1 AAA
|
Light Red | text-color: #333238 background-color: #FDF9F8 ↳ 12:1 AA
|
Gray | text-color: #333238 background-color: #F6F6F7 ↳ 11.8:1 AAA
|
Apply button
primary |
disabled |
|
---|---|---|
Default | text-color: #FFF background-color: #1F75CB ↳ 4.7:1 AA
|
text-color: #737278 background-color: #FBFAFD ↳ 4.6:1 AA
|
:hover / :focus
|
text-color: #FFF background-color: #1068BF ↳ 5.6:1 AA
|
|
:active |
text-color: #FFF background-color: #0B5CAD ↳ 6.7:1 AA
|
Link
Theme |
default / :hover / :focus
|
:active |
---|---|---|
Light Gray (default) | text-color: #1F75CB background-color: #FBFAFD ↳ 4.5:1 AA
|
text-color: #0B5CAD background-color: #FBFAFD ↳ 6.4:1 AA
|
Indigo | text-color: #1F75CB background-color: #F8F8FF ↳ 4.4:1
|
text-color: #0B5CAD background-color: #F8F8FF ↳ 6.3:1 AA
|
Light Indigo | text-color: #1F75CB background-color: #F8F8FF ↳ 4.4:1
|
text-color: #0B5CAD background-color: #F8F8FF ↳ 6.3:1 AA
|
Blue | text-color: #1F75CB background-color: #E6ECF1 ↳ 3.9:1
|
text-color: #0B5CAD background-color: #E6ECF1 ↳ 5.6:1 AA
|
Light Blue | text-color: #1F75CB background-color: #EEF3F7 ↳ 4.2:1
|
text-color: #0B5CAD background-color: #EEF3F7 ↳ 6:1 AA
|
Green | text-color: #1F75CB background-color: #EEF4EF ↳ 4.2:1
|
text-color: #0B5CAD background-color: #EEF4EF ↳ 6:1 AA
|
Light Green | text-color: #1F75CB background-color: #EEF4EF ↳ 4.2:1
|
text-color: #0B5CAD background-color: #EEF4EF ↳ 6:1 AA
|
Red | text-color: #1F75CB background-color: #FAF4F3 ↳ 4.3:1
|
text-color: #0B5CAD background-color: #FAF4F3 ↳ 6.4:1 AA
|
Light Red | text-color: #1F75CB background-color: #FDF9F8 ↳ 4.5:1 AA
|
text-color: #0B5CAD background-color: #FDF9F8 ↳ 6.4:1 AA
|
Gray | text-color: #1F75CB background-color: #F6F6F7 ↳ 4.4:1
|
text-color: #0B5CAD background-color: #F6F6F7 ↳ 6.2:1 AA
|
Non-text contrast
Apply button
Theme | default |
:hover / :focus
|
:active |
---|---|---|---|
Light Gray (default) | border: #1068BF background-color: #FBFAFD ↳ 5.4:1
|
border: #064787 background-color: #FBFAFD ↳ 8.9:1
|
border: #033464 background-color: #FBFAFD ↳ 12:1
|
Indigo | border: #1068BF background-color: #F8F8FF ↳ 5.3:1
|
border: #064787 background-color: #F8F8FF ↳ 8.8:1
|
border: #033464 background-color: #F8F8FF ↳ 11.8:1
|
Light Indigo | border: #1068BF background-color: #F8F8FF ↳ 5.3:1
|
border: #064787 background-color: #F8F8FF ↳ 8.8:1
|
border: #033464 background-color: #F8F8FF ↳ 11.8:1
|
Blue | border: #1068BF background-color: #E6ECF1 ↳ 4.7:1
|
border: #064787 background-color: #E6ECF1 ↳ 7.8:1
|
border: #033464 background-color: #E6ECF1 ↳ 10.5:1
|
Light Blue | border: #1068BF background-color: #EEF3F7 ↳ 5:1
|
border: #064787 background-color: #EEF3F7 ↳ 8.3:1
|
border: #033464 background-color: #EEF3F7 ↳ 11.2:1
|
Green | border: #1068BF background-color: #EEF4EF ↳ 5:1
|
border: #064787 background-color: #EEF4EF ↳ 6:1
|
border: #033464 background-color: #EEF4EF ↳ 11.2:1
|
Light Green | border: #1068BF background-color: #EEF4EF ↳ 5:1
|
border: #064787 background-color: #EEF4EF ↳ 8.3:1
|
border: #033464 background-color: #EEF4EF ↳ 11.2:1
|
Red | border: #1068BF background-color: #FAF4F3 ↳ 5.1:1
|
border: #064787 background-color: #FAF4F3 ↳ 8.5:1 AA
|
border: #033464 background-color: #FAF4F3 ↳ 11.5:1
|
Light Red | border: #1068BF background-color: #FDF9F8 ↳ 5.3:1
|
border: #064787 background-color: #FDF9F8 ↳ 8.9:1 AA
|
border: #033464 background-color: #FDF9F8 ↳ 12:1
|
Gray | border: #1068BF background-color: #F6F6F7 ↳ 5.2:1
|
border: #064787 background-color: #F6F6F7 ↳ 8.6:1 AA
|
border: #033464 background-color: #F6F6F7 ↳ 11.6:1
|
Screenshots
Condition | default |
:hover |
:focus |
:active |
---|---|---|---|---|
Issues with radio buttons | ||||
Archived filter with apply disabled | ||||
Labels input |
Edited by Austin Regnery