TeachKit project

TeachKit / Design system

Documentation v0.1 · Released product

Design system contents

Accessibility and content

Contrast and visual perception

Inspect composited text colors and interactive states before claiming conformance.

On this page

Measurement boundary

The solid foreground #1E1E1E is intended for readable dark text on the warm canvas and white surfaces. The muted foreground is 50% alpha and must be composited against its actual background before evaluation. White on turquoise, thin borders, disabled opacity, icon-only actions and review gold need independent checks.

Review protocol

  • Calculate WCAG text contrast using the actual composited foreground/background; apply the appropriate small/large-text threshold.
  • Check focus indicators and control boundaries separately from text contrast.
  • Use text and state semantics alongside color for progress, availability and connection state.
  • Do not call the app WCAG-compliant based on a screenshot or this reference.
  • Record problems in the readiness register and fix the source before refreshing evidence.

Examples from the app

Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Fields · Component detail · Light · Desktop · 1920 × 866 px
Fields · Component detail · Light · Desktop · Focus · 1920 × 922 px
Toggles · Component detail · Light · Desktop · 1920 × 310 px

Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1