pi-ui icon indicating copy to clipboard operation
pi-ui copied to clipboard

High contrast greyscale themes

Open ta-lind opened this issue 3 years ago • 0 comments

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

ta-lind avatar Jan 07 '22 23:01 ta-lind