Bring back low-contrast colors

[taoeffect]

Problem

Currently in Figma we have High Contrast A11y-compatible colors enabled as the default. For those who don't need high-contrast colors, these don't look as good as the colors we used to have.

Solution

Make it so that by default Figma shows the regular, non-high contrast colors, and add a setting in the Appearance settings to enable high-contrast for all color themes (and create two versions for each color theme, a low-contrast and a high-contrast).

Alternatively, create only low-contrast colors, and see if each platform we support has a sufficiently good High Contrast mode that makes all colors on the screen high contrast.

I know for example both iOS and macOS have this feature, which may mean that @mmbotelho doesn't need to spend time creating two kinds of colors for each theme.

cc @dotmacro

[taoeffect]

Note also: people who require High Contrast colors might already have this system-wide setting enabled, in which case our already-High-Contrast-colors will be superfluous even to these users, and they'll end up using the low-contrast colors too, because upping the contrast on high-contrast just looks ugly.

[mmbotelho]

Note also: people who require High Contrast colors might already have this system-wide setting enabled, in which case our already-High-Contrast-colors will be superfluous even to these users, and they'll end up using the low-contrast colors too because upping the contrast on high-contrast just looks ugly.

I assume you are referring to the iOs high contrast setting. This feature does not work automatically. It increases the contrast in Apple's native apps (like iMessage, Settings, Contacts, etc...) but does not have an effect on third-party apps. It also does not affect web pages. It is the responsibility of the developers and designers of third-party apps and websites to provide accessible web pages. @sandrina-p maybe your input would be valuable here as well.

these don't look as good as the colors we used to have.

I am not sure if this is what you are suggesting (it's not very clear from reading the issue), but I don't think going back to the old colors is a good idea. I understand that the ones we have now are very dark, but the ones before were extremely light. Maybe finding a middle ground would be best?

FYI - here are the colors we had before and their respective contrast ratios:

With contrast ratios this low, even I have trouble reading the text 😂not to mention the eye fatigue that this can cause.

So, long story short - we want colors that are closer to what we had before, but not the ones we had before, right?

@taoeffect

[taoeffect]

So, long story short - we want colors that are closer to what we had before, but not the ones we had before, right?

Yep. Make sure it looks good to your eye as well. If it doesn't pass muster with you, it doesn't go in. 😄

[sandrina-p]

As Margarida said, the high contrast setting of any device (mac, windows, android, etc...) is only applied to the system itself (you can see it as a different theme on its own).

When building a website it is always our responsibility to develop our own themes (in this case the High Contrast). Following WCAG guidelines, we just need to pass level AA as default. Having AAA is only needed through advanced customization.

Btw, it might be useful to know that there are CSS media queries to enhance the UX when it comes to colors and animation.

• Dark Mode in CSS (Safari only) - useful to automatically set the dark theme if the user uses Dark Theme in their macOS.
• Reduce Motion - Some users may want to see fewer animations on the web. This mediaquery allows us to respect that and reduce the number of fancy effects we have across the app.

[mmbotelho]

Dark Mode in CSS (Safari only) - useful to automatically set the dark theme if the user uses Dark Theme in their macOS. Reduce Motion - Some users may want to see fewer animations on the web. This mediaquery allows us to respect that and reduce the number of fancy effects we have across the app.

That's really cool @sandrina-p , thank you for sharing!

Following WCAG guidelines, we just need to pass level AA as default.

Awesome!

[mmbotelho]

Note to self: Think of the possibility of adding colors specific to graphic elements (e.g.: Dashboard, Income details modal)

[mmbotelho]

Our current colors are already passing the minimum requirements for contrast, according to WCAG guidelines. I don't think using colors that have lower contrast than that is a good idea.

Since the team seems to not like them, I can present other alternatives that also respect AA. How does that sound?

@sandrina-p and @taoeffect

[taoeffect]

@mmbotelho certainly interested in seeing what you're considering! Just added the low-priority label to this issue, feel free to remove if you think it shouldn't have been added.

[sandrina-p]

I like the current colors! If this is a low priority, I would suggest @mmbotelho to work on other things with higher priority.