A Palette Is Not Yet a Reading System

This blog uses a warm paper background, graphite text, archival blues, amber, sage, and pencil gray. Those colors describe a mood. They do not yet describe which text a reader can comfortably see.

I found the boundary while translating the brand guide into CSS. Pencil Gray (#777064) on Paper Cream (#F4EBD7) reaches only 4.13:1 contrast. It looks plausible. It misses the 4.5:1 WCAG threshold for normal text.¹

That changed the implementation. The site keeps Pencil Gray as a palette reference, but its operational secondary-text token is darker: #6B655A, which reaches 4.87:1 on the same paper. Links use a deeper blueprint blue. Amber remains an underline or large graphical accent—not paragraph text.

Contrast is a relationship

A hex value cannot pass or fail by itself. Contrast belongs to a pair.

The calculation starts by converting each sRGB channel into linear light, then combines the channels into relative luminance:

L = 0.2126R + 0.7152G + 0.0722B

The lighter and darker luminance values become a ratio:

(Llighter + 0.05) / (Ldarker + 0.05)

That is why the same Pencil Gray records 4.13:1 on Paper Cream and 4.67:1 on Warm White. The foreground did not change. Its relationship to the surface did.

Use the controls below to test every original brand color against every other one. The static table carries the core results for readers using RSS, print, assistive technology, or no JavaScript.

Interactive figure

Test the palette as a reading system

Foreground Paper Cream · #F4EBD7 Warm White · #FFF9ED Graphite · #252420 Pencil Gray · #777064 Faded Blueprint · #7F9FB3 Signal Amber · #E0A64F Soft Sage · #9BA083 Deep Brown · #3A2E25 Ocean Gray Blue · #6F8FA3 on Background Paper Cream · #F4EBD7 Warm White · #FFF9ED Graphite · #252420 Pencil Gray · #777064 Faded Blueprint · #7F9FB3 Signal Amber · #E0A64F Soft Sage · #9BA083 Deep Brown · #3A2E25 Ocean Gray Blue · #6F8FA3

Selected pair

Tools should make difficult systems easier to inspect.

foreground / background

13.10:1 Pass · normal text Pass · large text and UI graphics

Read the complete static comparison

Foreground	Paper Cream	Warm White	Normal text on Paper
Graphite	13.10:1	14.81:1	Pass
Pencil Gray	4.13:1	4.67:1	Fail
Faded Blueprint	2.36:1	2.67:1	Fail
Signal Amber	1.82:1	2.06:1	Fail
Soft Sage	2.29:1	2.58:1	Fail
Deep Brown	11.09:1	12.54:1	Pass
Ocean Gray Blue	2.89:1	3.26:1	Fail

What the numbers permit

The original palette produces several distinct roles on Paper Cream:

Color	Ratio	Responsible role
Graphite	13.10:1	Primary text, headings, rules
Deep Brown	11.09:1	Alternate strong text
Pencil Gray	4.13:1	Large metadata or graphic detail, not normal body text
Ocean Gray Blue	2.89:1	Large graphical accent
Faded Blueprint	2.36:1	Diagram fill, border, or background treatment
Soft Sage	2.29:1	Decorative or redundant state cue
Signal Amber	1.82:1	Highlight field, marker, or underline

The mistake would be to “fix the palette” by darkening every original swatch. A source palette and an interface role map do not need to be identical. The archival blue can remain itself in an illustration while a darker derived blue carries link text. Signal Amber can remain luminous because it is not being asked to carry a sentence.

Passing text is not the entire test

A ratio is a floor, not a reading experience.

Text size, weight, font shape, line length, spacing, screen quality, and the reader’s vision all affect comfort. A 4.51:1 result does not automatically make a thin, tiny label good. This site uses Graphite for long reading and keeps the darker Pencil token for metadata that is still above the normal-text threshold.

Interactive components add more requirements:

• Focus indicators and control boundaries need at least 3:1 against adjacent colors.
• Information cannot rely on color alone, so the laboratory prints “Pass” or “Fail” beside its status marker.
• Touch targets need physical room even when the typography is small.
• Hover cannot be the only way to discover an action.
• A reduced-motion preference must not remove information.

The contrast laboratory uses native select controls, a live text result, explicit status labels, and a complete HTML table. The visual sample is useful, but it is not the only carrier of the result.

The design-system decision

The useful output of this audit is not a list of forbidden colors. It is a separation of responsibilities:

:root {
  --brand-pencil: #777064; /* archival source */
  --text-secondary: #6b655a; /* readable operational token */
  --brand-blueprint: #7f9fb3; /* diagrams and fills */
  --link: #345a70; /* readable interactive text */
  --signal: #e0a64f; /* markers, fields, underlines */
}

A palette becomes a reading system when its roles are tested in context. Until then, it is only a set of attractive possibilities.

Footnotes

1. W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.3: Contrast (Minimum). The criterion specifies at least 4.5:1 for normal text and 3:1 for qualifying large text. ↩