Skip to main content
53 votes

Background for black and white chart

White is giving the appearance as the absence of data. Data visualization is not about what you intend, it's about what they perceive. Black and white have connotations as opposites. Some cultural ...
Mike M's user avatar
  • 24.7k
49 votes
Accepted

Color picker - what to do if the user selects the same color as the background?

You could try adding a transparent black or white border on the inside of the coloured squares. This will look okay for most colors. One drawback of this solution is that the border will be noticeable ...
filip's user avatar
  • 2,675
35 votes

Background for black and white chart

Stacked bar charts often use a darker colour at the bottom and lighter colour at the top. Bolder darker colours look strong and more supportive of what's on top. Your chart bars looks top heavy, with ...
Roger Attrill's user avatar
22 votes

Background for black and white chart

If black and white maps to the colors of the products, then consider outlining the white bar to add some contrast. Some Tips: What to consider when creating stacked column charts
Nicolas's user avatar
  • 5,608
15 votes

Color picker - what to do if the user selects the same color as the background?

One working solution I found on my own was to add a "ring gradient" to the edge of each color, like this: This complimented the shadows in boosting necessary contrast, and the fact that it'...
JS4137's user avatar
  • 483
10 votes

Color picker - what to do if the user selects the same color as the background?

Google doesn't care: They possibly assume that anyone savvy enough to know they need to pick a color will understand that the color they pick might match the background. MS Paint has a gray left and ...
MonkeyZeus's user avatar
  • 5,658
9 votes
Accepted

Grey versus white background for ease of use and readability/legibility

The only benefit of choosing a white background over a light grey background is that it arguably gives you a broader range of text colours that you can use, and still remain within accepted usability ...
Joseph C Lawrence's user avatar
8 votes
Accepted

Background patterns - do or don't?

I'll just quickly point out three points: It'll look less clean. I mean this both figuratively and literally. Anytime you add more visual information to something it becomes more cluttered. This is ...
PixelSnader's user avatar
  • 8,331
6 votes

Recommended color range for background color

Acceptable can be defined as something that is accessible to users. WCAG 2.1 / 1.4.3 Contrast (Minimum) requires contrast ratio between text and background to be 4.5:1 or more. From Understanding ...
locationunknown's user avatar
6 votes
Accepted

Can I Avoid Using Complete/Pure Black Background Color For Dark Mode?

Yes, you can. Dark mode implies the use of very dark hues, just not necessarily pure black. The emphasis in dark mode is on contrast. So as long as you have enough contrast, you will OK. However... If ...
Devin's user avatar
  • 38.1k
5 votes

Color picker - what to do if the user selects the same color as the background?

Use a border with a high contrast opposed to the background color. It doesn't hurt the accessibiltiy if the inner content (chosen color) has a low contrast opposed to the border, but it hurts the ...
jazZRo's user avatar
  • 11.9k
5 votes
Accepted

Mostly white screen (8 hours per day)

On a personal level you could reduce contrast / brightness on your monitor. Re the UX question there are numerous studies regarding reading legibility. Early screen designs had far less contrast than ...
Mayo's user avatar
  • 6,641
3 votes

Mostly white screen (8 hours per day)

By using a light shade of grey as your background, you can then use pure white to highlight or emphasise something. For example on this site, the textbox for writing an answer is pure white and it ...
Martyn's user avatar
  • 2,358
3 votes

Should I use different backgroud colors in my app?

If your themes will be either displayed to one group of users in which one people may use theme 1 in some cases and theme 2 in other cases, It is better to use visually similar themes for both sides. ...
moslem yazdanpanah's user avatar
2 votes

Why does so much software use gray backgrounds, from Windows to Chrome to Mac to almost every other software and website you come across?

Short answer: it helps to reduce eye fatigue. There are three types of cones in the eye, each responsible for sensing a different range of wavelength. If you stare at one particular color for a while,...
maxathousand's user avatar
  • 19.5k
2 votes
Accepted

Why does so much software use gray backgrounds, from Windows to Chrome to Mac to almost every other software and website you come across?

Because it's a neutral color that doesn't strain the eye and allows for good legibility when using black or white fonts, and its neutrality aids to place the focus on the real content window. The ...
Devin's user avatar
  • 38.1k
2 votes

Background patterns - do or don't?

You're probably not going to find data on this, because it's not the kind of things that publishable studies are usually focused on. If you're really lucky, some hyper-productive UXer will have turned ...
dennislees's user avatar
  • 11.6k
2 votes

Should I use different backgroud colors in my app?

So if I understand this correctly you plan to use different colour themes to separate modes. One objective is not confuse the user with the colour changes and don't make him loose focus. ...
Menandros Apostolidis's user avatar
2 votes

What have studies shown about different dark background colours

Whilst I don't have links to any studies regarding this, one great argument for color choice is accessibility. Accessibility takes into consideration color blindness and legibility of your color and ...
RobbyReindeer's user avatar
2 votes
Accepted

Solution to two merging backgrounds

Option 1: It is same color. With opacity of 95% and box-shadow for below bar. Option 2: Just box-shadow of light grey color.
NB4's user avatar
  • 2,501
2 votes
Accepted

Best practice to best illustrate side navbar children

I don't think you'll find any "best practice" for this particular module. But here are some visual cues for the user to better understand the level changes. The change in arrow direction with an ...
Shreyas Tripathy's user avatar
2 votes

Color picker - what to do if the user selects the same color as the background?

The background of the color should be the color it'll be displayed upon. (For instance it looks like the background behind the sample colors is 5F5F5F or thereabouts. If the chosen color will ...
Harper - Reinstate Monica's user avatar
1 vote

Can I Avoid Using Complete/Pure Black Background Color For Dark Mode?

Remember the effect of black on OLED screens, especially when used in complete darkness. True black subjectively looks better, as it produces no light. If you’re doing animation, prefer dark gray due ...
Denis's user avatar
  • 3,373
1 vote

Can I Avoid Using Complete/Pure Black Background Color For Dark Mode?

You should avoid using pure black as a background as it is known that high contrast will strain users' eyes. This also goes for very saturated colors placed on a dark background. For example, Google ...
Chris's user avatar
  • 4,558
1 vote

Can I Avoid Using Complete/Pure Black Background Color For Dark Mode?

Common practice says pure black color provides a higher contrast ratio (in comparison with gray), and that contrast can be painful to look at. I recommend conducting user testing: Identify the most ...
Roman We's user avatar
  • 294
1 vote

Color picker - what to do if the user selects the same color as the background?

To address this issue in apps I develop, I use a generic function which computes the RSS of the difference between the newly selected background (or text) color and compare it to a user-specified ...
Robert W Hoech's user avatar
1 vote

Background for black and white chart

I often like using something like #f5f5f5/#f1f1f1 as a light grey background - this lets white stand out a bit (albeit, subtly). Then I can add a subtle shadow or border to the white object and it ...
Mr DC's user avatar
  • 53
1 vote

Best practice to best illustrate side navbar children

You can make it better just with typography changes: Increasing the left indent Decreasing the font-weight Using the icon color
Danielillo's user avatar
  • 19.2k
1 vote
Accepted

Best practice for multi state Button?

Separate the functions into different buttons. Then you can tell at a glance which is active. As a bonus, you won't need extra colors or icons in your UI. One button for Start, one for Stop. The ...
Ken Mohnkern's user avatar
  • 9,034
1 vote

Best practice for multi state Button?

I would suggest to use a background colour which normally represents these particular actions. Keep it simple - green for starting and red for stopping. As you mentioned you there is a need to wait ...
Salvis Āre's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible