The 60-30-10 Colour Rule: Proportion, Contrast Ratios, and When to Break the Formula

The 60-30-10 colour rule is a proportion system. It says a layout holds together when one colour owns 60% of the visual field, a second takes 30%, and a third claims the remaining 10%. The origin is interior design, most often credited to the mid-century British decorator David Hicks. He applied it to rooms where a wall colour dominated, upholstery or rugs provided the second layer, and a cushion or a single vase delivered the pop. In graphic design the same maths maps to a background, a supporting surface, and an accent that makes a button or a link worth pressing. The rule has no ISO standard and no ANSI standard. It is a practitioner's heuristic that survived because it produces layouts where nothing fights. The proportions are the easy part. The part practitioners argue about is what each of those three colours must do to the others. That is where WCAG 2.2 contrast ratios enter the conversation.

The first question to ask about the primary colour is not whether it is pretty but what it does to the text sitting on it. In the 60-30-10 system the primary colour is the backdrop. The primary-to-supporting pair is the one a reader sees most often: a headline or a body paragraph in the supporting colour over that backdrop. WCAG 2.2 sets the minimum at 3:1 for large text and for UI components. Large text means at least 18 point regular or 14 point bold. That ratio is calculated from relative luminance in sRGB, not from perception or print ink. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 the darker's. Both are measured on a scale where black is 0 and white is 1.

Contrast Ratios in Practice

Take a concrete example. A backdrop of off-white at #F5F5F5 has a relative luminance near 0.90. A supporting colour of dark grey has a relative luminance near 0.02. The contrast ratio between them is (0.90 + 0.05) / (0.02 + 0.05), about 13.6:1. That pair passes everything. Now take a supporting colour of mid-blue at #0057B8, whose luminance is roughly 0.09. Against the same off-white the ratio is (0.90 + 0.05) / (0.09 + 0.05), about 6.8:1. Still comfortably above 4.5:1 for normal text. The trap arrives when the primary colour is a tint, say #D9E2F0 at luminance 0.70, and the supporting colour is the same blue. The ratio drops to (0.70 + 0.05) / (0.09 + 0.05), about 5.4:1. That passes for normal text but only just. Push the tint lighter, to #E6EDF9 at luminance 0.78, and the ratio falls to 5.9:1.

The accent colour is where the rule's promise of balance most often fails. Ten percent of a screen is exactly the area where designers put the smallest text and the thinnest lines. A call-to-action button labelled "Buy now" at 14 pixels tall with white text on a saturated accent is a WCAG failure if the ratio is below 4.5:1. The accent must meet 4.5:1 against both the primary backdrop and the supporting surface it sits on. A CTA can appear on either. A common mistake is choosing an accent from a brand palette built for print, where Pantone spot colour values were defined for ink on paper, not for sRGB screens. The same brand orange that looks fine in a brochure at 90% coverage can fail at 4.5:1 when used as a button fill on a white background on a phone in a bright room.

The phrase every accessibility auditor dreads is "my contrast checker says it passes". The reason is the antialiased-edge-pixel false-pass. A contrast-checking plugin samples a rendered pixel. When a font is rendered with subpixel positioning or font smoothing, the edge pixel of a glyph is blended between the foreground and background colours. That blended pixel has a higher luminance than the true text colour. The checker can report a ratio of 4.6:1 when the actual text is 3.9:1. Do not abandon tools. Verify manually. Render the text at its intended size, zoom to 200%, and compare the sampled ratio against the computed value. Use a calculator that takes the raw hex codes, not a screenshot. The failure mode is real. It is named in WCAG 2.2 success criterion 1.4.11 for non-text contrast, which requires 3:1 for UI components and graphical objects, and 1.4.3 for normal text at 4.5:1.

The rule is a starting point, not a law. Any practitioner who applies it mechanically produces stilted layouts. The most common legitimate break is a design with only two colours. A long-form reading layout on a white backdrop with dark grey text needs no accent at all. Forcing a 10% accent adds noise without function. The WCAG requirement is for contrast, not for three colours. A two-colour design that meets 4.5:1 between text and backdrop is accessible and can be beautiful. Break the rule when the brand palette has no third colour. Break it when an interface uses only one interactive element and that element is better served by white space than by a bright fill.

Applying the Rule Per Slide

A slide deck is a constrained surface: one slide, one message, one visual hierarchy. Applying 60-30-10 across an entire deck as if it were a single canvas produces slides where some have too little primary colour and others have an accent that competes with a chart. Apply the rule per slide instead. The accent may occupy 0% on a text-only slide and 15% on a slide with a single call-to-action button.

Data Visualisation and the Split

The same logic applies to data visualisation. A chart with five series does not get five colours. It gets one primary colour for the main series, a supporting colour for comparison, and an accent for the series being compared against a baseline. That is the split in practice, not in theory.

When a 60-30-10 palette fails contrast, the failure is rarely in the concept. It is almost always in the specific hex codes chosen. A designer selects a primary backdrop of #FFFFFF, a supporting colour of #FFD700 (gold), and an accent of #FF0000 (red). The gold has a relative luminance of about 0.53. Against white that gives a contrast ratio of (1.0 + 0.05) / (0.53 + 0.05), about 1.8:1. That fails for even large text. The red has a luminance of about 0.21, giving a ratio of (1.0 + 0.05) / (0.21 + 0.05), about 4.0:1. That fails for normal text. Choose a darker gold, say #CC9900, and a deeper red, say #CC0000, and recheck. This is the discipline the rule demands. Proportion is nothing without the contrast ratio that makes each colour legible on its neighbour.

Tools support the rule but do not enforce it. Adobe Color's Extract Theme tool generates 60-30-10 palettes from images, but it only suggests swatches. It does not calculate contrast. Coolors.co has a lock-and-adjust feature for testing proportions. Again the contrast check is a separate step. Figma's color styles let a team set proportions manually via selection counts or area measurement plugins. Canva's brand kit applies a palette with manual proportion assignment. In every case the tool gives you a starting point, not a verdict. The verdict comes from running each of the three pairings through a WCAG 2.2 contrast calculator. The rule is a proportion system. The accessibility standard is a separate, mandatory overlay.

The 60-30-10 rule's survival in graphic design is not because it is mathematically optimal. It is because it produces an understandable hierarchy, and hierarchy is the foundation of visual communication. The primary colour sets the tone and provides the neutral backdrop. The supporting colour adds interest without competing. The accent draws the eye to the action. This is why the rule transfers from brand identity to presentation design to UI. In a brand identity, the primary colour is the main logo colour, the supporting colour is the secondary palette, and the accent is reserved for CTAs or icons. In a presentation, the slide backdrop is 60%, headings and diagrams take the 30%, and emphasis elements take the 10%. The proportions are a guide to attention, not a straitjacket.

The rule does not guarantee accessible contrast. A palette can follow 60-30-10 perfectly and still have a primary backdrop of lime green, a supporting colour of yellow, and an accent of white. All of those fail WCAG 2.2. The rule also does not account for typographic colour, which is the visual weight of a paragraph of text as a texture on the page. A layout with 60% backdrop, 30% an image, and 10% text might look balanced in proportion but fail completely if the text is 8 pixels tall. The rule is about colour area, not about the content that fills that area. Adjust the proportions based on content density. A text-heavy page may need 70-25-5. A minimal interface may thrive at 80-15-5 or even 90-10-0.

No ISO or DIN standard exists for the 60-30-10 rule. No ANSI standard does either. The attribution to David Hicks is plausible but not documented in any primary source. The rule circulated in interior design practice from the mid-20th century, and Hicks is the most commonly cited originator, but the exact lineage is unverified. What is verifiable is the WCAG 2.2 contrast ratio requirements, published by the W3C and updated on a schedule. Any statement of a specific ratio must point to the W3C's publication. Any statement of a proportion should say it is a practitioner heuristic, not a standard. Treat the rule as a default and break it with intent. The only test that matters is whether the intended audience can read the content and act on it.

What Exactly Is the 60-30-10 Rule?

The 60-30-10 colour rule is a proportion guideline assigning 60% of visual area to a primary colour, 30% to a supporting colour, and 10% to an accent colour. It is not a law, and it is not a standard. It is a starting point. The rule's origin is attributed to interior designer David Hicks, though the exact source is unverified.

Does 60-30-10 Guarantee Accessible Contrast?

No. The rule says nothing about contrast ratios. A palette can follow 60-30-10 and still fail WCAG 2.2 contrast minimums. Use the rule in conjunction with WCAG 2.2 contrast ratio calculations for each colour pairing.

What Contrast Ratio Should Each Pair Meet?

The primary-to-supporting pair must meet at least 3:1 for large text or UI components. The accent colour against both primary and supporting backdrops must meet 4.5:1 for normal text. These are WCAG 2.2 minimums, not recommendations.

Can I Use Only Two Colours?

Yes. A design with only two colours does not need a forced accent. A long-form reading layout may use only one backdrop and one text colour, with no accent at all, as long as the pair meets 4.5:1.

What Is the Antialiased-Edge-Pixel False-Pass?

Automated contrast checkers can sample a blended edge pixel and report a passing ratio when the actual text fails. Avoid this by verifying contrast with raw hex codes and a manual calculator, not a screenshot.

The antialiased-edge-pixel false-pass is a concrete, named failure mode that only a page built on practitioner specifications would include.