Choose colors and backgrounds

One idea at a time

A foreground color is only readable in relation to what is behind it. Begin with dark text on a pale surface or light text on a dark one. Do not communicate an error or success using color alone: include clear words or a symbol with a meaningful label. The preview keeps the same content so you can compare only the surface treatment.

CSS accepts named colors such as navy, hexadecimal values such as #1e3a8a, and functions such as rgb() and hsl(). They are different ways to describe colors, not different kinds of paint. In a six-digit hex color, the three pairs after # represent red, green, and blue; #ffffff is white and #000000 is black. HSL describes hue (the color angle), saturation (color intensity), and lightness (the light-to-dark setting); its lightness value does not directly measure readable contrast.

What to remember first

Walk through an example

<div class="card">
  <h1>My reading corner</h1>
  <p>A place for small discoveries.</p>
  <p class="note">Read a little every day.</p>
</div>

.card {
  color: #1e3a8a;
  background-color: #eff6ff;
}

The text and pale-blue surface belong to the same card rule. Heading and paragraphs inherit the text color because this example gives them no separate color. Switching the background alone can make the existing text harder to read. Always inspect both values, including the colors of any links placed on the surface.

See it happen: try a small change

.card {
  color: #1e3a8a;
  background-color: #eff6ff;
}

Look a little closer

An alpha component makes a color partly transparent, such as rgb(30 58 138 / 20%). The final appearance depends on the surface underneath. By contrast, opacity fades the whole element, including its text and descendants. Keep a solid background fallback when adding a decorative image or gradient so missing media does not destroy readability.

A CSS background has no alt attribute. Use it for decoration; put meaningful pictures in an HTML img with suitable alternative text. Gradients need no downloaded file. For a local photograph, combine background-image: url("paper.jpg") with size, position, and repeat values. Preview crops at several widths before choosing cover for an image with important edges.

Try it in your own project

Use the supplied card markup in body. Start with the solid pair, then add the gradient declaration from the interactive example while keeping background-color. No image file is required. Compare both ends of the gradient behind the same text.

The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.

A common wrong turn

A beautiful background can make words unreadable. Contrast is the difference in lightness between foreground and background. A contrast checker takes the two color values and reports a ratio and pass/fail result; check normal-size text and both gradient endpoints rather than judging only by eye, and keep meaning available without color. Avoid using opacity to soften a background if you want the text to remain fully opaque.

Go to the source

• MDN: Choose colors and backgrounds ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.