Goafreet/Typography Lab/Readability & Accessibility Lab

Readability & Accessibility Lab

WCAG 2.2 AA / AAA

Interactive laboratory for evaluating font legibility, reading comfort, line length (measure), and testable WCAG 2.2 accessibility conformance. Calculates mathematically verified sRGB relative luminance with alpha compositing and reflow tolerance.

Reading Presets:

Long-Form Editorial Article

Mobile App Interface

Analytics Dashboard Card

Marketing Landing Hero

Literary & Academic Book Specimen

Accessibility Stress Test

WCAG 2.2 Interactive Conformance Simulations:

SC 1.4.12 Spacing TestSC 1.4.10 320px ReflowSC 1.4.1 Link Underlines

WCAG Contrast: 17.85:1

Level: AAA

Measure: ~73 CPL

Click any text block below to live-edit content.

The Architecture of Legibility in Digital Typography

How mathematical proportions, optical sizing, and spatial rhythm govern the speed and comfort of human reading on screens.

Continuous reading requires more than distinguishing isolated letters. When readers scan a multi-line paragraph, their gaze moves in rapid saccadic jumps punctuated by brief fixations. If lines of text are excessively long, the eye struggles to find the start of the next line, causing regression. Conversely, if columns are overly narrow, frequent hyphenation and awkward word wrapping fracture cognitive comprehension. Typeface design, vertical rhythm, and adequate contrast form an indivisible triad. An open counter-form in characters such as "e" and "c" prevents ink traps from closing at small scales, while intentional letter spacing ensures adjacent stems remain distinct even on low-resolution displays.

Need deeper verification? Inspect the normative WCAG diagnostics panel or examine glyph anatomy in the Letter Lab.

"Good typography is invisible to the casual reader, yet indispensable to deep sustained comprehension."

Typographic Controls

Reference Typeface

Font Weight

Font Size18px (1.13rem)

Line Height (Leading)1.65 (30px)

Letter Spacing (Tracking)0em

Container Width (Measure)680px (~73 CPL)

Text Alignment

Text & Surface Colors

Text:

Surface:

Live Accessibility & Readability Diagnostics

Automated evaluation against WCAG 2.1/2.2 success criteria and recognized typographic reading heuristics.

WCAG 1.4.3 Contrast (Minimum)

AA • Normative Standard

PASS

Measured contrast of 17.85:1 meets or exceeds the WCAG AA requirement of 4.5:1 for this text size.

Measured: 17.85:1Target: 4.5:1 (Normal Text)

WCAG 1.4.6 Contrast (Enhanced)

AAA (Informational) • Informative Heuristic

PASS

Meets the enhanced WCAG AAA threshold of 7:1 for maximum clarity.

Measured: 17.85:1Target: 7:1

WCAG 1.4.12 Text Spacing Capability

AA • Normative Standard

PASS

Line height of 1.65 provides adequate vertical room for descenders and ascenders, preventing inter-line collision.

Measured: Line height: 1.65, Letter spacing: 0emTarget: Line height >= 1.5, Letter spacing >= 0em without clipping

Typographic Measure (Characters Per Line)

Design Best Practice (Heuristic) • Informative Heuristic

PASS

Estimated measure of ~73 characters per visual line falls within the comfortable editorial scanning range.

Measured: ~73 CPLTarget: 45–75 CPL for continuous Latin body text

WCAG 2.2 Typography Success Criteria Reference

Understanding the normative legal criteria versus subjective design heuristics.

SC 1.4.3 Contrast (Minimum) (AA)

Target: 4.5:1 (Normal) • 3.0:1 (Large Scale >= 24px or >= 18.66px Bold)

Visual presentation of text must have sufficient luminance contrast against its backdrop so people with moderately low vision can read without assistive contrast-enhancing technology.

SC 1.4.12 Text Spacing (AA)

Tolerance for User Stylesheets

No loss of content or functionality may occur when a user overrides author styles to: line-height 1.5×, paragraph spacing 2×, letter-spacing 0.12×, or word-spacing 0.16×.

SC 1.4.10 Reflow (AA)

320 CSS Pixels without 2D Scrolling

Content must reflow vertically without requiring two-dimensional horizontal panning when viewed on screens equivalent to 320 CSS pixels wide (simulating a 400% zoom on desktop).

Compliance Disclosure: Automated typography checks verify mathematical color luminance and CSS box boundaries. They do not constitute an official legal accessibility certification. Real-world audits require human assistive technology testing (NVDA, JAWS, VoiceOver), screen magnification checks, and cognitive readability reviews.

Production CSS & Design Tokens

Export verified typographic rules and W3C-standard JSON tokens.

/* Accessible Typography Specification (WCAG 2.2 AA Aligned) */
.reading-canvas {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0em;
  word-spacing: 0em;
  text-align: left;
  color: #0f172a;
  background-color: #ffffff;
  max-width: 680px;
  direction: ltr;
}

.reading-canvas p {
  margin-bottom: 1.25em;
}

/* Accessible focus and interactive indicators */
.reading-canvas a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.reading-canvas a:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 2px;
  border-radius: 2px;
}

CONTINUE TYPOGRAPHY EXPLORATION

Variable Font Lab Pairing Studio Letter Anatomy Lab Typography Academy