# Legal pages meet basic WCAG 2.1 AA (font, contrast, headings)

- **Pattern:** `ab-001671` (`legal-pages-compliance.accessibility-currency.legal-pages-wcag`)
- **Severity:** info
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001671
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001671)

## Why it matters

GDPR Art. 12(1) requires that privacy information be provided in "an intelligible and easily accessible form" — which courts and regulators interpret to include basic readability and accessibility standards. WCAG 2.2 SC 1.4.3 (minimum contrast ratio 4.5:1) and SC 1.4.4 (text resizable to 200%) are the technical thresholds most referenced in accessibility litigation and Section 508 enforcement. Legal pages rendered in `text-sm` (14px) with `text-gray-400` on white (approximately 2.8:1 contrast) fail both WCAG 2.2 1.4.3 and GDPR Art. 12(1) simultaneously. In the US, ADA Title III web accessibility cases increasingly cite inadequately readable legal pages as a distinct accessibility barrier.

## Severity rationale

Info because WCAG 2.2 SC 1.4.3 and 1.3.1 violations on legal pages are typically remediated with a single CSS class addition, but they constitute simultaneous GDPR Art. 12 and Section 508 compliance gaps.

## Remediation

Apply `prose prose-neutral dark:prose-invert` from the Tailwind Typography plugin to all legal page containers — this applies 16px+ body text, semantic heading styles, 4.5:1+ contrast on default themes, and constrained line length in a single class.

```tsx
// app/terms/page.tsx — same pattern for all legal pages
export default function TermsPage() {
  return (
    <main className="max-w-3xl mx-auto px-4 py-12">
      <article className="prose prose-neutral dark:prose-invert">
        <h1>Terms of Service</h1>
        <p className="lead">Last updated: February 15, 2026</p>
        <h2>Acceptance of Terms</h2>
        <p>By using our service...</p>
        {/* h2 for major sections, h3 for sub-sections */}
      </article>
    </main>
  )
}
```

If not using the Typography plugin, apply minimum styles manually in your global CSS:

```css
.legal-content {
  font-size: 1rem;    /* 16px minimum — WCAG 2.2 SC 1.4.4 */
  line-height: 1.75;
  color: #111827;     /* gray-900: ~17:1 contrast on white */
  max-width: 72ch;
}
.legal-content h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal-content a  { text-decoration: underline; color: #1d4ed8; }
```

## Detection

- **ID:** `legal-pages-wcag`
- **Severity:** `info`
- **What to look for:** Inspect the rendering of each legal page. Check the following basic WCAG 2.1 AA requirements: (1) **Font size** — body text should be at least 16px (1rem). Legal pages often inherit small base font sizes; verify the prose styles applied to legal pages use a readable base size. (2) **Color contrast** — body text color should have at least 4.5:1 contrast ratio against the background. Check the CSS for the text and background colors applied to legal page content. Common issues: light gray text on white background used for "fine print" styling that drops below 4.5:1. (3) **Heading structure** — legal pages should use semantic heading hierarchy (`<h1>` for the page title, `<h2>` or `<h3>` for sections). Check whether headings are semantic HTML elements or styled `<p>` or `<div>` tags. (4) **Line length** — prose content should be constrained to a readable width (60-80 characters per line; `max-w-2xl` or `max-w-3xl` in Tailwind). (5) **Links** — any links within legal page content should be distinguishable from surrounding text (underline or color difference beyond text color alone).
- **Pass criteria:** Legal pages render with at least 16px body text, sufficient color contrast (4.5:1 for normal text), semantic heading hierarchy, constrained line length, and distinguishable links. Basic WCAG 2.1 AA requirements for typography and structure are met.
- **Fail criteria:** Body text is smaller than 14px. Text color on background falls below 4.5:1 contrast. Sections use styled divs instead of semantic headings. Content spans full viewport width with no max-width. Links have no visual distinction.
- **Skip (N/A) when:** No legal pages exist (flagged by existence checks above).
- **Detail on fail:** Specify the violation. Example: `"Legal pages use text-sm (14px) for body copy. WCAG 2.1 requires at least 16px for normal text."` or `"Legal page prose uses text-gray-400 on white background — contrast ratio approximately 2.8:1, below the 4.5:1 minimum."` or `"Section headings in Terms of Service are bold paragraphs, not semantic h2/h3 elements."`.
- **Remediation:** Apply accessible prose styles to legal pages. If using Tailwind CSS with the Tailwind Typography plugin (`@tailwindcss/typography`), the `prose` class handles most of these requirements automatically:

  ```tsx
  // app/terms/page.tsx — use Tailwind prose for accessible legal content
  export default function TermsPage() {
    return (
      <main className="max-w-3xl mx-auto px-4 py-12">
        {/* prose class applies: 16px+ body, semantic heading styles,
            good line length, link underlines, and readable spacing */}
        <article className="prose prose-neutral dark:prose-invert">
          <h1>Terms of Service</h1>
          <p className="lead">Last updated: February 15, 2026</p>

          <h2>Acceptance of Terms</h2>
          <p>By using our service...</p>

          {/* Continue with h2 for major sections, h3 for sub-sections */}
        </article>
      </main>
    )
  }
  ```

  If not using the Typography plugin, apply these minimum styles manually:

  ```css
  .legal-content {
    font-size: 1rem;        /* 16px minimum */
    line-height: 1.75;
    color: #111827;         /* gray-900 on white: ~17:1 contrast */
    max-width: 72ch;        /* ~72 characters per line */
  }
  .legal-content h2 { font-size: 1.5rem; margin-top: 2rem; }
  .legal-content h3 { font-size: 1.25rem; margin-top: 1.5rem; }
  .legal-content a  { text-decoration: underline; color: #1d4ed8; }
  ```

  For a thorough accessibility audit of legal pages and the rest of your application, the AuditBuffet Accessibility Fundamentals Audit covers all WCAG 2.1 AA requirements in depth.

---

## External references

- wcag 1.4.3
- wcag 1.4.4
- wcag 1.3.1
- section-508 §1194.22
- gdpr Art. 12(1)

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-001671