DesignTech
EXP#
9
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.
02
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.
03
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.
04
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.
05
Insights
The key findings that shaped the direction.
01
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.
02
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.
03
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.
06
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.
07
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.
Interactive Color Inspector across five real interface contexts — General Product, Marketing, SaaS, Pricing, Editorial
Live 60/30/10 ratio visualisation for any Dominant, Secondary and Accent palette
Plain-language Palette Insights and export to CSS variables, JSON, SVG or PNG
Ratio Playground for testing alternative color distributions without changing the palette
.png)