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

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.

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.

// 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:

.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; }

• ID: legal-pages-compliance.accessibility-currency.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:

  // 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:

  .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.