Aller au contenu

Text, contrast, and readability

Readable text is the foundation of an accessible website. If visitors cannot read your content -- because the contrast is too low, the text is too small, or the structure is unclear -- the site fails at its most basic purpose.

Two things to keep in mind:

  1. Contrast is measurable. WCAG defines minimum contrast ratios. You can check any color combination with free tools -- there is no guesswork.
  2. Readability is more than font size. Line height, letter spacing, line length, and heading structure all affect how easily people read your content.

Color contrast

Color contrast is the difference in brightness between foreground text and its background. Low contrast makes text hard to read for everyone, and impossible for people with low vision.

WCAG AA requires these minimum contrast ratios:

Text type Minimum ratio Example
Normal text (under 18px or under 14px bold) 4.5:1 Dark gray #595959 on white #ffffff = 7:1 (passes)
Large text (18px+ or 14px+ bold) 3:1 Medium gray #767676 on white #ffffff = 4.5:1 (passes)
UI components and graphical objects 3:1 Button borders, form field outlines, icons

Checking contrast in practice

  1. Note your text Color (Typography sector in the Style panel)
  2. Note the Background-color behind it (Decorations sector, or inherited from a parent)
  3. Enter both values into a contrast checker:
  4. WebAIM Contrast Checker
  5. Colour Contrast Analyser (desktop app)
  6. Browser DevTools (Chrome, Firefox, Edge all show contrast ratios when inspecting text)

Tip: If you use CSS variables for your color palette, check contrast once per variable combination. Document which pairings pass AA so you don't have to re-check every time.

Common contrast failures

  • Light gray text on white backgrounds
  • White text on light-colored photos without a dark overlay
  • Placeholder text in form fields (often too light)
  • Disabled button text (still needs 3:1 for the disabled state indicator)

Do not rely on color alone

WCAG 1.4.1 requires that color is not the only way to convey information. If you mark required fields with a red border, also add a text label like "(required)" or an asterisk with explanation. If you use green for success and red for error, also add an icon or text.

Good: "Password is too short" in red text with a warning icon. Bad: A red border on the field with no text explanation.

Font size

There is no strict WCAG minimum font size, but practical guidelines are clear:

  • Body text: 16px minimum (1rem at default browser settings). Smaller text forces users to zoom.
  • Small labels and captions: 14px minimum for readability.
  • Use relative units (rem, em) so text scales when users adjust their browser font size. See Typography.

Users who set their browser default font to 20px or 24px are doing so because they need it. Using px for everything can override their choice. Using rem respects it.

Line height and spacing

Line-height affects readability more than most people expect. WCAG AAA recommends at least 1.5 for body text. In practice:

  • Body text: 1.4 to 1.6
  • Headings: 1.1 to 1.3 (they have fewer lines, so tighter is fine)

Letter-spacing should be at least 0.12em for body text per WCAG AAA. For uppercase text, add more (0.05em to 0.08em) to prevent letters from running together.

Word-spacing: WCAG AAA recommends at least 0.16em.

These are AAA targets -- not required for AA compliance, but they measurably improve readability for everyone.

Line length

Long lines of text are hard to read. The optimal line length is 45 to 80 characters per line. In Silex, you control this by setting a max-width on your text containers rather than letting text stretch to full viewport width.

Heading hierarchy

Headings create the outline of your page. Screen reader users navigate by jumping between headings -- if the hierarchy is broken, they lose context.

Rules:

  • One h1 per page -- the page's main topic
  • No skipped levels -- h1 then h2 then h3, never h1 then h3
  • Headings describe structure, not style -- if text should look big but is not a heading, use a styled p, not an h2

Change heading levels in the Tag Name dropdown (Element settings, gear icon). See Page structure for details.

Language attribute

The lang attribute on <html> tells screen readers which language to use for pronunciation. Set it in Site settings.

If your page contains text in a different language (e.g., a French quote on an English page), you can add a lang attribute to that specific element using the Attributes section in the Data panel:

  1. Select the element containing the foreign-language text
  2. In the Data panel (gear icon), find the Attributes section
  3. Click + and name the attribute lang
  4. Set its value to the language code (e.g., fr)

Practical example: checking and fixing contrast on a card

You have a card with light gray text (#999999) on a white background (#ffffff).

  1. Check the ratio: Enter #999999 and #ffffff into WebAIM Contrast Checker. Result: 2.85:1 -- fails AA for both normal and large text.
  2. Fix it: Darken the text. Try #595959. New ratio: 7:1 -- passes AA for all text sizes.
  3. Apply in Silex: Select the text element. In the Style panel, Typography sector, change Color to #595959.
  4. If using CSS variables: Update the variable value. All elements using that variable update automatically.

Common mistakes

  • Assuming light gray on white looks "clean." It may look elegant to sighted designers but fails contrast requirements. Always check the ratio.
  • Forgetting about text over images. White text on a photo needs a dark overlay or text shadow to guarantee contrast. The photo itself is not a reliable background -- bright areas will swallow the text.
  • Using color alone for meaning. Red/green for error/success, colored badges without labels, highlighted text without additional context.
  • Setting font sizes in px only. Users who need larger text cannot override pixel values easily. Use rem for body text.
  • Skipping heading levels for visual reasons. Use CSS to style headings -- don't pick h4 because it looks the right size. Pick the right level and style it.

Learn more

Reference: WCAG contrast requirements summary
Criterion Level Requirement
1.4.3 Contrast (Minimum) AA 4.5:1 for normal text, 3:1 for large text
1.4.6 Contrast (Enhanced) AAA 7:1 for normal text, 4.5:1 for large text
1.4.11 Non-text Contrast AA 3:1 for UI components and graphical objects
1.4.1 Use of Color A Color not used as the only visual means of conveying info
1.4.12 Text Spacing AA Content must not break when user overrides spacing

Quiz

Q1: Your body text is #757575 on #ffffff. The contrast ratio is 4.6:1. Does it pass WCAG AA for normal-size (16px) text?

  • A) Yes, it passes
  • B) No, it fails
  • C) It depends on the font
Answer

A) Yes, it passes -- the minimum for normal text is 4.5:1, and 4.6:1 exceeds that. However, it barely passes -- consider darkening the text for a more comfortable margin.

Q2: You have a form where required fields have a red border and nothing else. Is this accessible?

  • A) Yes, red is universally understood
  • B) No, color cannot be the only indicator
  • C) Yes, if the red is bright enough
Answer

B) No, color cannot be the only indicator -- WCAG 1.4.1 requires that color is not the sole means of conveying information. Add a text label like "(required)" or an asterisk with an explanation.

Q3: A user sets their browser default font size to 20px. Your site uses font-size: 14px on the body. What happens?

  • A) Their preference is respected, text shows at 20px
  • B) Your 14px overrides their preference
  • C) The browser uses the larger of the two
Answer

B) Your 14px overrides their preference -- absolute pixel values ignore the user's browser setting. Use font-size: 0.875rem instead if you want 14px at default settings while still respecting user preferences.

Edit this page on GitLab