Hamburger menu [Complete]

Findings

Summary 💡

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

Failure ❌

In the default resting state and :active the hamburger icon contrast ratio fails.

Observations 🤔

This button behaves differently than the text ones. Not sure why.

Non-text contrast

When a user is unauthenticated, the breakpoint falls below 768 on SaaS a hamburger menu will appear in the top bar.

default

Icon contrast

• foreground-color: #333238
• background-color: #171321
• ❌ 1.4:1

:hover

Icon contrast

• foreground-color: #FFF
• background-color: #171321
• ✅ 18.2:1

:focus

Icon constrast

• foreground-color: #FFF
• background-color: #171321
• ✅ 18.2:1

Focus ring contrast

• foreground-color: #63A6E9
• background-color: #171321
• ✅ 7.1:1

:active

Icon contrast

• foreground-color: #333238
• background-color: #171321
• ❌ 1.4:1

Focus ring contrast

• foreground-color: #63A6E9
• background-color: #171321
• ✅ 7.1:1

Screenshots

default	:hover	:focus	:active

Color blindness

Type	Screenshot
Deuteranopia
Protanopia
Tritanopia