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 Oct 16, 2023 by Austin Regnery