Use the 60-30-10 Color Rule as a Layout Exercise
Try a dominant surface, supporting color and accent without treating a proportion guideline as an accessibility or conversion rule.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
The 60-30-10 rule is a composition exercise: give one color most of the visual area, another a supporting role and a third a small accent role. Use it to examine hierarchy, not to calculate an obligatory percentage for every web page. It does not establish readability or predict which button users will click.
Apply it to a reading page
For an editorial page, try a cream canvas, navy headings and a coral accent. Count large surfaces and images when assessing visual balance; counting CSS declarations will not describe the visible proportions. Keep the article body comfortable to read even if that pushes the layout away from the nominal ratio.
A reproducible text and background example.
Same pair, larger text.
##172554 / ##FFF7ED
Navy reading text on a warm cream surface.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##FF7F50 / ##FFF7ED
Coral as small text on the same surface: check the failure before using it.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixAssign the accent a specific job
In this example coral can decorate a category marker. If it becomes the background of a button, add a separately tested on-accent text token. If it marks an error, also supply an error message. A small area allocation does not exempt its content from readability checks.
:root {
--canvas: #FFF7ED;
--text: #172554;
--accent: #FF7F50;
--on-accent: #000000;
}Adjust for real content
Preview a short article, a long article and a mobile layout. A full-width photograph or stacked card can dominate the screen. Move decorative color out of the way of the content when necessary; do not add filler blocks just to satisfy a ratio. In dark mode, choose role values again instead of assuming the same swatch proportions will read the same way.
Check the result
Open the cream, navy and coral palette in Studio. Inspect the text pairs and try a UI preview. Keep a screenshot with the content length and viewport noted so your composition decision can be reviewed.