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
Nice selection. There’s a fair few more I could have added but there’s plenty of inspiration there.
great list
really like it.
I know u like Giant Creative… But u used it twice 🙂
What about this one with light text on (less than your selection) dark background:
https://www.gasteroprod.com/
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!
perhaps you also check out my blog:
https://www.chrishartmann.com/blog/
#blackgreyredandwhite
@Niki – I agree. Black Estate Vineyard is very nice indeed.
@serge – Whoops. Thanks for pointing that out. It’s fixed now.
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.
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
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!
Beautiful selection!
“Take The Walk” is a great design!
Great list. I love Take the Walk.
Very nice list.
Same as many others, I have used light on dark on my website too! Its my favorite style 😉
https://www.youandigraphics.com
Great list, great inspiration
Wilsoni Institute did the black estate one I think..
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?
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)
Thanks for including me in your article, I appreciate that!
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.
The white on black design is so simple, yet elegant. I could go for a glass of Black Estate wine right now!
Big fan of light on dark sites. White is boring.
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.
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.
Great collection of sites, nice job.
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.
https://www.mdxinteractive.com
I really like the concept behind “Lucas Hirata”. That’s been one of my favourites for teh last couple of years now.