In this tutorial, we'll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.
Then when you're finished reading this tutorial, you can cross over to our sister site NETTUTS and follow along as we build the design into clean and simple HTML. OK let's rock'n'roll!
The End Design
First the design we'll be putting together. (Click the image below for a larger view)
It's quite an elegant design, which would probably suit a designer portfolio-type site, but really could be altered for all sorts of purposes. It relies on having elegant typography, a structured layout, and a visually interesting background.
The real power of this design is to show you what can be accomplished by keeping it simple. At the end of this Photoshop part of the tutorial, I'll show you how we can easily swap backgrounds and fonts and explain why this design works well.
It's a simple structure: horizontal menu, main heading panel, and content area. Although this is a homepage design, you could imagine an interior page would simply have a different heading panel and new content area. For the purposes of simplicity, we'll only be putting together the homepage design.
Step 1
First of all, create a new document. Mine is 1100px wide x 1100px high. This is so that I can create a Web site made for 1024px wide, but still have space to decide what is going to happen outside the viewable area so that it degrades nicely even on larger screens.
Now our first task is to create a nice abstract background. To do this we'll draw a linear gradient down using these two colors: #1b204c to #472373.
Step 2
Now we want a visually interesting background which is abstract enough that it doesn't distract from the text. Fortunately, there is an awesome watercolor image available free via GoMedia's Arsenal, click on the freebie section and you'll find two watercolors; the one we want is the greenish one.
Now while it's very pleasant as is, it's much cooler if we press CTRL+I and invert it so it's that nice pink/purple on black.
Step 3
Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to a reasonable size. Our aim here is to have it fade to black on the right (so that we can build our HTML later with greater ease). Additionally, we don't want it too long vertically, either, so it's best to erase a little of the excess. To do this grab a paint brush and paint in black to just remove the bottom parts.
Note that it's best to get a brush that has some texture so it's not obvious that we erased parts. If you scroll down your brush list, there is a brush that comes with Photoshop that looks like the one shown. It's not a bad brush to use. Of course, you might have some even nicer paint brushes and feel free to use those.
When you're done, fill in any areas on the right and bottom with black so that the whole canvas is covered by this layer.
Step 4
Now decrease the opacity of the watercolor layer to about 70% and set its blend mode to Overlay. That way, some of the coloring passes through to create a nicer look.
Step 5
Now in a new layer above the watercolor layer, and drawing straight up, make a Linear Gradient going from black to transparency so that afterwards your canvas basically fades to black down the bottom.
Step 6
Next in two new layers, draw a couple of Radial Gradients from white to transparency, one larger than the other. Set these to Overlay and 40% and 100% Opacities for the larger and smaller ones respectively.
Basically, you should be making a highlight on our image to give it a bit more texture.
Step 7
So here's the finished background. It's dark, abstract, and quite elegant with the coloring. Of course, pink might not be your particular choice of color usually, and if that's the case, feel free to add a color adjustment layer on top and use it to adjust the coloring. I kinda like the pink/purple, so am going to run with it!
Step 8
Now we create a new layer and add a "logo". I don't really have a purpose with this design, so I decided just to put some text in and pretend that's my logo. Because this tutorial is half PSDTUTS and then half NETTUTS, I wrote out a neat little "psd vs net".
The fonts I'm using here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version of the font is what I've used for the 'vs').
To make the 'vs' bit raise up a little you can use the baseline control in the Character Palette (shown in the second image below).
Finally, I also added a little layer style to the text with a faint Gradient Overlay as shown and a 1px Inner Glow with white.
Step 9
Now at this point, I switched on my Rulers (Ctrl+R) and drew a couple of guides. I divided my page into three columns with lines at 50px, 320px, 610px, 900px. At least those are the numbers I should have used. Looking at my screenshot I just realized my third line is off ... d'oh!
Anyways, the point is that I'm defining the space I'll be placing all me elements in, and if I were to make multiple pages I could use this grid in different ways. As it is, with only the homepage being designed, I'm just going to use those three columns once—a little later on.
Step 10
OK, so now we draw in our first black box. With your rulers and guides still on, create a new layer and draw a Rectangular Marquee (M) going from one side to the other. Fill it with black, then set this layer to 80% Opacity, right-click the layer, and choose Blending Options. Then click on Stroke and add a 1px white stroke on the Outside and set to Overlay. This will give us a really cool border that will make the box look much sharper.
Step 11
Now duplicate the box layer, and using Ctrl+T, transform the box so that it's the same width but much shorter (as shown below). This will be our navigation box.
Change the Opacity to 40% and the Fill to 50%. This will make our box much fainter and give some depth to the two boxes, making one seem more important and imposing than the other.
This sort of contrast between the two boxes is a great way of setting visual precedence between elements. When the user comes to the page, we want them to see our big message first, and then the navigation bar. By having it faded out we tell the user that the less prominent one is to be looked at second.
Step 12
OK, now we add some text. Again I've used Egyptian Light here for the big headline copy (that will be an image in the final HTML) and Arial for the menu items (that will be HTML text links).
Now a word on typography. This design relies heavily on the fact that we've used a simple, clean typeface. Having the text nice and large makes it appear very bold, but at the same time because it's a very thin typeface, it comes out looking elegant.
If you're looking for a high-end design look, thin, classic typefaces are hard to beat. When I first discovered Helvetica Ultralight, I remember I went crazy designing all these designs that looked really minimal and up-market.
Additionally, this particular font—Egyptian—has a very sharp, slab serif, combined with a sort of squarishness that makes it look quite cool (I think).
There are plenty of other awesome fonts you could use. As a general rule though, you want something more classic looking. Or in other words, unless you know what you're doing, you'd want to stay away from really weird looking fonts—e.g. something that looks very futuristic. Actually as a good, general rule, unless you're super confident, it tends to be better to veer towards more ordinary fonts.
Another kind of typeface that would work really well here is something that is a a bit technology-looking like this font that Chris Garrett Media uses. I have no idea what font that is, or what that type of font is called, but it's pretty neat. Maybe a kind typophile might illuminate us in the comments :-)
Step 13
Anyhow, after seeing Chris Garrett Media's site, I decided it would be pretty cool to add a gradient overlay to my type and give it a bit of a shine. So as you can see below, here we're adding a Gradient Overlay from black to white, faded out a bit and on Overlay mode.
Step 14
Now we can draw an additional big black box for the content area. Actually, you can just duplicate the earlier layer and transform it again.
And that gets us to the point shown in the image below. Looking pretty cool!!
Step 15
Now we add a bit of dummy content in the content box. Here I've again used Arial for most of the text, but for the headings rather than use Egyptian, I've gone with Georgia. Georgia is not quite as elegant, but is a standard font which means I can make these headings in plain old HTML instead of relying on images (or Flash).
Actually, with Windows Vista's release there is also another semi-standard font that would work well here called Cambria. But Cambria has some weird rendering problems in Firefox on Macs at certain sizes, so we'll stick with good ol' Georgia for the moment.
Step 16
Finally, I created a new layer at the bottom, filled it with a dark purplish color, added a 1px border to the top, and voila we have a footer.
Ready for Building
Putting it all together, the site is ready to build.
Alternate Background 1
Now one of the cool things about this design is we can easily swap the background and the design still looks awesome. Here's I've swapped it for an image from iStockPhoto called Passion, with a similar color scheme. It's a very cool 3D rendering of light, and like our current background, it is also abstract and visually beautiful.
Alternate Background / Colours 2
Here I've used another abstract image from iStockPhoto called Blue Energy. Because the color has changed, I've also gone through and amended the colors in a few places—particularly the text—and also added a big glow to the main copy.
Why it Works
Now it's unlikely you're ever going to have need of this exact design—now that I've written a whole tutorial on it. So let's talk a little about why it works well, because that will help you use the principles to create your own unique look.
There are several things that come together to make a design that works here:
- First, I've picked really stunning backgrounds. The ones from iStock and the one from GoMedia would make nice images all by themselves. They are interesting to look at but they don't fight for dominance. They also all fade out really easily. Photos that fade out easily are always easier to work with.
- Great images are the perfect partner for simple and clean typography. Because the images are so lovely, you don't need to do overdo it with the typography. It can just be clean, clear, and organized.
- Another factor that goes into making this work is that there is plenty of space. With a complicated background, it would be easy to wind up looking cluttered. So it's important to make sure there is plenty of space between things, and inside the boxes, and so on. Space also is a great way of making a design look more high-end. Nothing screams low-end like clutter.
Of course, there are plenty more things we could talk about like color and precedence, but I think the main design things you should be looking at here are the typography in conjunction with the background. As a final statement to that end, here is a little image that says it all :-)
Now the HTML/CSS
Now enough of this nambi-pambi Photoshop stuff, let's go do some HTML/CSS! Follow on to the second part of this tutorial where we build our design into a working Web site over at NETTUTS—Web Development Tutorials!
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )homs April 26th
Collis your great
i love you, no homo
me April 26th
hm .. jeah simply done .. but there aren´t so much effeckts !
anyway ist ok
Gino April 26th
Very great tutorial, I love this design!
Andrew D April 26th
Awesome tutorial, the web ones are my favorites.
Ali April 26th
Wow, it’s amazing how methods so simple can create something so visually appealing, luv it. It bothers me that I didn’t think of it
lol. I guess I gotta work harder when it comes to execution & creativity. Great Tutorial.
Erika April 26th
Love it, guys!
Constantin Potorac April 26th
I am just in love with simple and your designs Collis just blow me away.
Thank you
Rybaxs April 26th
wow… I like the design, impressive! i love also the background
BogDinamita April 26th
cant wait to try my own
Alen April 26th
This is great. A lot to learn from both tuts.
Shane April 26th
Collis - many, many thanks for this website-related tutorial. A fantastic end-result and tips along the way.
Danny April 26th
This is a very beautiful design. However it’d be great if you could write a tutorial for a design without a great picture. I understand that this tutorial is for porfolio-type sites, so it will be a little flashier, but I think a tutorial emphasizing the layout/design more so than the image or background would complement this tutorial very well! Keep up the great work
Razvan April 26th
Good sutff, awesome tutorial!
Lamin Barrow April 26th
Awesome stuff. Keep them coming.
Qbrushes April 26th
Good stuff mate!..
Rohil Sinha April 26th
This fucking rocks !! Thanks guys !
Harry April 26th
I have not done it yet but it will be awesome!
Bruce Alrighty April 26th
Excellent job Collis.
Keep them coming.
Sean Hodge April 26th
Really great design. I love the imagery and transparency.
1984 April 26th
With that interests me most is the creation of the design of a blog or a website.
I can say that this comes at a tutorial !
Thank you collis us have shared this tutorial free !
it would be good if PDSTUTS be translated into several languages.
The site win in popularity.
giackop April 26th
collis you are great.. this simple design is just awesome.. like your personal site.. simple and terrific
warlord April 26th
Stop using anti-alias on fonts only safari (wich is totally not cool) does that. Besides it’s not standard.
All the best.
Arnaud April 26th
Cool design
Nick April 26th
Beautiful!
sub April 26th
gah, as pretty as that is, i hate sites that do that without having any meaningful content. it’s pure wankery.
Ali April 26th
Very helpful in tuning this with the nettut tutorial.
thanks
Ben Griffiths April 26th
Awsome layout, I love it.
D. Carreira April 26th
Great Design! Thanks for another great tutorial!
David Carreira
*Jul!e April 26th
Great tut ! Thanks a lot !
Misa April 27th
I believe that in the first step, the second gradient color is #472323, and not #472373.
Ben Jacob April 27th
Grate designs.. I like them.
Daniel April 27th
Nice cross over tutorial! great job!
goldenthunder April 27th
haha so simple, yet so BEAUTIFUL! You rock Collis!
Edward April 27th
Nice tutorial. I liked the way how you blended PSDTuts with NETTUTS.
Cheers!
Dave April 27th
Thanks for the tutorial, looking forward to doing both.
FYI - your gradients are off in that first background step. Either the hex codes are wrong, or your picture is wrong. The hex codes are two purples, while the picture has a brown.
Kakumei88 April 27th
I was doing this tutorial and I came across a problem… In step 9, whenever I push CTRL+R, I don’t get the actual pixels on the edges of the box… I get the numbers 1 through 3 and no actual pixel count.
I’m not sure if it is CS3 that does that or something else. I would appreciate any help at all.
Also, thanks a lot for the awesome tutorial! I can’t wait to actually use this on an actual website!
Nicole April 27th
Beautiful! And I love the cross-over between site. That’s some business brilliance at work there. Bravo!
forman April 27th
This tut is a MONSTER!
ZaFaR April 27th
Good Job! I am loving how PSDTuts is growing. Keep up the good work and ideas! just great!
your tut come to my reader in a perfect time. soo simple, and soo cool. this site is getting better and better Collis, keep them coming
thanks a lot,
MONSTER April 27th
Great design tactics that can be implemented quickly…. I really find this tutorial useful.
Keep ‘em coming.
nate April 27th
Thanks dood!
Sean C. April 27th
Perfect timing! I’ve been looking for inspiration for my soon-to-be portfolio site and this will help greatly!
Thanks!
Fahad M. April 27th
I’m really new to stuff like this…and I want to make the site centered.
I tried downloading your layout to see how it looks centered…but the images are all messed up, even after downloading the images and putting them in the same folder.
So the question is…how do I make the layout centered? I don’t want just a simple answer like “put at the beginning and at the end…” because I’ve already tried.
Besides that, this layout is beautiful! Really nice work.
aGS April 27th
Nice layout, good explained tutorial, good choices for backgrounds (images)… it is clear that you know what you guys are doing… the only thing I have to disagree is: “simple typography with a beautiful image will get you a long way as a designer”… I don’t know… I guess it’s “sounds” very “easy” to succeed as a designer… not sure if that is right…
Thanks for the inspiration.
krashsquad April 27th
I’m lovin’ it!
eric April 27th
Can’t wait to see you turn this into code…I need to do more photoshop designin and crank out some sweet backgrounds like that.
barat April 27th
Not bat for a template… it can be used for wordpress… but ar You sure, that dark font on dark background is a good idea? IMO it decreases readability …
b00m April 27th
Very nice
Constantin Potorac April 27th
I am looking to change my portfolio and these web designs are very useful.
Lauren April 27th
L-O-V-E it! Reinforced the fact I really do need to commit to a broader library of fonts.
john April 27th
wow this is one of the nicest designs I have seen!
Jacob April 27th
Consistently nice stuff on here. Keep up the good work!
Rob April 27th
Nice, but here’s the problem. It’s not Google’able .. you’ll never get search rankings with pure graphics sites.
If a blind person’s screen reader cannot read it, then Google cannot either..
mediter April 27th
Just one proposal: would you guys create a print style sheet for PSDTuts & NETTuts ?
You have got so many great tutorials here, most of which are graphic-intensive, which translates to longer page-loading time. So once a reader’s browser finished loading one tutorial, the reader can save it as PDF using that Save As … button from the print sheet in Mac OS X or print it out for archiving and save us the trouble of having to wait for the tutorial to loaded again in the browser. Wouldn’t that be nice ?
Plus there is a good chance these PDF documents will get passed onto readers’ friends.
What do you think, PSDTuts readers ?!
Thank you very much for all the great tutorials here, PSDTuts !
veronika April 27th
nice work! and it’s funny you’ve used exactly this brushwork as background image - from the collection it was in, this was by far the most beautiful.
Matt Gregory April 27th
Awesome! I wish I could design sites like that. This tutorial just might inspire me to learn how.
Mike April 27th
Hey… this stuff looks good… but how do you keep the size down? I worry how long the design will take to load - particularly on slower connections. I always worry about this… how big of a deal do you think that is now?
blackout April 27th
This is such a crock! You violate almost all the precepts of usability by creating a layout that has more appeal as a painting than a clear, visible, user-friendly site. The web is not a painting. The web is information.
Grey type on a black background is not only not cool, it is passe. Even free LASIC eye surgery won’t fix it. Leading people down this web design path is irresponsible and just plain dumb.
boyle April 27th
Chris Garrett’s font I believe is called ‘Klavika’. Awesome tutorial
Katalog Stron April 27th
I love this design. Looking awsome.
Acronyms April 27th
One more step to the better web.
Mason April 27th
Thank you for posting this. I’ve been stuck on design ideas for a while, this really helped.
Siriquelle April 28th
Nice work, I have an awful eye for appealing interface design, this tutorial helped me, thanks,
Daniel April 28th
Great
Daniel
Marian April 28th
Whoa love ya!
Do you pay yourself for that one? You should, for sure!
wildwise April 28th
the psd/net tuts is a great thing.
PJ Hutch April 28th
What makes this tutorial great, is not only does it go in detail about the steps in producing such a product. But in addition, it goes into detail how why it is effective and the groundwork for the overall design. Nicely done.
CFA Level 1 April 28th
You really have outdone yourself this time.
betatron April 28th
amazing…
wow.
skut April 28th
thanks for another web design tutorials
Nick April 28th
Nice work!!
tali April 28th
this is far from a high end web design layout, its a simple background with blocks put ontop of it
pffffffffffffftttttt
kozzmo April 28th
I think the font is Klavika. http://www.myfonts.com/fonts/processtype/klavika/
Nice article.
Joefrey Mahusay April 28th
Great tut Collis. I like the background and typography you use.
zoel April 28th
wow, i think if with patteen background it will be cools
Pravin Potdar April 28th
Great Web design!!
Alberto April 28th
Thank you so much, this is GREAT!
Jseen April 28th
Pretty Sleek
w3nky April 28th
nice effects
Robert April 29th
Excellent tutorial, please please keep these up, more web!
tobto April 29th
heavy design consisting from pics - isn’t a good idea for good UI.
Erik Gyepes April 29th
Thank you for this cool tutorial, I must say again wha others said there: it is great!
Mike [gamebittk] April 29th
Great article. Interesting tricks.
Xandu April 29th
Can I have the ready made HTML one?
Ian April 29th
Hi there, I really like your design approach. Putting textures into designs has always been my shortcoming in web design.
How do you (a) decide what image you’d like to serve as the backgroud, and then (b) find it?
Your tut has 4 kickass background texture images, that are well chosen and rock the design.
When I get to the home page of istockphotos, I find myself overwhelmed, and going, “well, now what?”.
First up, how do you decide what you want from a texture? Or do you just jump in and rummage?
How do you search for it, as texture is such an abstract concept? (and istockphoto has soooo many textures)
How long do you typically spend looking for a texture?
Many thanks
Ian
Matt Radel April 30th
Very nice and certainly CSS gallery worthy.
EH Martuchelli April 30th
PSDTuts Rules! Very nice!
EH Martuchelli April 30th
PSDTuts Rules! Very nice!
But, I have a suggestion:
You could create a CSS for printing (Print media type) or to provide the tutorial also in pdf.
I generate the pdfs of tutorials that interest me to read later, I believe that other people do the same.
Greetings brazilian. Peace!
Dave Booker April 30th
Yo Collis.
Love your tutorial style.
Thanks for not being stingy with your design tips.
Art Quiz April 30th
I ran across this article and decided to give it a crack. I’m not the best with designs but I got mine looking about 40% as good as yours, I’ll try again, thanks!
Sam April 30th
awesome!
Jasem April 30th
Step 7 is missing. I can’t go from white radial gradients to those cool highlights you’ve created.
M-RES April 30th
“This is such a crock! You violate almost all the precepts of usability by creating a layout that has more appeal as a painting than a clear, visible, user-friendly site. The web is not a painting. The web is information.
Grey type on a black background is not only not cool, it is passe. Even free LASIC eye surgery won’t fix it. Leading people down this web design path is irresponsible and just plain dumb.”
Obviously not posted by a designer. The precepts of usability would state that a fairly high contrast is required for legibility of type and an uncluttered background helps to this end. This design uses a solid black background for content areas and tints of the browns/black to create a simple visual style-guide for the eye to follow the flow of content around the page, quickly understanding the visual clues given by the type sizes, colours and font usage. There is nothing wrong with using grey type on a black background. It is neither passe (which suggests you are a victim of ‘fashion’ rather than style), nor an irresponsible design choice just so long as there is sufficient contrast. Of course the ultimate contrast is black on white or white on black, but that’s not always possible when trying to conform to colour palettes - plus the extremes of contrast can become tiring to read, which is where a softer look can be achieved by using a grey on black or white to tone it down. I can read the text in the small inline graphic screenshot of the page without having to see it at 100% size, therefore, the contrast is sufficient.
At least if you’re going to criticise a design for usability, make sure you’re talking about the right thing. You claim that it looks like a painting, yet that is the point of good design and I see a clearly structured 3 column grid system for the content with an overall slightly asymmetrical content position (important to apply tension to the page and avoid the blandness of centered content which will help make the page MORE likely to be read, even by those surfing through). If the content doesn’t look inviting then it doesn’t matter WHAT it says, you’re not going to hold the casual observer at your site. I’d say overall it’s a fair design job from fairly widely available stock material and a good starting point for many people (some of who may now avoid overcrowding their page backgrounds with glitzy animated sparkling madness and ‘bling’ clip art).
Martin Leblanc May 1st
Beatiful design: YES (Great work)
Good usability: NO (light on dark text, no separate color for links etc.)
The hard part of being a web design is to do design that not only looks good, but also has a high level of usability. That said I really think it’s a nice post
Holly Mack May 1st
Wow! An absolutely brilliant tutorial - I couldn’t add PSDTUTS and NETTUTS to my favourites fast enough! Will be back for more, thanks again.
Bubber May 1st
Guys you just made my day !
I discovered your tutorial via smashingmagazine and it was worth checking the link !
I am totally going to try this one and surely learn a lot on how to create a website design…a design that’s mine instead of some templates that’s never reflecting one’s personality.
A note to the “haters” that cannot see the potential of this tutorial:
You got to get rid of your leaching habit ! A tutorial is made to teach a way of doing something… Which doesn’t mean it should always be done this particular way.
Get some inventiveness ! There are so many colors, so many typos … customize this design to fit yourself (and your perception of what usability for webdesign is).
**END**
Again guys : thank you for this tutorial ! You just got del-icio-used + igoogled !
Ivan May 1st
This is just great, now I can finally make my portfolio site
doksan May 1st
I love this design! Very nice
kaiser May 2nd
i´m a reader since the first day, but i really got a problem: DO YOU GUYS AT PSD-TUTS.COM READ WHAT YOUR READERS WRITE? I believe: no. For e.g.: No Stylesheet for printing, no sollution for printing without comments and so on. There are huge problems in nearly EVERY tutorial and you got a lot of readers who got a clue and try to help you improve your tuts…. but you never answer questions, react on comments or anything else… too bad. Sorry, but that´s no compliment.
Jeff May 2nd
“Obviously not posted by a designer. The precepts of usability would state that a fairly high contrast is required for legibility of type and an uncluttered background helps to this end.”
Yes, a fairly high degree of contrast is required. Unfortunately, this site fails both color and brightness contrast checks. I ran it through a couple different contrast tools, and the content text has roughly half the contrast and brightness variation that is required. Thats pretty far off.
In addition, You have a huge amount of graphics (slow load time) and you have images for text (SE Unfriendly).
Typical of someone who designs websites for Photoshop and not for end users.
That being said, if you are a graphic designer, and you are making a portfolio to show off for other graphic designers, its probably ok, because they all have fast connections and big screens, and can probably see fairly well. But I would warn against using this for any other type of site.
Qbrushes May 2nd
i agree with some point made, its not the best UI but its not that bad.
paismast May 3rd
woowowowo impresionantes tutoriales hombre, señores son unos maestros
impresionante
website design May 5th
wow great tutorial.
Thanks
resevil83 May 5th
IN RESPONSE TO Kakumei88
Simply right click on the white portion of the ruler bar where you see the numbers ‘1,2,3,4′ You will get a drop down menu, where you are able to select pixels. You are on the inches mode.
Web Design May 7th
Great tute. I like clean and attractive sites like the one illustated.
Chris Garrett May 8th
hey guys, just realised the linkup, thanks
(I really should check my referrers more often) The font I’m using is indeed Klavika, regular and heavyface versions.
Benji May 10th
hey nice tutorial, just one question that has driven me crazy for a long time, could give me a hint to manage the recent works working automatically instead of coding all over again? thanx ( tho its php i cant find an answer to my question in any other places hehe) thanx!
Ben May 13th
Amazing!
#1 Breaking Headline Entertainment News abc cbs nbc bbc reuters associated press court tv May 15th
That being said, if you are a graphic designer, and you are making a portfolio to show off for other graphic designers, its probably ok, because they all have fast connections and big screens, and can probably see fairly well. But I would warn against using this for any other type of site
Yes, a fairly high degree of contrast is required. Unfortunately, this site fails both color and brightness contrast checks. I ran it through a couple different contrast tools, and the content text has roughly half the contrast and brightness variation that is required. Thats pretty far off.
And finally I would like to say this:
Amazing!
ABU May 15th