A Contrast Exam

Eye Test

Drop two colors. The whole page becomes them. If you can read it, it passes.

01

Can you read text?

Acuity Chart
20/200E
20/100F P
20/70T O Z
20/50L P E D
20/40P E C F D
20/30E D F C Z P
20/20F E L O P Z D
Type Scale
Read me.
Display
Modern interface elements for the web.
Headline
Precision-tuned legibility through contrast and perceptual lightness.
Body
Even the smallest text still has to survive the pair.
Caption
02

Can you read shapes?

Interface Components
PrimarySecondaryBADGECheckedSelected
Progress72%
Meter58%
Slider68%
Iconography — Normal & Inverted
03

Can you read motion?

Pixel Field
Waveform
04

Take the prescription.

Your pair, as design tokens. Copy the variables and ship.

variables.css
:root {
  --bg: #F5F5F5;
  --fg: #1A1A2E;
  --contrast: 15.65;
  --apca: 99;
}

.combo { color: var(--fg); background: var(--bg); }
.combo-inverse { color: var(--bg); background: var(--fg); }

Styles come and go. Good design is a language, not a style.

Massimo Vignelli
Eye Test
BG
FG
15.65:1
AAAAALG
Lc 99