Sun + Moon
Brightness is concentration of light in limited space. A bright point draws attention away from dim surroundings. This is not uniform illumination but strategic intensity—highlighting what matters by making everything else relatively dark. Interface design uses brightness as attention allocation: the primary action button glows, secondary options recede. Visual hierarchy emerges from brightness differentials, not from absolute values. A moderately bright element in dim context appears brilliant. The same element in bright context disappears. Brightness is relational, contextual, comparative. You cannot make everything bright without making nothing bright.
Brightness commands attention. The eye moves toward light sources, toward high-contrast areas, toward intense color. This is biological—detecting bright spots helped ancestors locate resources and threats. Design leverages this by making important elements brighter than surroundings.
The primary call-to-action button uses bright colors—vibrant blue, bold red, high-saturation green. Secondary actions use muted colors—grays, pastels, low-saturation variants. The brightness differential creates hierarchy without requiring conscious interpretation. Users naturally look at bright elements first.
But attention is zero-sum. Making one element brighter requires making others dimmer by comparison. A page with ten bright buttons has no bright buttons—everything competes equally. The designer must ration brightness, assigning it to elements that deserve attention and withholding it from elements that shouldn't dominate. This requires prioritization. What deserves user attention? What should recede into background? The brightness budget is fixed; allocation is strategic.
Brightness differential between text and background determines readability. High contrast (black on white, white on black) maximizes legibility. Low contrast (gray on slightly-darker-gray) reduces strain in dark environments but risks illegibility.
The Web Content Accessibility Guidelines specify minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text. These thresholds ensure readability for users with reduced vision. Meeting them requires sufficient brightness differential between foreground and background.
But maximum contrast isn't always optimal. Pure black () on pure white () creates harsh edges that can strain eyes over extended reading. Slightly softened contrast (dark gray on off-white ) remains highly readable while reducing harshness. The brightness differential should be sufficient for accessibility without being oppressively intense. Context matters—presentations in bright rooms need higher contrast than documents read in dim settings.
Human vision adjusts to ambient brightness. The same object appears similarly bright in bright sunlight and dim indoor lighting because the visual system compensates for illumination context. This brightness constancy helps maintain consistent perception across varying environments.
Interface design must account for varying viewing contexts. The screen brightness that works indoors may be invisible in direct sunlight. The dark mode that's comfortable at night may be difficult to read in bright settings. Interfaces cannot assume constant ambient lighting.
Adaptive brightness helps—automatically adjusting screen brightness based on ambient light sensors. But visual design must also accommodate varying contexts. High contrast works across contexts better than low contrast. Critical information should remain visible even in sub-optimal lighting. The design that only works in perfect conditions fails in the field.
Excessive brightness creates glare—light levels that impair rather than enable vision. The bright screen in a dark room causes discomfort. The white interface against dark surroundings feels aggressive. Overexposure is too much of what should be good.
Dark mode emerged partly to address glare issues. Reducing screen brightness by inverting colors (dark backgrounds, light text) decreases light emission and reduces eye strain in low-light environments. The same interface brightness that's appropriate in office lighting creates glare at midnight.
But brightness reduction can go too far. Extremely dim interfaces strain vision differently—the eye must work harder to perceive detail. The balance is brightness appropriate to context. Bright enough for comfortable perception, dim enough to avoid glare. Auto-brightness attempts this balance algorithmically, but user preference matters. Some users prefer brighter screens; others prefer dimmer. Offering manual control alongside automatic adjustment accommodates individual variation.
Bright light sources create bloom—apparent expansion beyond their physical boundaries. A bright star appears larger than it is. A bright UI element seems to expand into surrounding space. This is partly optical (light scattering in the eye) and partly perceptual (the visual system's edge detection).
Designers can leverage bloom for emphasis. A glowing button appears more prominent than the same button without glow. The bloom suggests energy, activity, importance. But excessive bloom reduces precision—edges become unclear, exact boundaries are lost. The glowing element is emphatic but imprecise.
Diffusion is controlled bloom—intentional softening of edges to create gentler transitions. Drop shadows, gradient borders, subtle glows—all use diffusion to integrate elements with backgrounds. The diffused edge reduces harshness, creates depth, suggests layering. But diffusion reduces clarity. Sharp edges communicate precision; diffused edges communicate softness. The choice depends on desired perception.
Photographic principles of focal brightness apply to interfaces. The subject is well-lit; the background is dimmer. This depth-of-field simulation creates visual hierarchy through selective brightness. The focused element is bright and detailed; unfocused elements are dim and less distinct.
Modal overlays use this technique—dimming the page behind while brightening the modal. The brightness differential signals "this is active, that is inactive." Users understand focus has shifted even before reading content. The dimmed background is still visible (maintaining context) but subordinate (clearly not the current interaction target).
But dimming can obscure necessary information. If users need background context to understand the modal content, excessive dimming prevents effective decision-making. The balance is sufficient dimming to indicate focus shift without completely hiding contextual information. The dimmed background should recede without disappearing.
Brightness can communicate state without changing form. A button that brightens on hover signals interactivity. A logo that dims when disabled communicates unavailability. The element's shape remains constant; brightness change indicates state change.
This is efficient communication—minimal visual change conveys maximum information. Users learn that brightness indicates activity, dimness indicates passivity. The pattern becomes conventional, requiring no explicit teaching. Bright is active, dim is inactive.
But brightness state indication requires sufficient brightness range. If normal state is very bright, there's little room to brighten further for active states. If normal state is very dim, dimming for disabled states becomes invisible. The base brightness must be calibrated to allow meaningful variation in both directions. Moderate base brightness enables brightening for active states and dimming for disabled states.
Brightness can vary gradually across space, creating gradients. Light-to-dark gradients suggest depth, directionality, or progression. The gradient communicates information beyond what uniform brightness can.
Interfaces use gradients to suggest three-dimensionality on flat screens. A button with subtle gradient appears raised. A panel with gradient background appears to recede or advance. The brightness variation creates illusion of form and depth.
But gradients add visual complexity. A uniform color is simpler, cleaner, more minimalist. The gradient must justify its complexity by communicating something useful—depth, direction, hierarchy, emphasis. Decorative gradients add noise without signal. Functional gradients serve clear communicative purposes. The modern trend toward flat design rejects many gradients as unnecessary ornament, keeping only those that serve functional purposes.
Brightness can change over time. Pulsing animations, fade-in effects, shimmer states—all use temporal brightness variation to communicate activity or draw attention. The changing brightness signals "something is happening here."
Loading indicators often pulse—brightness increasing and decreasing rhythmically. This communicates ongoing processing without requiring user interpretation. The pulse is universal signal for "working on it." Similarly, notification badges might briefly brighten to signal new activity, then stabilize at moderate brightness.
But animated brightness can be distracting. The element that constantly pulses demands attention whether or not it deserves it. Temporal brightness variation should be temporary—used to draw initial attention, then stabilizing. The animation that never stops becomes visual noise rather than meaningful signal. The brightness that changes must do so purposefully, communicating specific state changes rather than simply moving for the sake of movement.