: Am I using too much gray on my webapp? I'm creating a mobile app that will be used by maturer people, 40 to 60 yo, so I've been searching for sober colors and I came to gray, the problem

@Cofer715

YES, your app is using to much grey

Deuteranopia is the common color blindness. About 6% of the male population will see status indicators as 'grey' and 'grey'.

I used Color Oracle to simulate the effect:



You should make the status indicator also distinguishable by using shape, icons or text label. E.g. checkmark for green (okay) and a cross for red (error).

Vote Up Vote Down

@Si6392903

I don't think it's too gray; your red and green add some accent and adding more than this could end up being too much actually! You could use some black too, it could add a nice fancy touch and lot of contrast.

But what I find too gray is your buttons at the bottom; they seem to not be pure white on gray but light gray! This lack of contrast. My suggestion is to use a bold font in white, make your buttons' background dark gray or even black, and use an easy to recognize symbol for the delete/edit/save (eg. a X, a Pencil, a check mark.) Make these buttons wider! You have room for it.


Another suggestion: PUT THE DELETE button with a lot of space between it and the
2 other buttons to make sure the users don't press the delete by
mistake! The Save and Edit can be close together, and the delete at the aligned totally to the right and far from these 2.


The other thing is the gray circle of the numbers and the numbers; that too lacks of contrast and is hard to read! Again you could add the background without gradient and in dark gray or black, with a big bold white number on top of this. Maybe you could even use the color status and make these numbers centered in a green or red square instead; that would define each line and status very easily!

Suggestion: you could also center vertically the content in your rows! That would leave more room around each elements in each row and will be easier to quickly identify what is what. The date could be bigger too if it's an important data on your app.

Finally, I like the light background like you did for different rows, it makes them very easy to differentiate and it's clear!

Vote Up Vote Down

@Holmes874

Your issue isn't "use gray or not". Rather, there are several issues you need to think about and likely spend time tweaking before you even dive back into the issue of color:


contrast. your list? good contrast. The buttons at the bottom? Terrible contrast.
emphasis. Do you really want 'Save' and 'Delete' buttons to have the same emphasis (or in this case, lack thereof?)
white space. the app could be improved by considering adding white space. Give elements room to breath. This is especially important on mobile where 'hit targets' need to be larger. It's majorly important if your demographic is pushing 60 years old as dexterity can begin to suffer.
layout. I'm not seeing a lot of logic to the relation of elements on the page. Why is status to the right and below the time, for example?
accessibility. There are some accessibility issues here. Namely the font size is very small, and you are using only colors to indicate status (which won't work for anyone that is color blind).
"chart junk". There appears to be design elements that aren't necessary. Do you need all the gradients? Do you need the bold zebra stripes on the table? Rethink those. I think you can simplify the look even more.


I'd suggest you go back to the drawing board. Really play with some different ideas and layouts. Don't worry about color yet. Nail the layout first.

Vote Up Vote Down

@Sent7350415

I feel like it drains the charm from any other colours used. I personally only stick to two different grays, both light, and never gradient them.

Vote Up Vote Down