Stunning Examples of Light On Dark Web Design

By / Jan 19, 2009 / Inspiration
shares

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

Tapbots

Black Estate Vineyard

Black Estate Vineyard

Jan Sochor Photography

Jan Sochor Photography

Mark Dearman

Mark Dearman

tictoc family

tictoc family

mediocore

mediocore

auditude

auditude

Inca un calator

Inca un calator

Edit Studios

Edit Studios

Lucas Hirata

Lucas Hirata

Krista’s Creations

Krista's Creations

Take The Walk

Take The Walk

SpaceCollective

SpaceCollective

Aten Design Group

Aten Design Group

nclud

nclud

Dan Tobolic

Dan Tobolic

sroown

sroown

Giant Creative

Giant Creative

Nine Lion

Nine Lion

Revyver Labs

Revyver Labs

Brand Storm

Brand Storm

Elysium Burns

Elysium Burns

Kanchi

Kanchi

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

26 Comments

  1. Nathan Beck
    January 19, 2009

    Nice selection. There’s a fair few more I could have added but there’s plenty of inspiration there.

    Reply
  2. serge
    January 19, 2009

    great list
    really like it.

    I know u like Giant Creative… But u used it twice :)

    Reply
  3. Nicolas Hoizey
    January 19, 2009

    What about this one with light text on (less than your selection) dark background:

    http://www.gasteroprod.com/

    Reply
  4. Niki Brown | The Design O’Blog
    January 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!

    Reply
  5. chrishartmann
    January 19, 2009

    perhaps you also check out my blog:
    http://www.chrishartmann.com/blog/

    #blackgreyredandwhite

    Reply
  6. Henry
    January 19, 2009

    @Niki – I agree. Black Estate Vineyard is very nice indeed.

    @serge – Whoops. Thanks for pointing that out. It’s fixed now.

    Reply
  7. Timothy
    January 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.

    Reply
  8. Leroy Fernandes
    January 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

    Reply
  9. NetOperator Wibby
    January 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!

    Reply
  10. Fubiz
    January 19, 2009

    Beautiful selection!

    Reply
  11. bretagne photo
    January 19, 2009

    “Take The Walk” is a great design!

    Reply
  12. Daus
    January 20, 2009

    Great list. I love Take the Walk.

    Reply
  13. Irene Demetri
    January 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

    Reply
  14. Lee Munroe
    January 21, 2009

    Great list, great inspiration

    Reply
  15. TIm
    January 25, 2009

    Wilsoni Institute did the black estate one I think..

    Reply
  16. Anna
    February 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?

    Reply
  17. Ramona
    February 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)

    Reply
  18. Sean Baker
    February 20, 2009

    Thanks for including me in your article, I appreciate that!

    Reply
  19. photofolio
    February 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.

    Reply
  20. Suwat
    April 28, 2009

    The white on black design is so simple, yet elegant. I could go for a glass of Black Estate wine right now!

    Reply
  21. web design gold coast
    June 2, 2009

    Big fan of light on dark sites. White is boring.

    Reply
  22. whut
    July 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.

    Reply
  23. skippy
    July 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.

    Reply
  24. Bradley Davis
    August 26, 2009

    Great collection of sites, nice job.

    Reply
  25. Markus
    November 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

    Reply
  26. Eduardo
    September 29, 2010

    I really like the concept behind “Lucas Hirata”. That’s been one of my favourites for teh last couple of years now.

    Reply

Leave a Reply