Colour, Contrast, and Readability

Prerequisites

Before you start:

Learners should understand:

• CSS colour values
• basic typography styles
• links and buttons
• hover and focus states
• responsive layout basics

Core explanation

Colour affects:

• whether text can be read
• whether links are recognisable
• whether buttons look interactive
• whether status messages are understood
• whether focus and hover states are visible
• whether the page remains usable in different environments

Contrast is the difference between foreground and background.

For text, contrast needs to be strong enough that users can read comfortably. This is especially important for:

• body text
• small text
• button text
• navigation links
• error messages
• text over images

Do not rely on colour alone

This is a common issue.

Bad:

<p class="status-red">Unavailable</p>
<p class="status-green">Available</p>

If the only difference is colour, some users may miss the meaning.

Better:

<p class="status status-unavailable">
  <span aria-hidden="true">✕</span>
  Unavailable
</p>

<p class="status status-available">
  <span aria-hidden="true">✓</span>
  Available
</p>

Or use text labels clearly:

<p><strong>Status:</strong> Available</p>

Colour can support meaning. It should not be the only carrier of meaning.

Readability basics

Good readability often comes from ordinary CSS decisions:

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.content {
  max-width: 70ch;
}

p {
  margin-bottom: 1rem;
}

Useful habits:

• Avoid very small body text.
• Use comfortable line height.
• Limit long line lengths.
• Leave enough spacing between sections.
• Use headings to break up content.
• Avoid placing text over busy images.
• Keep interactive states clear.

Starter code

<section class="pricing-card">
  <p class="eyebrow">Popular</p>
  <h2>Starter Review</h2>
  <p class="price">$149</p>
  <p class="description">A practical homepage review for structure, SEO, and accessibility basics.</p>
  <a class="button" href="/services/starter-review.html">Learn more</a>
</section>

.pricing-card {
  background: #f5f5f5;
  color: #999999;
  padding: 1rem;
  border-radius: 0.5rem;
}

.eyebrow {
  color: #ff7a7a;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.price {
  font-size: 2rem;
  color: #bbbbbb;
}

.description {
  font-size: 0.85rem;
  line-height: 1.2;
}

.button {
  display: inline-block;
  background: #cccccc;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

Improved code

.pricing-card {
  max-width: 28rem;
  background: #ffffff;
  color: #171717;
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
  border-radius: 0.75rem;
}

.eyebrow {
  color: #7c2d12;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price {
  font-size: 2rem;
  color: #171717;
  font-weight: 700;
}

.description {
  font-size: 1rem;
  line-height: 1.6;
}

.button {
  display: inline-block;
  background: #7c2d12;
  color: #ffffff;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-radius: 0.4rem;
  font-weight: 700;
}

.button:hover {
  background: #9a3412;
}

.button:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

How and why this improves the card

• Text colour has stronger contrast against the background.
• Body text is larger and more comfortable to read.
• Line height gives the description room to breathe.
• The button text is more readable.
• The focus state is visible.
• The hover state is clear.
• The card spacing creates a stronger reading order.

Links need to look like links

Avoid styling links so subtly that users cannot find them.

Less helpful:

a {
  color: inherit;
  text-decoration: none;
}

Better for body content:

.prose a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.prose a:hover {
  text-decoration-thickness: 0.15em;
}

.prose a:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

Navigation links may be styled differently, although they still need clear hover and focus states.

Text over images

Text over images often causes contrast problems because the background changes across the image.

Risky:

<section class="hero-image">
  <h1>Build better websites</h1>
</section>

Better options:

• place text outside the image
• add a solid or semi-solid overlay
• use a consistent background panel behind the text
• choose a simpler image
• use CSS gradients carefully

Example:

.hero-content {
  max-width: 42rem;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.75rem;
}