CodingNic

Polish and Testing

Audit Text Contrast Without Losing the Ledger Style

Polish and Testing 12 min read

Audit Text Contrast Without Losing the Ledger Style

Open client/src/lib/constants.js and the components that use the text colors.

Keep the warm paper aesthetic, but distinguish between primary, secondary, and muted text. Supporting information such as dates, labels, and categories should remain readable instead of becoming decorative beige.

A simple hierarchy is enough:

css
/* Primary information */
color: var(--ink);

/* Supporting information */
color: var(--ink-secondary);

/* Hints and decorative labels */
color: var(--ink-muted);

In this project those roles are represented by readable ink constants rather than a large design system.

Test it

View the Ledger, Summary, and Categories pages at normal brightness. Check dates, labels, categories, and error text at a glance.

Checkpoint

The interface keeps its paper-ledger character while secondary information remains readable.