--- title: 'Contrast and Emphasis' source: 'https://academia.sh/en/courses/interface-fundamentals/contrast-and-emphasis' course: 'Fundamentals of Interface Design' language: en updated: '2026-08-17T18:11:08+00:00' license: 'CC BY-SA 4.0' --- # Contrast and Emphasis Separating contrast as a perceptual principle from the contrast ratio as a measured quantity; computing visual weight from area and luminance difference, and auditing emphasis shares as a budget. The previous two lessons always treated distinction in one direction: bringing an element forward. That view behaves as if a single element existed on screen. But emphasis is a shared resource. The action row beneath a catalog record holds three buttons — Borrow, Add to List, Share — and bringing all three forward produces the same result as bringing none of them forward. This lesson treats emphasis as a budget. Measuring the budget requires computing visual weight first, and computing that requires separating contrast from the contrast ratio. ## Contrast Is a Principle, Contrast Ratio Is a Measurement In everyday language, two distinct concepts often collapse into a single word, so this course keeps the distinction throughout. **Contrast** is a perceptual principle: the difference between two elements declares that they are separate things. Contrast can be established through color, but also through size, shape, direction, texture, or space. A large heading's relationship to a small metadata line is a size contrast; a single vertical element in a horizontal list is a direction contrast. The **contrast ratio**, by contrast, is a measured quantity: a single number derived from two colors' relative luminances, ranging from 1:1 to 21:1. A contrast ratio is defined only for a pair of colors; a size contrast has no contrast ratio. The practical consequence of this distinction is that the question "is there enough contrast between these two elements" cannot be answered by measuring the contrast ratio alone. The contrast ratio measures a single channel; the principle covers every channel. ## Computing Visual Weight An element's power to draw attention was treated qualitatively, through channels, in the previous lesson. In a region with filled and bordered elements, such as an action row, this power can be quantified. The model this course uses is the following: **Visual weight is the product of the area of the surfaces that stand apart from the background and those surfaces' relative luminance difference from the background.** Fill and border are computed separately and summed. The model ignores text; what it measures is the colored surface. This is not a gap but a deliberate simplification: in an action row, what determines the decision is the button's fill and border, not the label text itself. ```js // 03-emphasis.mjs — computes visual weight and emphasis share in the action row // Model: an item's visual weight is the sum of the areas that stand out from the // background (area x relative luminance difference). Fill and border are computed // separately. Text weight is ignored in this model; what is measured is the colored surface. function channel(v) { const s = v / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); } function luminance(hex) { const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)); return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b); } function contrast(a, b) { const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); } const BACKGROUND = "#ffffff"; const ACCENT = "#1b4d3e"; function weight(item) { const area = item.width * item.height; const fill = item.fill ? area * Math.abs(luminance(item.fill) - luminance(BACKGROUND)) : 0; const perimeter = 2 * (item.width + item.height); const border = item.border ? perimeter * item.borderWidth * Math.abs(luminance(item.border) - luminance(BACKGROUND)) : 0; return fill + border; } function scenario(name, items) { const weights = items.map((o) => ({ name: o.name, value: weight(o) })); const total = weights.reduce((t, a) => t + a.value, 0); console.log(`${name}`); console.log(" item visual weight share"); for (const a of weights) { console.log( ` ${a.name.padEnd(15)} ${a.value.toFixed(0).padStart(14)} ${((100 * a.value) / total) .toFixed(1) .padStart(5)}%` ); } console.log(` total weight: ${total.toFixed(0)} largest share: ${( (100 * Math.max(...weights.map((a) => a.value))) / total ).toFixed(1)}%`); console.log(""); } // A: one primary action. Secondary is bordered, tertiary is bare. scenario("scenario A one primary action", [ { name: "Borrow", width: 120, height: 40, fill: ACCENT, border: null, borderWidth: 0 }, { name: "Add to List", width: 128, height: 40, fill: null, border: ACCENT, borderWidth: 1 }, { name: "Share", width: 76, height: 40, fill: null, border: null, borderWidth: 0 }, ]); // B: all three actions filled. scenario("scenario B three filled actions", [ { name: "Borrow", width: 120, height: 40, fill: ACCENT, border: null, borderWidth: 0 }, { name: "Add to List", width: 128, height: 40, fill: ACCENT, border: null, borderWidth: 0 }, { name: "Share", width: 76, height: 40, fill: ACCENT, border: null, borderWidth: 0 }, ]); // C: primary unchanged, secondary suppressed to neutral gray. scenario("scenario C secondary suppressed", [ { name: "Borrow", width: 120, height: 40, fill: ACCENT, border: null, borderWidth: 0 }, { name: "Add to List", width: 128, height: 40, fill: null, border: "#767676", borderWidth: 1 }, { name: "Share", width: 76, height: 40, fill: null, border: null, borderWidth: 0 }, ]); console.log("border color's contrast ratio with the background (WCAG 1.4.11 threshold 3:1)"); for (const color of [ACCENT, "#c9c9c9", "#767676"]) { const o = contrast(color, BACKGROUND); console.log(` ${color} ${o.toFixed(2)}:1 ${o >= 3 ? "passes" : "fails"}`); } ``` ``` scenario A one primary action item visual weight share Borrow 4517 93.5% Add to List 316 6.5% Share 0 0.0% total weight: 4834 largest share: 93.5% scenario B three filled actions item visual weight share Borrow 4517 37.0% Add to List 4819 39.5% Share 2861 23.5% total weight: 12197 largest share: 39.5% scenario C secondary suppressed item visual weight share Borrow 4517 94.3% Add to List 275 5.7% Share 0 0.0% total weight: 4792 largest share: 94.3% border color's contrast ratio with the background (WCAG 1.4.11 threshold 3:1) #1b4d3e 9.64:1 passes #c9c9c9 1.66:1 fails #767676 4.54:1 passes ``` ## Emphasis Is a Budget The comparison between scenario A and scenario B is this lesson's main finding. The Borrow button's visual weight is identical in both scenarios: 4517. An element that has not changed at all sees its share drop from 93.5 percent to 37.0 percent. Nothing was done to the button; what changed sat beside it. Emphasis share is a ratio, and the ratio's denominator is the total weight on screen. There are two ways to bring an element forward: enlarging its share or shrinking the denominator. The second route is usually cheaper, because it consumes no screen space. Scenario B's second finding is more unsettling. When all three buttons are drawn the same way, the highest share does not go to Borrow but to **Add to List: 39.5 percent.** The reason is plain geometry: its label is longer, so its button is wider — 128 pixels against 120. When every action is drawn the same way, what determines the emphasis order is not the action's importance but its label's character count. This shows why the decision to "bring everything forward" does not merely erase the hierarchy but also builds a **wrong** one. The absence of hierarchy is not a neutral state; a random ordering fills the vacancy. ## The Limit of Suppression The denominator-shrinking route is tested in scenario C: the secondary action's border is pulled from the accent color to neutral gray. The result rises from 93.5 percent to 94.3 percent. The gain is 0.8 points. This small number matters, because it runs counter to intuition. Fading the secondary action does not bring the primary action forward by any noticeable amount; the real difference comes from **not drawing the secondary action filled** at all. The gap between scenario A and B is 56.5 points; the gap between A and C is 0.8 points. In the emphasis budget, the gain comes not from turning noise down but from never adding it. Suppression also has a floor. If the border color is pulled even lighter, visual weight keeps dropping, but at some point the border becomes invisible. The output's last block measures exactly this: the `#c9c9c9` border gives a 1.66:1 contrast ratio against the background, below the 3:1 threshold that WCAG 1.4.11 requires for non-text elements. `#767676`, at 4.54:1, clears the threshold. The rule is this: **suppression stops at the element's perceptibility threshold.** Suppressing an element means placing it second, not making it invisible. How the thresholds are derived and which criterion applies to which class of element is the subject of the Contrast and Accessibility lesson; here it is only established that the budget has a floor. ## Building Contrast on Channels Other Than Color Because the emphasis budget is tight, forms of contrast that do not spend it are valuable. - **Size contrast.** In the catalog, the distinction between the record title and the metadata is established without spending any extra color. Its cost is vertical space. - **Shape contrast.** An element with rounded corners stands apart among sharp-cornered ones. Its cost is that the shape decision starts to carry meaning: once a rounded corner has started saying "action," it cannot be used as decoration. - **Direction contrast.** A horizontal band stands out strongly in a vertically flowing list. Its cost is that the change in direction interrupts the reading flow. - **Space contrast.** An element left with empty space around it stands apart from elements surrounded by content. Its cost is the risk of disrupting the grouping ratios computed in the previous lesson. What these channels have in common is that none of them enters the contrast ratio measurement. An interface passing an accessibility audit does not mean its contrast is sufficient; the audit measures only the color channel. The reverse also holds: a distinction that fails to clear the color contrast threshold cannot be rescued by reinforcing it with size or shape contrast — the criterion must be satisfied for the color channel separately. ## Summary - Contrast is a perceptual principle that can be built on the color, size, shape, direction, and space channels; the contrast ratio is a measured quantity defined only for pairs of colors. - Visual weight can be modeled as the product of the area of surfaces standing apart from the background and their relative luminance difference, which ties the emphasis discussion to a number. - Emphasis share is a ratio; an element's share can drop purely because its neighbors changed, with the element itself untouched. The measured drop runs from 93.5 percent to 37.0 percent. - When every action is drawn the same way, what determines the emphasis order is the label's length, not the action's importance; the absence of hierarchy is not neutral but random. - The budget's real gain comes not from fading a secondary element (0.8 points) but from never drawing it filled (56.5 points). - Suppression's floor is the perceptibility threshold; the WCAG 1.4.11 criterion requires a 3:1 contrast ratio for non-text elements, and this threshold marks the limit the budget calculation cannot go below. ## Next Step Up to this point, elements were separated, grouped, and emphasized; every step ran through individual elements' own properties. What holds a screen together, though, is not the elements themselves but the **axes** between them: the alignment of left edges, column starting points, the distribution of weight across the two sides of the screen. The next lesson uses the number of alignment axes as a measure, computes the catalog interface's balance moment, and measures on real text how irregular a ragged right edge actually is.