Colours, Backgrounds and Fonts

Today your pages get colours and fonts, and you check that everybody can read them.

Text colour and background colour

color sets the colour of the text, background-color the colour behind an element. You can write the same colour in several ways:

Can everybody read it?

Some people see colours less clearly, and many people read on a phone in bright light. So text needs enough contrast: a big difference between the text colour and the background. We measure it as a ratio from 1 : 1 (the same colour) to 21 : 1 (black on white).

The slide uses the orange #ff5733 for text. On white it has only 3.15 : 1. That is why our example uses the darker #B53D1D (5.75 : 1). Now fix three slide colours yourself.

See-through colours

opacity makes the whole element see-through: the box, its text and everything inside it. rgba() works on one colour only, so the text can stay solid. Both go from 0 (fully see-through) to 1 (solid).

.box {
  opacity: 0.5;   /* the whole box, text too, is half see-through */
}
.soft-box {
  background-color: rgba(255, 0, 0, 0.5);   /* only the background; the text stays solid */
}

A picture in the background

background-image puts a picture (or a gradient, a smooth change of colours) behind an element. Text on a picture needs good contrast too.

header {
  background-image: url('park.jpg');
}

Fonts

This rule from the course slide sets five font properties for paragraphs:

p {
  /* the font family: if the first font is missing, the browser takes the next one */
  font-family: 'Open Sans', Arial, sans-serif;
  /* the size: px, rem, em or % */
  font-size: 16px;
  /* the weight: normal, bold or a number from 100 to 900 */
  font-weight: 400;
  /* the style: normal, italic or oblique */
  font-style: normal;
  /* space between the letters */
  letter-spacing: 0.5px;
}

• font-family: the device uses the first font in the list that it has. Always end with a general family, serif or sans-serif, so there is always a fallback.
• font-size: px is a fixed size. rem follows the text size that the reader chose on the device, so many designers prefer it for text.
• font-weight: 400 is normal, 700 is bold. font-style: italic makes slanted letters.

h1 {
  font: italic 700 24px/1.5 Georgia, serif;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}
body {
  font-family: 'MyFont', sans-serif;
}

Your turn: a readable card

Guess first, then make the card readable and give it your own font.

Hex code

A colour as # and six characters, for example #043E74.

RGBA

A colour with a fourth number, alpha, for transparency.

Opacity

How see-through a whole element is, from 0 to 1.

Font family

A list of fonts. The browser uses the first one the device has.

General family

A font type that every device has, like serif or sans-serif.

Contrast ratio

How different the text colour and the background are. Normal text needs 4.5 : 1.

In short

• color is for the text, background-color for the space behind it.
• opacity changes the whole element; rgba() changes one colour only.
• End every font list with serif or sans-serif.
• Check the contrast: at least 4.5 : 1 for normal text.

Sources

1. MDN Web Docs (2026). color (text colour).
2. MDN Web Docs (2026). <color> (names, hex, rgb(), hsl(), alpha).
3. MDN Web Docs (2026). background-color.
4. MDN Web Docs (2026). opacity (the whole element and its children).
5. MDN Web Docs (2026). background-image.
6. MDN Web Docs (2026). font-family (always include a generic family).
7. MDN Web Docs (2026). font-size (px and rem).
8. MDN Web Docs (2026). font (the short form).
9. MDN Web Docs (2026). @font-face.
10. W3C WAI (2026). Understanding Success Criterion 1.4.3: Contrast (Minimum) (4.5 : 1, large text 3 : 1; WCAG 2.1, 2018).