Which header do you think is better?

  1. Light grey:

enter image description here

  1. White with shadow enter image description here

Let me provide you with a contradictory opinion on what is happening with both backgrounds.

1. GREY BACKGROUND: This background is the same as the page background. So it does not ask for any attention and all the attention is diverted to the page content.

2. WHITE BACKGROUND: This standout from the grey page hence it also asks for attention. Thus the user's attention is divided between the header and the page content.

The final decision rests with you. If the header is not too important i.e functionally then I would suggest the Grey Background. If it is your need to get the user's attention towards the header then White Background.

My preference is GREY BACKGROUND.


There is no significant difference. But the white background version is a little bit better because of:

  1. Contrast Ratio between text-link (Hooman) and the background will be bigger, but those elements have been passed the minimal CR requirements (4.5:1).

enter image description here

  1. Navigation with white BG is more consistent. The local navigation (Public profile, Settings, Payment) and related content have an artboard that is used to separate BG and content area. The same principle can be used for consistency in global navigation.

enter image description here

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