search

gitpod-io / retired-gatsby-website

Gitpod website and documentation
https://www.gitpod.io/
MIT License
68 stars 75 forks source link

Improve design and accessibility for the hiring banner #992

Closed gtsiolis closed 3 years ago

gtsiolis commented 3 years ago

Problem

The banner added in https://github.com/gitpod-io/website/pull/972 comes with some design color contrast and alignment issues. /cc @nisarhassan12 @JohannesLandgraf

Color Contrast

Text: Currently, the broadcast message for the hiring is failing to pass color contrast ratio tests for WCAG 2.0 guidelines.

  1. The text label (We're hiring) on the blue background fails for WCAG AA (Normal Text) which could be considred a baseline.
  2. The button label (8 Openings) on the blue button fails for WCAG AA (Normal Text) and WCAG AA (Large Text).

Emojis: Besides that, the emojis used contain colors that make them also fail for contrast ratio.

Alignment

Both text labels and the close button are using differenst spacing which makes the buttons and text labels look misaligned.

Label Button
image image

Proposal

Although a) we probably don't want to use a completely different design language compared to the rest of the website an b) such issues will probably be resolved after the redesign, let's try to make this more accessible for now.

  1. Make the baner slightly smaller in height.
  2. Use heavier font weight.
  3. Move the dismiss button out of the container.
  4. Align all elements vertically in the middle.
  5. Use a background color that makes the text accessible, passing WCAG AA for Normal Text.
  6. Make the primary action (button to open roles) stand out more than the dismiss button.
  7. Use the same text recently added in https://github.com/gitpod-io/gitpod/pull/3024.
  8. Consider adding an arrow icon to differentiate from the rest of the action buttons.
  9. We could go with a dark or a light version.
BEFORE AFTER (Dark) AFTER (Light)
image image image
JohannesLandgraf commented 3 years ago

Thanks @gtsiolis 🙇‍♂️ Both Dark and Light are fine for me - feel free to chose what you like best. @nisarhassan12 once George is done pls take over

chrifro commented 3 years ago

Thanks @gtsiolis. I totally agree with your suggestions. I'd prefer the dark version. For context, there is already a pending PR for improvements #984

nisarhassan12 commented 3 years ago

I will fix this in #984

gtsiolis commented 3 years ago

Thanks @nisarhassan12! Let's go with the dark one that @ChristinFrohne suggested in https://github.com/gitpod-io/website/issues/992#issuecomment-772529736. Let me know if you need help with the specs (colors, spacing, icons). 🏀

nisarhassan12 commented 3 years ago

Thanks. @gtsiolis I have made the changes in https://github.com/gitpod-io/website/pull/984. Please review that. For now I have spaced things by estimate please suggest the spacing values if they don't look good to you. For the icon for now I'm using → if that does not look good then please provide the icon. Thanks.

chrifro commented 3 years ago

I'm closing this as #984 got merged.