[Meta] 🖌️ Increase contrast and add high contrast mode

[jira-to-github-migrator]

Description

We want to improve the accessibility and the UX of our web and native apps by increasing the contrast and optimizing the colors used across the apps. For this purpose we want to increase the contrast generally in the app for interaction elements as well as to introduce a dedicated high contrast mode.

Tasks

• Make 1st level icons seem interactive in normal mode #2779
• Use new primary color for interactive elements #2777
• Add a high contrast mode #2781
• Recolor 1st level icons in high contrast mode #2780
• Add possibility to toggle the high contrast mode #2778

Old description:

There are two possibilities to implement a high contrast mode:

Adapt everything in the forntends:

For images (icons) try this css-filter:

hue-rotate(207.8deg) saturate(2000%) grayscale(100%)

See attachments for examplary result. Drawbacks only, if city uses (realistic) images instead of icons (see Dormagen)

Adjust text weight, color. Adjust horizontal line color.

Add an entry to the toolbar

We also have the icons in SVG format here: https://drive.google.com/drive/folders/12uBcz3YdiElvB1jRshkvYyoKwoYKQ_-F

Involve the cms:

In order to be accessible our icons should be simple SVGs. The current thumbnails are in the post object like this:

thumbnail: "https://...",

The new post object will look like this:

thumbnail: "https://...",
dynamic_thumbnail: "https://...",
color: '#123456'

If the dynamic_thumnail is non-null we use the color flag to generate a custom thumbnail.

There are the Icons in SVG format: https://drive.google.com/drive/folders/12uBcz3YdiElvB1jRshkvYyoKwoYKQ_-F

[jira-to-github-migrator]

Max Ammann - 17.10.2018, 15:07:57

This relates to NATIVE-18. On the xamarin/react-native app a transition on the fly is not really possible and also a bit resource intensive.

We should consider solving this using the api proposal explained in NATIVE-18

EDIT: This information is obsolete. There should be no issue with resources, as we use styled components for styling and an svg transformer for react.

[sarahsporck]

So the main task should be either thinking of a static color pallete or even better using a css-filter to change the colors dynamically to conform to dark mode.

Acceptance Criteria:

• The main content of the app can be displayed in dark mode
• The images should stay the same color as before. If the map changes that's okay.
• Further the app should automatically identify whether the browser uses dark mode and use the dark mode if the browser uses dark mode.
• Whether dark mode is used is persisted in the local storage. So if users return to the website the same setting is used.
• Dark mode can be turned on and off via a button (maybe on the toolbar on the left)

[steffenkleinle]

On more thing to keep in mind: Dark mode does not necessarily mean the same as high contrast mode, so we should be flexible with how many different color modes/themes we have. It should not be limited to 2 modes.

[sarahsporck]

Quick and dirty with css filter invert(90%) and reverting images <3

[steffenkleinle]

Quick and dirty with css filter invert(90%) and reverting images <3

We are now showing nuclear power plants in our map? :D

[sarahsporck]

yep and the purple parts of the map shows the wasteland around them

[dkehne]

I also like to add that we should add a high contrast mode due to accessibility reasons. we primary should be able to re-color the yellow icons (because they are neccessary for navigation). We have them already available as SVGs so we just need logic that leads to re-color them e.g. black.

[steffenkleinle]

Open questions/tasks:

• Color for the 1st level icons
• Theme vs primary/secondary colors for integreat, malte, aschaffenburg
• How to switch between the different color modes?
• Do we want an additional "normal" dark mode?

[nikolahoff]

@steffenkleinle can you open an UX/UI ticket for the open tasks? Thanks!

[steffenkleinle]

@steffenkleinle can you open an UX/UI ticket for the open tasks? Thanks!

@nikolahoff I'd just use this issue for that once we clarified what/how we want to implement this and what the open tasks are in the call. Or would you like to work on this before the call next monday already?

[nikolahoff]

@steffenkleinle no that's fine after the call, thx

[steffenkleinle]

@nikolahoff @dkehne @f1sh1918 any other issues missing here? I added all issues I could think of to the description: #1021 (comment)

[nikolahoff]

@nikolahoff @dkehne @f1sh1918 any other issues missing here? I added all issues I could think of to the description: #1021 (comment)

What about other accessibility items (size & easy language) shall we implement those as well? It would be good to know for the design in advance. @dkehne @steffenkleinle

[nikolahoff]

[dkehne]

Easy Language has to be done by the municipality via the normal translation process and our normal translation selector, so no need here.

The font size is also sth. i would only support on web at the moment so using the normal zoom-keys (Ctrl and +)

So i would argue for a high-contrast mode only

[osmers]

• Do we want an additional "normal" dark mode?

Not sure if I missed the answer to this or not - but I wanted to ask since the Kreis Warendorf forwarded the feedback that a user felt it was missing since he/she was used to it from other apps. Is the dark mode something we are planning to do or "only" the high contrast mode (and could someone give me an example of what that would look like, so I could communicate the plan of introducing this to the municipality?)?

[steffenkleinle]

• Do we want an additional "normal" dark mode?

Not sure if I missed the answer to this or not - but I wanted to ask since the Kreis Warendorf forwarded the feedback that a user felt it was missing since he/she was used to it from other apps. Is the dark mode something we are planning to do or "only" the high contrast mode (and could someone give me an example of what that would look like, so I could communicate the plan of introducing this to the municipality?)?

Not planned at the moment. Do you think they would be willing to pay for this feature? :D

[osmers]

@steffenkleinle I don't think so :D but maybe the high contrast mode is enough/even better for them