Visual clarity: contrast of message selection is extremely low

[ghost]

Code of conduct

• I have read and agree to adhere to the Code of Conduct.

Describe the bug

Selected messages have a low contrast compared to unselected messages, making them hard to distinguish.

To reproduce

Fresh install Session Android, default theme, and select some messages.

In the below example, "Hi this is Alice" is selected, "Hi this is Carol" and "Hi this is Bob" are unselected, they look very closely.

The selected messages have a very closed color / darkness compared to unselected messages.
This makes a moderator's life harder because they often need to delete messages in bulk.

Screenshots or logs

Smartphone (please complete the following information):

• Device: [Android Emulator Pixel 6]
• OS: [e.g. Android 13.0]
• Version of Session or latest commit hash: [Session 1.16.5]

Additional context

There are users reporting the message selection visual clarity issue was fixed in some earlier version, but then came back again after theming support was implemented. In other words, it might be a visual regression.

However, on 1.16.3 release note there was

"Make selected message colours more visible, fix classic dark read indicator by @0x330a in oxen-io#1031"

So this could be a disagreement on the sense of visibility as well. At least to me the selected message is not very different to unselected messages.

In any case, visual regression testing is tricky itself. According to [1], "This can result in tens or even hundreds of thousands of potential screens to test".
We might want to investigate specialized testing frameworks for visual regression like [2].

[1] https://applitools.com/blog/visual-ai/
[2] https://percy.io/

[ghost]

Me:

Session is a chat application. There is a visual clarity issue in the message selection feature in a conversation. When a message is selected, its color is too closed to unselected color, making them hard to distinguish. Please suggest some reading material, guidelines, books, articles, examples, tutorials, best practice etc, for designing color schemes of "message selection" feature

ChatGPT:

Designing effective color schemes for the message selection feature in a chat application is an important aspect of user experience design. Here are some resources that you may find helpful:

1. Color Theory: A basic understanding of color theory can be helpful in designing color schemes for user interfaces. You may find the following books and articles useful:

   • "The Elements of Color" by Johannes Itten
   • "Color Index" by Jim Krause
   • "The Psychology of Color in Marketing and Branding" by Singh, K. (2018).

2. Design Guidelines: Guidelines and best practices for designing color schemes in user interfaces can be found in the following resources:

   • Material Design Guidelines by Google: https://material.io/design/color/
   • iOS Human Interface Guidelines by Apple: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

3. Accessibility: Ensuring that the color scheme is accessible to users with visual impairments is important. You may find the following resources helpful:

   • Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/WAI/standards-guidelines/wcag/
   • A11y Color Contrast Checker: https://www.accessibility-checker.com/contrast-checker/ (dead link), should be https://color.a11y.com/ now)
   • Color Palettes: There are many tools and resources available for finding and creating color palettes for user interfaces. Some popular resources are:

4. Adobe Color: https://color.adobe.com/

   • Coolors: https://coolors.co/
   • Palette Generator: https://palettegenerator.dev/ (dead link)
   • Case Studies: Studying real-world examples of effective color schemes in chat applications can be a helpful learning experience. You can find such examples by searching for chat application designs on design showcase websites such as Dribbble or Behance.

By using a combination of these resources, you can gain a better understanding of how to design effective color schemes for the message selection feature in your chat application.

[ghost]

According to https://pickcoloronline.com/

The selected message background color is #1b1c1b
The unselected message background color is #111111

According to https://color.a11y.com/ContrastPair/?bgcolor=1b1c1b&fgcolor=111111

The above pair of colors failed all contrast tests:

[hjubb]

It is simple enough to change these values, documenting it here in case anyone gets to it first or if someone wants to experiment with values to see what would look best:

In the app/src/main/res/values/themes.xml there are four items (one for each theme variant)

    ...
    <item name="message_selected">#VALUE#</item>
    ...

which currently reference the appropriate palette i.e. the ocean dark variant references @color/ocean_dark_1 etc, changing these to either a different shade of that palette like @color/[theme]_[variant]_[0-6] so there's appropriate contrast would fix the issue, alternatively if none of those colours look good we could just use a different colour that fits with the rest of the overall theme

[ghost]

Here is the old color scheme:

Theme	colorPrimary	message_received_background_color	message_selected
Classic.Dark	classic_dark_0	classic_dark_2	classic_dark_1
Classic.Light	classic_light_6	classic_light_4	classic_light_5
Ocean.Dark	ocean_dark_2	ocean_dark_4	ocean_dark_1
Ocean.Light	ocean_light_7	ocean_light_4	ocean_light_6

[ghost]

I did some tweaks and came up with a new scheme, shifted message_selected farther away from colorPrimary while preventing collision with message_received_background_color:

• Classic.Dark: (classic_dark_0, classic_dark_1) -> (classic_dark_0, classic_dark_3)
• Classic.Light: (classic_light_6, classic_light_5) -> (classic_light_6, classic_light_3)
• Ocean.Dark: In theory, I should do the same change but I didn't because it seems good enough already
• Ocean.Light: (ocean_light_7, ocean_light_6) -> (ocean_light_7, ocean_light_5)

Let's call it plan A

Theme	colorPrimary	message_received_background_color	message_selected
Classic.Dark	classic_dark_0	classic_dark_2	classic_dark_3
Classic.Light	classic_light_6	classic_light_4	classic_light_3
Ocean.Dark	ocean_dark_2	ocean_dark_4	ocean_dark_1
Ocean.Light	ocean_light_7	ocean_light_4	ocean_light_5

[ghost]

Plan B

• Classic.Dark | Classic.Light:
  • swap message_selected and message_received_background_color in Plan A, looks less aggressive
• Ocean.Dark | Ocean.Light:
  • same as Plan A

Theme	colorPrimary	message_received_background_color	message_selected
Classic.Dark	classic_dark_0	classic_dark_3	classic_dark_2
Classic.Light	classic_light_6	classic_light_3	classic_light_4
Ocean.Dark	ocean_dark_2	ocean_dark_4	ocean_dark_1
Ocean.Light	ocean_light_7	ocean_light_4	ocean_light_5

[ghost]

I submitted two pull requests, will close one of them based on feedback, feel free to comment / vote.

[KeeJef]

On first glance Plan B looks better to my eye. but I will raise this with our Graphics and UI team and let you know what they think

[KeeJef]

Yeah team agrees on plan B

[hjubb]

Closing after merging fix in oxen-io#1116