DesignTech · EXP #09
RATIO
A browser-based color-balance workspace applying the 60–30–10 principle to interface design, with an interactive real-interface inspector, WCAG and color-vision accessibility checks, and export to CSS, JSON, SVG or PNG.
All experimentsProblems solved
- I find it hard to make website colours look right
Context
Most designers can shortlist colors that look good together — the harder question is how much space each one should occupy. RATIO set out to make the classic 60–30–10 interior-design color principle usable for interface work, deliberately without AI generating the palette for you.
The challenge
The product needed to make an abstract ratio feel concrete — showing not just percentages but where each color role actually belongs in a real interface — while staying strictly a decision-support tool rather than a generator that picks colors on someone's behalf.
Research
Traced the 60–30–10 rule back to its interior-design origins — one dominant surface, one supporting color, one used sparingly — and used that as the frame for translating it into interface color roles rather than inventing a new model.
Insights
The key findings that shaped the direction.
Designers don't need colors generated — they need where clarified
Most people opening a color tool already have candidate colors in mind; what's missing is a clear answer to how much space each one should take, not a fourth option to choose from.
Balance and legibility are two separate questions
A palette can be proportioned perfectly and still fail someone with a color-vision deficiency — the tool needed to check both independently instead of folding accessibility into a single 'looks good' score.
Seeing colors in a real interface beats seeing swatches
A color ratio means little as three flat blocks — the Interactive Color Inspector, letting someone click through a real Marketing, SaaS or Editorial layout, is what makes the abstraction concrete.
How decisions were made
- 01
Visualise the ratio before anything else. Led with a direct 60/30/10 bar showing Dominant, Secondary and Accent proportions, so the core idea is legible in the first five seconds without any explanation needed.
- 02
Let people click through a real interface, not swatches. Built an Interactive Color Inspector across five real contexts — General Product, Marketing, SaaS, Pricing, Editorial — so each color role is seen doing an actual job, not sitting in an isolated chip.
- 03
Separate balance from legibility, explicitly. Ran WCAG contrast checks and protanopia, deuteranopia, tritanopia and grayscale simulation as a distinct pass from the ratio visualisation, so a well-balanced palette that fails accessibility can't hide behind a good-looking ratio.
- 04
Refuse to generate colors on the user's behalf. Deliberately left color choice to the designer — RATIO explains and checks a palette rather than producing one, keeping the deliberate, designer-led decision at the center of the product.
Solution
A browser-based color-balance workspace applying the 60–30–10 principle to interface design, with an interactive real-interface inspector, WCAG and color-vision accessibility checks, and export to CSS, JSON, SVG or PNG.
- Live 60/30/10 ratio visualisation for any Dominant, Secondary and Accent palette
- Interactive Color Inspector across five real interface contexts — General Product, Marketing, SaaS, Pricing, Editorial
- Ratio Playground for testing alternative color distributions without changing the palette
- Plain-language Palette Insights and export to CSS variables, JSON, SVG or PNG
Keep exploring
More experiments worth trying.
More time for what really matters.