Stunning Examples of Light On Dark Web Design
Deciding when to use light text on a dark background in web design should always be about enhancing the content and the user experience. Here are some stunning examples of light on dark designs where the designers achieved this while maintaining excellent contrast and readability.
Tapbots
Black Estate Vineyard
Jan Sochor Photography
Mark Dearman
tictoc family
mediocore
auditude
Inca un calator
Edit Studios
Lucas Hirata
Krista’s Creations
Take The Walk
SpaceCollective
Aten Design Group
nclud
Dan Tobolic
sroown
Giant Creative
Nine Lion
Revyver Labs
Brand Storm
Elysium Burns
Kanchi
Related Posts
Here's some other articles that you will definitely find useful.
50 Inspiring Textured Web Designs
Adding Depth with Pixel Perfect Line Work
10 Tips for Writing Better CSS
10 Absolute Best Web Design Galleries
10 Super Useful Tools for Choosing the Right Color Palette
Jan 19, 2009
Nice selection. There’s a fair few more I could have added but there’s plenty of inspiration there.
Jan 19, 2009
great list
really like it.
I know u like Giant Creative… But u used it twice
Jan 19, 2009
What about this one with light text on (less than your selection) dark background:
http://www.gasteroprod.com/
Jan 19, 2009
I really love the Black Estate Vineyard site. Nice contrast and its built on the 960 grid system.
Thanks for the list! Bookmarked and dugg!
Jan 19, 2009
perhaps you also check out my blog:
http://www.chrishartmann.com/blog/
#blackgreyredandwhite
Jan 19, 2009
@Niki – I agree. Black Estate Vineyard is very nice indeed.
@serge – Whoops. Thanks for pointing that out. It’s fixed now.
Jan 19, 2009
Very good list. Much appreciated.
It’s good to see this trend becoming more serious. Any computer-based design (application, website, etc) in the past was not dark. This was because older CRT displays often do not display dark screen correctly. The light colors do not mix well, text is hard to read and colors (include the darks and grays) do not appear the right colors. This is why Vista developers opted for the classic Windows colors as the default scheme. They wanted, originally, to use the dark / black theme as the default.
But now we are at the point that most users are using LCD or newer CRTs, so this isn’t much of a problem. I love to see people moving towards mediums that make designing easier, better and allows for greater creativity.
Jan 19, 2009
Nice list of sites up here.
I too have used the light on dark scheme, using orange and black.
Check it out http://www.fuelmediaworks.com
Jan 19, 2009
This is a nice collection. I’ve known about Revvyer for a while [and, they have nice resources for download]. I came across Brand Storm by accident a few weeks ago.
@ Leroy: Your site looks pretty good man!
Jan 19, 2009
Beautiful selection!
Jan 19, 2009
“Take The Walk” is a great design!
Jan 20, 2009
Great list. I love Take the Walk.
Jan 20, 2009
Very nice list.
Same as many others, I have used light on dark on my website too! Its my favorite style
http://www.youandigraphics.com
Jan 21, 2009
Great list, great inspiration
Jan 25, 2009
Wilsoni Institute did the black estate one I think..
Feb 8, 2009
It’s interesting that most of the best looking light on dark websites are those of the designers themselves (whether they be portfolio or studio sites). I wonder whether this is an indication that generally, the consumers find them difficult to use?
Feb 12, 2009
My web designer used it to terrific advantage on my website, even though I was a bit afraid for readability. With the jewelry and the photos, it looks great. (www.WristRocks.com)
Feb 20, 2009
Thanks for including me in your article, I appreciate that!
Feb 24, 2009
Nice to see some other approaches. Main reason I followed this on my own photography site is to give the pix a bit more punch then if they were on a white background. The dark tones make it mostly look a bit somber though.
Apr 28, 2009
The white on black design is so simple, yet elegant. I could go for a glass of Black Estate wine right now!
Jun 2, 2009
Big fan of light on dark sites. White is boring.
Jul 21, 2009
Do you notice this website is light bg with dark text? lol
Light on dark is NOT good for blogs or sites with extensive content as the strain on the eyes is just too much. It IS ok for small word content or photo sites as reading is not a major point of the site.
Jul 29, 2009
There are polls all over the net about light on dark vs dark on light, but whenever the question is asked about preference, people automatically start talking about white on black vs black on white, which isn’t the same thing.
White and black are complete opposites. I find the contrast high for me either way and can never read either one for very long.
Light on dark, however, say white on a dark gray – or dark on light with say, black on a soft taupe or something – I have no trouble reading all day long.
I think people should also talk about other factors like the font size and style. I think that matters even more than the colors in terms of readability.
Aug 26, 2009
Great collection of sites, nice job.
Nov 28, 2009
You should also check out this one. It’s done with a 4 column grid uses good typography and has beautiful photoshopped images in the header and footer.
http://www.mdxinteractive.com