WCAG (Tipografía)

The Web Content Accessibility Guidelines (WCAG) include several success criteria that directly govern typographic decisions. Published by the W3C's Web Accessibility Initiative, WCAG 2.1 and 2.2 define testable standards organized into three conformance levels: A (minimum), AA (standard target), and AAA (enhanced). Most legal accessibility requirements reference WCAG AA.

1.4.3 — Contrast (Minimum) [AA] Text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt/24px regular, or 14pt/~18.67px bold) may use a lower minimum of 3:1:

/* Passes AA: ~7:1 contrast */
body {
  color: #333333;
  background: #ffffff;
}

/* Fails AA: ~2.5:1 contrast — inaccessible */
.caption {
  color: #aaaaaa;
  background: #ffffff;
}

Check ratios with tools like the WebAIM Contrast Checker or browser DevTools accessibility panel.

1.4.4 — Resize Text [AA] Text must be resizable up to 200% without loss of content or functionality. This means avoiding px units for font sizes in critical content, ensuring layout doesn't break at large text sizes, and never using techniques that clip or truncate resized text:

/* Supports resizing correctly */
body { font-size: 1rem; }
h1   { font-size: 2rem; }

/* Fixed pixel sizes can fail at browser zoom levels */
.modal-text { font-size: 12px; overflow: hidden; }

1.4.8 — Visual Presentation [AAA] The AAA criterion specifies that for blocks of text, users should be able to select foreground and background colors, line width should not exceed 80 characters, text should not be fully justified, line spacing should be at least 1.5× within paragraphs, and text should be resizable without assistive technology up to 200%.

Full justification (text-align: justify) is explicitly discouraged in WCAG AAA because it creates irregular word spacing that's particularly difficult for readers with dyslexia.

1.4.12 — Text Spacing [AA] (WCAG 2.1) No content or functionality should be lost when these spacing properties are overridden: - Line height to 1.5× font size - Letter spacing to 0.12× font size - Word spacing to 0.16× font size - Spacing after paragraphs to 2× font size

/* Test your layout with these overrides applied */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

If applying these overrides breaks your layout (text overflows containers, truncation occurs, content disappears), you have a WCAG 1.4.12 failure.

2.4.6 — Headings and Labels [AA] Headings must be descriptive and accurate — a typographic consideration that intersects with semantic HTML. Using heading tags (h1–h6) purely for visual size rather than document structure is both a WCAG failure and an SEO problem.

<!-- WCAG compliant: semantic structure + visual styling via CSS -->
<h2 class="section-title">Getting Started</h2>

<!-- Non-compliant: styling a div to look like a heading -->
<div class="big-bold-text">Getting Started</div>

WCAG compliance in typography is largely achievable through good defaults: relative font sizes, adequate contrast, sensible line heights, and proper semantic markup. The guidelines formalize what good typographic practice already recommends.