Contrast (Design Principle)

Using differences in color, size, or shape to create visual hierarchy and interest.

stellae.design

Design Principles

Contrast is the principle of making elements visually distinct from one another. It can be achieved through color, size, shape, texture, typography weight, or spacing. Contrast serves two critical functions: it creates visual hierarchy (telling users what matters most) and ensures readability (text must be distinguishable from its background). WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text. Beyond accessibility, contrast is the primary tool for directing attention — the element with the highest contrast on a page naturally draws the eye first.

Why It Matters

Contrast is the visual design principle of making elements noticeably different from one another to create visual hierarchy, direct attention, and communicate the relative importance of information on a page or screen. Without sufficient contrast, interfaces become flat fields of sameness where users cannot distinguish primary actions from secondary ones, headings from body text, or interactive elements from decorative ones — every element competes equally for attention, which means nothing stands out. Contrast is also a fundamental accessibility requirement: WCAG mandates minimum contrast ratios between text and background colors to ensure that content is readable by people with low vision, color blindness, or those viewing screens in challenging lighting conditions.

Real-World Examples

Apple's Human Interface Guidelines typography scale

Apple's design system creates contrast hierarchy through a carefully calibrated combination of font size, weight, and color that makes titles, headings, body text, and captions instantly distinguishable at a glance without relying on decorative elements or color coding. The large bold title draws the eye first, medium-weight subheadings organize content into scannable sections, and lighter body text recedes into a comfortable reading rhythm. This systematic approach to typographic contrast is why iOS interfaces feel clean and navigable even when displaying dense information.

Stripe's documentation call-to-action hierarchy

Stripe's documentation uses high-contrast purple buttons for primary actions, medium-contrast outlined buttons for secondary actions, and low-contrast text links for tertiary navigation, creating an instantly scannable action hierarchy on every page. The contrast differences are large enough that users can identify the recommended next step within milliseconds of scanning the page, even before reading any labels. This deliberate contrast mapping means users rarely click the wrong action, reducing error rates and support burden.

Counter-example

Low-contrast gray text on white background

A minimalist design trend leads a team to set body text in light gray (#999) on a white background, achieving a contrast ratio of only 2.8:1 — far below the WCAG AA minimum of 4.5:1 for normal text. Users with normal vision strain to read the content in anything other than ideal lighting, while users with low vision or presbyopia cannot read it at all. The pursuit of visual sophistication directly excludes a significant portion of the audience and creates legal accessibility liability.

Role-Specific Guidance

Common Mistakes

• The most common mistake is checking contrast ratios only for text colors while ignoring the contrast of interactive elements like buttons, form borders, focus indicators, and icons against their backgrounds — WCAG 2.1 requires 3:1 contrast for all non-text UI components. Another frequent error is designing contrast exclusively for light mode and then generating a dark theme by simply inverting colors, which often produces jarring or insufficient contrast because the luminance relationships that work on light backgrounds do not automatically transfer to dark ones. Teams also conflate contrast with color vibrance, using saturated or clashing colors to create visual distinction when size, weight, spacing, and whitespace can create a more sophisticated and accessible hierarchy.