Contrast measured, not guessed

Every text and accent colour is chosen by measuring real WCAG contrast against the surface it will sit on, so no brand colour can produce an unreadable page.

What it is

Colour maths that computes relative luminance and contrast ratios, then walks a colour's lightness until it clears a minimum against every surface it must sit on. Text picks the brand-tinted near-black or near-white that clears AAA, falling back to pure black or white when a tint is too weak. Near-white or near-black brand colours are nudged into a usable saturation band so the accent can never vanish.

Also called: text unreadable on my brand colour · accessibility · light logo dark logo

See it
Contrast measured, not guessed
🔒ridgelinepostframe.com/project/access943
Equipment Storage
Framing · on schedule
A grid of brand colours (navy, barn red, gold, evergreen) all rendering the same legible page. src/lib/portalTheme.ts. Sample data — no customer information appears here.
How it works
  1. 1readableOn tries brand-tinted candidates first and returns the first clearing 7:1
  2. 2ensureContrast steps lightness in a direction until the minimum ratio is met
  3. 3A fallback to a plain readable near-black or near-white applies when the ramp cannot clear the bar
  4. 4The portal logo sits on a light chip whenever the band behind it is dark
Why we built it

Setting text and accent colours by a fixed lightness rule produced text that was legible for half the colour wheel and unreadable for the other half, because gold, lime and cyan at the same nominal lightness are far brighter to the eye than navy or maroon. Contrast is measured against the actual background and the colour stepped until it clears the threshold. Where brand fidelity and legibility conflict on text, legibility wins. Logos get a chip behind them matched to their own tone, so dark, light and wordmark logos all read without the builder having to think about it.

The problem
  • Fixed-lightness palettes failing for half the colour wheel
  • Logos vanishing against a brand-derived band
  • Accessibility failures on customer-facing documents
Sound familiar?
What you get
Any brand colour produces a legible page
Builders never have to test or tune their palette

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →