5

I have a complicated task. Client would like this grey UI to pop, and problem is, they want greyscale photographs in the background. The photographs are on a fade-carousel and they each have different levels of contrast in the area where client wants the UI to sit.

Is there a good way to make grey pop over top of grey? Drop shadow only seems to do so much, it still gets lost on the background photo.

My pleas for a white-card beneath the UI are not fully welcome, so I really need to find a way to get grey to appear on top of grey.

2 Answers 2

5

I'm assuming the UI popup is gray near the border, and the background picture can have areas of various grays including black and white.

The problem is that the contrast between the UI popup and the background varies unpredictably, and can be zero.
Even the whole border of the popup could be adjacent to background of the same gray level, like when the picture shows a gray sky in that area.

Inverted line does not solve it

One way to separate the areas of popup and background would be adding a line of the inverse color of the adjacent background.
But that can fail near 50% gray, when background and inverse are the same or similar.

I propose to use two separating lines, one black, and one white. Experiment which one should be on the outside. That may be different on the sides, creating a "3D efect".

Example problem

This image shows the problem case, where the UI popup exterior is light gray on a background that is similar to light gray:
The popup is hard to see because there is not much contrast between it and the background image - that's the problem we want to solve:

enter image description here

Source of background image: Preview image of Wikimedia Commons: Selçuk Turkey 2015.

(Note that a large part of what separates the background and the popup is the direction of edges: the popup has only x and y edges, the photographic background has aproximately none.)

Double edge

In the image below, I only added a black and white border, 4px wide.

On top and to the left, two white pixels are at the outside, two black at the inside of the frame. The colors are exchanged on the right and bottom edge.

With this, there will always be contrast at the border of the poup.
Because we put it there.

Separate by 3D border

The arrangement of the white and black lines is choosen to match the expectations of our visual system for an embossed edge with light from top left. It results in a typical "3D appearence", which is useful here, because it supports the separation:

enter image description here

Handles low and high contrast

The separation works good for light gray UI and background colors, but see below for a test with darker background colors giving more contrast - there is not much difference, it works just the same:

enter image description here

4
  • Your pictures show well the issue with the lack of contrast when using grayscale over another grayscale now. You added good examples to your answer.
    – go-junta
    Jun 25, 2015 at 4:34
  • damn, we're also doin flat design so I can't do borders like that. but maybe i can just make a subtle, hardly noticable border Jun 25, 2015 at 23:35
  • Oh, interesting point... Now, the 3D effect is part of the reason of the visual separation. The main idea is to add full contrast, which is just using the black and white lines. The lines do not create a 3D effect in itself - it is the relative orientation of shadows and highlights that is identified as "object with light", when the light source makes sense. The contrast creating lines, just two nested lines in black and white, should not create much of a 3D effect, and do the contrast effect still good enough. Jun 26, 2015 at 0:03
  • Of course, I do not really know the definition of flat design - can you link a styleguide or description of what you use? For example, would it make sense to use wider lines in case the lines still create too much of a 3D-like appearence without the 3D light and shadow setup? Jun 26, 2015 at 0:07
3

Instead of creating a contrast by playing with the dark tones of your pictures, you could do the opposite and "illuminate" some parts.

1) You could use 2 different gray; one made of black for what's on top of your UI and the background could be a monotone of a different gray. This way, the "gray" on top of your design will loo like a darker gray, and the images below will still be gray but their density at 100% will be like a "rich gray." You can do this by using the "duotone" mode in Photoshop and using a gray color instead of black.

Why it's better than using grayscale is because with grayscale, there's a limit to the shade you can add on your picture background; if you go too low, you will lose a lot of details to get to a gray. With a monotone, you can still keep all the details that you would normally see in black, but they'll be gray!

grayscale contrast with gray and black

2) Combined with the method above, you can add a transparent white box below your graphics. I see you mentioned you don't want to use a white box but if you add transparency to it, it might look very soft as effect and can integrate the foreground graphics smoothly with the background images.

grayscale contrast with gray with a white transparent box

3) Again combined with #1, you can also use the drop shadow with a white color instead of using black to illuminate the borders. You could also use the outer glow effect.

grayscale contrast with gray and a white drop shadow or outer glow

PS: These are solutions that can be used easily in software like Photoshop but you can still use some of them with CSS or publishing software. The principle remains the same and you might need to re-adjust the background pictures, if that's an option for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.