What does the area contrast simulator show?

It lays your colors out at different area proportions so you can see how a palette actually reads when one color dominates and others are accents.

What is the 60-30-10 rule?

Split a palette by area into 60% dominant, 30% secondary, and 10% accent for balanced, professional-looking design.

Why test color proportion at all?

The same colors feel completely different depending on how much of each you use; testing proportion catches an accent that's too loud or a base that's too heavy before you build.

Area Contrast Simulator

Evaluate whether primary, secondary and accent colors are balanced by area proportion

Primary Area 60% Secondary Area 30% Accent Area 10%

Area Contrast 60 / 30 / 10 Classic ratio, accent color around 10%

Area Distribution

Larger area = higher visual weight; oversized accent loses its impact

Ratio Diagnosis

Identify risk areas in your scheme based on area proportions

About Area Contrast Simulator

Simulate how primary, secondary, accent, and neutral colors look at different area ratios. Validate the 60-30-10 rule or custom proportions visually. Every ratio adjustment renders instantly, so dragging a slider shows you exactly how a 60-30-10 split — or any custom ratio — will actually read.

Use it before committing to a layout, to catch a color that will end up dominating too much, or fading into irrelevance, once real area proportions are applied.

Common questions

What does the area contrast simulator show? It lays your colors out at different area proportions so you can see how a palette actually reads when one color dominates and others are accents.
What is the 60-30-10 rule? Split a palette by area into 60% dominant, 30% secondary, and 10% accent for balanced, professional-looking design.
Why test color proportion at all? The same colors feel completely different depending on how much of each you use; testing proportion catches an accent that's too loud or a base that's too heavy before you build.