Yetrics

Try a colour on the whole product

Two colours, not one. The accent is the brand; the clock is the one reserved signal that says a timer is running. They have to stay unmistakably different, so the preview checks that too — and every pair is measured against WCAG rather than eyeballed.

Applies to the product, this site and all ten homepage designs. Nothing is saved for anyone but you.

Contrast · light

  • 6.23Button label on the accent≥4.5
  • 6.23Accent text on a card≥4.5
  • 5.77Accent text on the page≥4.5
  • 7.44Soft chip text on its fill≥4.5
  • 5.77Focus ring against the page≥3
  • 6.01Button label on the accent≥4.5
  • 6.01Accent text on a card≥4.5
  • 5.56Accent text on the page≥4.5
  • 7.26Soft chip text on its fill≥4.5
  • 5.56Focus ring against the page≥3
  • 1.04Accent against clock — they must not blur together≥1.4

Pairs that work

The six in the app plus four more. All pass in both themes.

YYetrics1:12:40
In progressRunning
Reconcile October against the finance export1:12:40
Row-level security for regional managersIn review
Backfill three years of transactionsIn review

Hours this week

Retail Analytics Rebuild82%
Patient Flow Dashboard61%
Internal24%

Body text at the size the app actually uses, so you can see whether the accent still reads against it. A link in the accent colour sits in a sentence like this one.

The six already in the app

Each ships its own clock colour, chosen to stay in a different family from its accent. On Ember, where the accent is already warm, the two swap and the clock goes teal.

  • HarbourDeep teal, amber clock
  • UltravioletViolet, amber clock
  • EmberRust, teal clock
  • MossForest green, amber clock
  • CobaltBlue, amber clock
  • GraphiteNear-monochrome — the clock is the only colour

Comparing homepage designs instead? All ten are here.