Do Samsung's Marshmallow skin Quick toggles have enough contrast?

Question

I recently updated to Marshmallow, and I'm not happy with the blue over white scheme in daylight conditions. My question is if it's just me, or if this is documented and studied somewhere?

If so, how can this be solved? I haven't found a way to change these colors.

Edit I have a Samsung Galaxy S6

Edit

• Accepted answer for UX explanation
• Bounty for solving my problem

Answer 1

In short, NO, they do not have enough contrast.

According to Web Content Accessibility Guidelines (WCAG) they mostly do not have enough contrast. Only 1 out of 8 tests gets a pass.

But the dark blue text on light gray background mostly passes.

---

But there are other factors

In essence, we should be comparing icons to whole words, not individual letters. So using text-contrast tools might not give the right answer.

Spacing, amount and complexity These icons have ample whitespace. Not only inside the button itself, but also between the buttons. Paragraph text consists of many more symbols, densely packed. Even a title is usually a dozen or so characters versus just five icons By that metric, these icons are very large 'words', so they fall outside of the "Normal Text" and "Large Text" categories.

(fun sidenote, even the red text of that color contrast checker is bigger than the listed categories)

Forms and distribution Icons also tend to have different kinds of shapes. Letters/fonts tend to be line-based, single-object, and have a more consistent distribution. Whereas icons are more often multiple shapes (all except GPS in this case), and they have larger, more distinct shapes (triangle of the speaker, triangle of the arrow), and can ave very different weight distribution (compact speaker icon, hollow screen-rotation icon).

Size matters Based on what I said earlier (look at words, not letters) that difference is even stronger. If a line in a letter is thinner than one in a letter-sized icon, the difference is even larger with a word-sized icon. It's like comparing Chinese and English:

不 not, 年 year

While the symbols are more complex and need to be printed larger, you also need less.

Resolution matters Even in comparison to the text in your screenshot, and ignoring the difference in pixelsize between my PC and your phone. So what I currently see, what's big enough for me, might not be good enough for a phone.

---

My opinion?

While not unusable, it looks slightly too low contrast to be nice.

It's both too complex and not enough contrast. I don't as much mean the complexity of the icons, those are fine. Except perhaps the lock symbol on the screen rotation icon. Anyway - the complexity is in the color palette:

There are (at least) 8 main colors in that screenshot, some nearly indiscernible. Why are the bottom background, right half of the brightness slider, and the faded color of the GPS icon not the same? They should be and at a glance they seem to be, but as my palette shows, they're not.

---

A possible solution

Here's a quick edit that both adresses contrast/legibility, and the unnecessarily large palette. It's also arguably easier to process and easier on the eyes because I unified each buttons' colors. And I believe it's more balanced due to not having the big void caused by much whitespace.

By increasing the amount of colored pixels, you increase the contrast of that object versus the background. This makes it much easier to discern the type of blue.

It also removes two colors; white, and light-ish gray. So now you've only got 3 colors for the background and buttons instead of 5. Furthermore it creates a slightly stronger link between used/unused options. The ⛭ and V menus are dark blue, and they're possibilities you currently don't use. So I've made that the inactive button color, whereas active settings are bright blue. (I just notice that the tickbox for auto-brightness could also be bright blue.)

---

Edit: Even simpler palette

Another tweak, replacing the bright blue with the dark blue, and using medium for the inactive buttons. Yet more simple, only 4 colors, but I feel it's a bit flat and faded overall - even after making the dark blue a bit more saturated. The difference between active and inactive toggles is easier to see now, but the link of 'unused' between inactive toggles and the ⛭ V menu options is lost.

Answer 2

Your device is not stock Android.

That theme will be something that is set by your device manufacturer and not by Marshmallow/Google.

I agree that the colours are very pale and would be difficult so see in daylight. I am sure there is going to be a way to update/install a different, darker theme.

This is why people like the idea of going with Google devices few benefits are :

• Updates are delivered to Google Products first (Nexus/Pixel etc)
• No manufacturer gets to plaster their own branding or colours or themes etc on the operating system.
• Google build the Android OS with their devices in mind, so the hardware often performs very well on their operating system, considering it might be a lower specification device.

I have a Nexus which runs Marshmallow and Stock Android which looks like this...

A quick Google around, I found a theme called "Material Dark Theme" which works on Samsung Galaxy S6

http://forum.xda-developers.com/galaxy-s6/themes-apps/wip-material-design-theme-s6e-t3108155