LESSON 06 / Design / 4 MINUTES

Readable is rather attractive.

The visitor should read the message, not admire it from an inconvenient distance.

Start with a hierarchy people can use

Headlines introduce the idea. Supporting paragraphs explain it. Labels and instructions help someone act. Give these jobs visibly different treatment without letting any essential text fade into the furniture.

A characterful display face can work beside a straightforward body face. The combination is an art-direction decision. Test long headlines, small screens, fallback fonts and actual customer language before committing.

Good typography knows when to speak.
And when to stop clearing its throat.

Contrast is a measured relationship

WCAG's minimum contrast criterion generally requires 4.5:1 for ordinary text and 3:1 for qualifying large text, with defined exceptions. Test the rendered foreground and background pair. A fixed opacity percentage does not guarantee a particular contrast.

Test light and dark themes separately. Include links, placeholder text, captions, focus indicators and hover states. A second theme is a second set of combinations to inspect, not a simple colour inversion.

Give reading room

Use line lengths and paragraph spacing that feel comfortable with the actual content. Our starting point is 18-pixel body text and a restrained reading measure; it remains a design default, not a universal accessibility rule.

Do not disable zoom or force important words into decorative images. Let headings wrap naturally. An elegant layout should survive a longer business name or a customer who needs larger text.

Inspect the result

Automated tools help expose some failures. They do not establish full accessibility. Add keyboard checks and task-based manual review, and record any checks that were not performed.

A practical checklist

  • Measure real contrast pairs in each theme.
  • Check text enlargement and long content without clipping.
  • Keep a semantic heading hierarchy and essential text as text.
PUT IT TO WORK

A little judgement call.

Does setting every paragraph to 70% opacity guarantee accessible contrast?
Read the explanation

Opacity blends colours. The result depends on the actual foreground and background, so a percentage alone cannot establish contrast compliance.

A learning exercise, not an expertise score. No answers are sent anywhere.

Evidence & perspective

Contrast thresholds reference W3C. Type sizing and measure are starting-point house rules. Automated checks are not a conformance certification.

W3C: contrast minimum ↗WAI: selecting evaluation tools ↗

Learning edition · 17 September 2026 · DigiThat. Recheck live standards and documentation for your project.

ENOUGH ABOUT WEBSITES IN GENERAL

Shall we have a look
at yours?

Tell me what you do, what feels wrong and what a better website would help you achieve. We can start there.

Let’s look at your website