07. Choosing the Right Color Scheme: background color, contrast

Color Scheme

Choosing the right color scheme for your webpage is vital. The emotions that are evoked from the colors should match the content your text carried.

For example, to get a soft, fuzzy feeling, use a softer color. Doesn't this remind you of a baby blue teddy bear? mmm... that cozyness.
A more serious feeling can be evoked with red font color on a black background. This reminds me of a sinister villain!

Of course, these are both subject to the reader, but you get the idea.

There are many websites such as Paletton that allow you to choose a color scheme for your website.

Background Colors

As we have seen in the Backgrounds section, background-color property sets the background color for that box. You can specify which color by predefined colors, RGB, hex value or HSL. The default color is transparent, meaning you can see through to the element behind it.

Contrast

Once you've chosen a background, make sure the text is still readable to the user. Text is harder to read when there is low contrast between the background and foreground colors.

Isn't this hard to read?
High contrast is easy to read, but can be difficult if you want a people to read a lot of text on your page.
Much easier, but can tire out the eyes after a long time.
Medium contrast improved readability.
Not too soft, and easier on the eyes.

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Aching back from coding all day?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ reviews)

More Back Problems resources

Ad