Why some websites put a small contrasting bar on top of the page?

Question

I've observed this pattern in practice at many places now, websites put a small contrasting bar on the top of the page. What is the rationale behind it?

Readability header:

Tenderapp header:

Answer 1

I think it's part aesthetics - as @marcintreder suggests - and part visual anchoring. The horizontal bar is a cue that the page is scrolled all the way to the top - which is especially useful in "light"/"minimal"/"uncluttered" designs without so many other cues.

Answer 2

Can't think of any. It's probably aesthetics. Recently I've been split-testing top-bars of large eCommerce website. The reason was changes made due to visual aesthetics

Results:

• top of the top bar wasn't making any statistically significant difference in conversion (cpc business model, large sample - more than 0,5 mln people), no matther if it was pale or dark, with high contrast;
• bar splitting top bar from the content (contains breadcrumbs) was making difference in conversion (small in plus) if it has high contrast;

Answer 3

I think as @agib said, it anchors the top of the page, but I wonder whether it is also serving to create a visual separation from the toolbars and stuff at the top of browsers - it indicates that the page stuff starts here. On the sort of minimalist pages that you link to, this might be sigificant - on SE sites, there is a top header bar in a distinctive colour that serves the same purpose, as well as being the header for the site.