Sign in or sign up before continuing. Don't have an account yet? Register now to get started.

Pin button [Completed]

Findings

Summary 💡

Icons and other non-text interactive elements need a 3:1 contrast ratio against the background
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)

Observations 🤔

Missing white box-shadow
Icon and background do not get darker on focus

Icon contrast

Theme	`:default`	`:hover` / `:focus`	`:active`
Light Gray (default)	foreground-color: `#69686F` background-color: `#E9E8EC` ↳ ✅ `4.5:1`	foreground-color: `#4C4A51` background-color: `#D8D7DD` ↳ ✅ `6.1:1`	foreground-color: `#2F2D34` background-color: `#C9C8CD` ↳ ✅ `8.2:1`
Indigo	foreground-color: `#686770` background-color: `#E7E7EE` ↳ ✅ `4.5:1`	foreground-color: `#4C4A51` background-color: `#D6D6DF` ↳ ✅ `6:1`	foreground-color: `#2E2D34` background-color: `#C7C7CF` ↳ ✅ `8.1:1`
Light Indigo	foreground-color: `#686770` background-color: `#E7E7EE` ↳ ✅ `4.5:1`	foreground-color: `#4C4A51` background-color: `#D6D6DF` ↳ ✅ `6:1`	foreground-color: `#2E2D34` background-color: `#FFF` ↳ ✅ `8.1:1`
Blue	foreground-color: `#61626A` background-color: `#D6DBE1` ↳ ✅ `4.4:1`	foreground-color: `#46464E` background-color: `#C6CBD3` ↳ ✅ `5.7:1`	foreground-color: `#2B2B31` background-color: `#B9BDC4` ↳ ✅ `7.5:1`
Light Blue	foreground-color: `#64656D` background-color: `#DDE2E7` ↳ ✅ `4.4:1`	foreground-color: `#484850` background-color: `#CDD1D9` ↳ ✅ `5.9:1`	foreground-color: `#2C2C33` background-color: `#BFC3C9` ↳ ✅ `7.8:1`
Green	foreground-color: `#646569` background-color: `#DDE3DF` ↳ ✅ `4.5:1`	foreground-color: `#48484D` background-color: `#CDD2D1` ↳ ✅ `5.9:1`	foreground-color: `#2C2D31` background-color: `#BFC4C2` ↳ ✅ `7.8:1`
Light Green	foreground-color: `#646569` background-color: `#DDE3DF` ↳ ✅ `4.5:1`	foreground-color: `#48484D` background-color: `#CDD2D1` ↳ ✅ `5.9:1`	foreground-color: `#2C2D31` background-color: `#BFC4C2` ↳ ✅ `7.8:1`
Red	foreground-color: `#69656B` background-color: `#E8E3E3` ↳ ✅ `4.5:1`	foreground-color: `#4C484E` background-color: `#D7D2D5` ↳ ✅ `6:1`	foreground-color: `#2E2D32` background-color: `#C8C4C6` ↳ ✅ `7.9:1`
Light Red	foreground-color: `#6A676D` background-color: `#EBE7E8` ↳ ✅ `4.5:1`	foreground-color: `#4C4950` background-color: `#D9D6D9` ↳ ✅ `6.1:1`	foreground-color: `#2F2D33` background-color: `#CBC7CA` ↳ ✅ `8.1:1`
Gray	foreground-color: `#67666D` background-color: `#E5E5E7` ↳ ✅ `4.5:1`	foreground-color: `#4B4950` background-color: `#D4D4D9` ↳ ✅ `6:1`	foreground-color: `#2E2D33` background-color: `#C6C6C9` ↳ ✅ `0.0:1`

Screenshots

Theme	`default`	`:hover`	`:focus`	`:active`
Light Gray
Indigo
Light Indigo
Blue
Light Blue
Green
Light Green
Red
Light Red
Gray

Deuteranopia	Protanopia	Tritanopia

Edited Oct 11, 2023 by Austin Regnery