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

High Performance Web Sites

Build modern and responsive webpages Try Front-end

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.

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

More Front-end resources

Aching back from coding all day?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

Ad