Skip to main content
All work

Contrast

An arithmetic WCAG relative luminance referee built to settle colour pairings and font choices with math rather than subjective debate.

Accessibility Engine

2026

Certified Cool

Body copy at the size this site actually uses for paragraphs, so the judgement is made on real text rather than a swatch.

6.55:1

Background
Text
  • Body textPasses at 4.5:1
  • Large textPasses at 3:1
  • Borders and iconsPasses at 3:1

The challenge

Design teams frequently guess contrast compliance using eye tests or inaccurate sRGB tools that don't account for true human perceptual luminance curves, resulting in unreadable websites for millions of users with visual impairments.

The approach

We developed Contrast using the exact W3C WCAG 2.1 relative luminance formula with gamma expansion. The engine computes contrast ratios in real time, testing across normal text, large display headers, and UI components with immediate pass/fail verdict badges.

What we made

  • WCAG 2.1 Arithmetic Referee
  • Real-time Color Contrast Analyzer
  • Interactive Type Rendering Tester
  • System Color Tokens Inspector

Built with

W3C Relative Luminance Math / React 19 Hooks / CSS Color Tokens / Real-time Text Evaluator

Credits

Accessibility and systems engineering tool by Certified Cool.