Skip to content

Nav eval > Hamburger button insufficient contrast

Problem

The hamburger button in the unauthenticated has an inaccessible contrast ratio on it's iconography. See investigative issue to learn more.

Solution

Update the hamburger icon to use gray-100 for default and white in :hover, :focus, :active like outlined in the mockups.

State Before After
default default before.png default.png
:hover hover before.png hover.png
:focus focus before.png focus.png
:active active before.png active.png

Bonus: UI polish

  • Follow the Pajamas guidelines for interactive states
  • Swapping for a small button
  • Fixing the secondary focus ring to be white