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?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Ad