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

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Aching back from coding all day?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources

Ad