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

Failure exceptions 👌

  • Chevrons fail contrast ratio when hovered or if the item is active and collapsed. However, it is very close and an opportunity for improvement.
  • Missing :active state
  • Truncation in other languages is possible.

Text contrast

font-size: 14px
font-weight: 400

Theme default :hover / active item
Light Gray (default) text-color: #333238
background-color: #FBFAFD
↳ ✅ 12.2:1 AAA 		text-color: #333238
background-color: #E9E8EC
↳ ✅ 10.4:1 AAA
Indigo text-color: #333238
background-color: #F8F8FF
↳ ✅ 12:1 AAA 		text-color: #333238
background-color: #E7E7EE
↳ ✅ 10.3:1 AAA
Light Indigo text-color: #333238
background-color: #F8F8FF
↳ ✅ 12:1 AAA 		text-color: #333238
background-color: #E7E7EE
↳ ✅ 10.3:1 AAA
Blue text-color: #333238
background-color: #E6ECF1
↳ ✅ 10.7:1 AAA 		text-color: #333238
background-color: #D6DBE1
↳ ✅ 9.1:1 AAA
Light Blue text-color: #333238
background-color: #EEF3F7
↳ ✅ 11.4:1 AAA 		text-color: #333238
background-color: #DDE2E7
↳ ✅ 9.7:1 AAA
Green text-color: #333238
background-color: #EEF4EF
↳ ✅ 11.4:1 AAA 		text-color: #333238
background-color: #DDE3DF
↳ ✅ 9.8:1 AAA
Light Green text-color: #333238
background-color: #EEF4EF
↳ ✅ 11.4:1 AAA 		text-color: #333238
background-color: #DDE3DF
↳ ✅ 9.8:1 AAA
Red text-color: #333238
background-color: #FAF4F3
↳ ✅ 11.7:1 AAA 		text-color: #333238
background-color: #E8E3E3
↳ ✅ 10:1 AAA
Light Red text-color: #333238
background-color: #FDF9F8
↳ ✅ 12:1 AA 		text-color: #333238
background-color: #EBE7E8
↳ ✅ 10.4:1 AA
Gray text-color: #333238
background-color: #F6F6F7
↳ ✅ 11.8:1 AAA 		text-color: #333238
background-color: #E5E5E7
↳ ✅ 10.1:1 AAA

Non-text contrast

Icon review (left side)

Theme default :hover / active item
Light Gray (default) icon-color: #737278
background-color: #FBFAFD
↳ ✅ 4.6:1 AA 		icon-color: #737278
background-color: #E9E8EC
↳ ✅ 3.9:1 AA
Indigo icon-color: #737278
background-color: #F8F8FF
↳ ✅ 4.5:1 AA 		icon-color: #737278
background-color: #E7E7EE
↳ ✅ 3.9:1 AA
Light Indigo icon-color: #737278
background-color: #F8F8FF
↳ ✅ 4.5:1 AA 		icon-color: #737278
background-color: #E7E7EE
↳ ✅ 3.9:1 AA
Blue icon-color: #737278
background-color: #E6ECF1
↳ ✅ 4:1 AA 		icon-color: #737278
background-color: #D6DBE1
↳ ✅ 3.4:1 AA
Light Blue icon-color: #737278
background-color: #EEF3F7
↳ ✅ 4.3:1 AA 		icon-color: #737278
background-color: #DDE2E7
↳ ✅ 3.7:1 AA
Green icon-color: #737278
background-color: #EEF4EF
↳ ✅ 4.3:1 AA 		icon-color: #737278
background-color: #DDE3DF
↳ ✅ 3.7:1 AA
Light Green icon-color: #737278
background-color: #EEF4EF
↳ ✅ 4.3:1 AA 		icon-color: #737278
background-color: #DDE3DF
↳ ✅ 3.7:1 AA
Red icon-color: #737278
background-color: #FAF4F3
↳ ✅ 4.4:1 AA 		icon-color: #737278
background-color: #E8E3E3
↳ ✅ 3.8:1 AA
Light Red icon-color: #737278
background-color: #FDF9F8
↳ ✅ 4.6:1 AA 		icon-color: #737278
background-color: #EBE7E8
↳ ✅ 3.9:1 AA
Gray icon-color: #737278
background-color: #F6F6F7
↳ ✅ 4.4:1 AA 		icon-color: #737278
background-color: #E5E5E7
↳ ✅ 3.8:1 AA

Icon review (right side) - chevrons

Theme At rest :hover / :active
Light Gray (default) icon-color: #89888d
background-color: #FBFAFD
↳ ✅ 3.4:1 AA 		icon-color: #89888d
background-color: #E9E8EC
↳ ❌ 2.9:1
Indigo icon-color: #89888d
background-color: #F8F8FF
↳ ✅ 3.3:1 AA 		icon-color: #89888d
background-color: #E7E7EE
↳ ❌ 2.9:1
Light Indigo icon-color: #89888d
background-color: #F8F8FF
↳ ✅ 3.3:1 AA 		icon-color: #89888d
background-color: #E7E7EE
↳ ❌ 2.9:1
Blue icon-color: #89888d
background-color: #E6ECF1
↳ ❌ 2.954:1 		icon-color: #89888d
background-color: #D6DBE1
↳ ❌ 2.5:1
Light Blue icon-color: #89888d
background-color: #EEF3F7
↳ ✅ 3.1:1 AA 		icon-color: #89888d
background-color: #DDE2E7
↳ ❌ 2.7:1
Green icon-color: #89888d
background-color: #EEF4EF
↳ ✅ 3.2:1 AA 		icon-color: #89888d
background-color: #DDE3DF
↳ ❌ 2.7:1
Light Green icon-color: #89888d
background-color: #EEF4EF
↳ ✅ 3.2:1 AA 		icon-color: #89888d
background-color: #DDE3DF
↳ ❌ 2.7:1
Red icon-color: #89888d
background-color: #FAF4F3
↳ ✅ 3.2:1 AA 		icon-color: #89888d
background-color: #E8E3E3
↳ ❌ 2.8:1
Light Red icon-color: #89888d
background-color: #FDF9F8
↳ ✅ 3.4:1 AA 		icon-color: #89888d
background-color: #EBE7E8
↳ ❌ 2.9:1
Gray icon-color: #737278
background-color: #F6F6F7
↳ ✅ 3.3:1 AA 		icon-color: #737278
background-color: #E5E5E7
↳ ❌ 2.8:1

Focus ring

Theme :focus
Light Gray (default) foreground-color: #E9E8EC
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #FBFAFD
↳ ✅ 3.3:1
Indigo foreground-color: #E7E7EE
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #F8F8FF
↳ ✅ 3.2:1
Light Indigo foreground-color: #E7E7EE
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #F8F8FF
↳ ✅ 3.2:1
Blue foreground-color: #D6DBE1
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #E6ECF1
↳ ❌ 2.8:1
Light Blue foreground-color: #DDE2E7
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #EEF3F7
↳ ✅ 3.1:1
Green foreground-color: #DDE3DF
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #EEF4EF
↳ ✅ 3:1
Light green foreground-color: #DDE3DF
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #EEF4EF
↳ ✅ 3:1
Red foreground-color: #E8E3E3
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #FAF4F3
↳ ✅ 3.1:1
Light red foreground-color: #EBE7E8
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #FDF9F8
↳ ✅ 3.2:1
Gray foreground-color: #E5E5E7
box-shadow: 1px #FFF
box-shadow: 3px #428FDC
background-color: #F6F6F7
↳ ✅ 3.1:1

Screenshots

Theme default / :active :hover :focus
Light Gray CleanShot 2023-09-29 at 14.42.25.png CleanShot 2023-09-29 at 14.42.22.png CleanShot 2023-09-29 at 14.42.02.png
Indigo CleanShot 2023-09-29 at 14.43.31.png CleanShot 2023-09-29 at 14.43.35.png CleanShot 2023-09-29 at 14.43.38.png
Light Indigo CleanShot 2023-09-29 at 14.44.22.png CleanShot 2023-09-29 at 14.44.26.png CleanShot 2023-09-29 at 14.44.28.png
Blue CleanShot 2023-09-29 at 14.44.48.png CleanShot 2023-09-29 at 14.44.52.png CleanShot 2023-09-29 at 14.44.54.png
Light Blue CleanShot 2023-09-29 at 14.45.17.png CleanShot 2023-09-29 at 14.45.21.png CleanShot 2023-09-29 at 14.45.24.png
Green CleanShot 2023-09-29 at 14.45.43.png CleanShot 2023-09-29 at 14.45.46.png CleanShot 2023-09-29 at 14.45.49.png
Light Green CleanShot 2023-09-29 at 14.45.43.png CleanShot 2023-09-29 at 14.45.46.png CleanShot 2023-09-29 at 14.45.49.png
Red CleanShot 2023-09-29 at 14.46.37.png CleanShot 2023-09-29 at 14.46.40.png CleanShot 2023-09-29 at 14.46.43.png
Light Red CleanShot 2023-09-29 at 14.47.18.png CleanShot 2023-09-29 at 14.47.20.png CleanShot 2023-09-29 at 14.47.22.png
Gray CleanShot 2023-09-29 at 14.47.45.png CleanShot 2023-09-29 at 14.47.49.png CleanShot 2023-09-29 at 14.47.52.png

Color blindness

Deuteranopia Protanopia Tritanopia
CleanShot 2023-09-29 at 14.53.32.png CleanShot 2023-09-29 at 14.53.27.png CleanShot 2023-09-29 at 14.53.14.png
Edited by Austin Regnery