Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

High contrast greyscale themes #414

Open
ta-lind opened this issue Jan 7, 2022 · 0 comments
Open

High contrast greyscale themes #414

ta-lind opened this issue Jan 7, 2022 · 0 comments

Comments

@ta-lind
Copy link
Member

ta-lind commented Jan 7, 2022

Figma specs/preview: https://www.figma.com/file/P2K1mJMDNyuzZGl1tAvdxP/dcr---piui---grayscale-high-contrast?node-id=0%3A1

This template is based around a new color scheme consisting of greyscale values for the background layout elements and type, as well ~25% desatured key colors (blue, green, orange, etc). The key colors are desaturated in order to better facilitate their use in a greyscale scheme, thus would need to be applied across all components and icons.

This template applies for both dark and light mode and if implemented should be ideally activated via a selection (checkbox) in the settings. This way the quick toggle between light / dark mode remains functional.

This theme isn't a 1 to 1 translation, but can overall increase and decrease contrast where needed. In these 4 examples I tried to decrease the amount of colors used across components, removing some of the nuances which are currently present. So in practice the theme could be dialed even slightly further in contrast.

General aim is to practice minimum of 5:1 ... 7:1 AAA WCAG contrast levels through-out the themes.

Desktop Screenshot 2022 01 08 - 01 36 26 21
Desktop Screenshot 2022 01 08 - 01 36 30 87

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants