High Contrast

High-contrast modes improve legibility for users with low vision, glare sensitivity, or strong visual discomfort. Beverly should support this by ensuring that UI clarity does not depend on subtle color differences or low-contrast surfaces.

Design expectations

A high-contrast interface should still communicate:

• state and hierarchy
• distinction between primary and secondary actions
• boundaries between cards, panels, and controls
• focus visibility and error or warning states

Key rules

• Avoid relying on color alone to signal meaning.
• Keep text contrast strong enough for readability.
• Use borders, outlines, fill changes, or labels to reinforce differences.
• Maintain visible focus on all interactive elements.
• Treat shadows and glass effects as supplements, not the primary source of separation.

Beverly guidance

Theme tokens should support strong foreground/background contrast across surfaces. Glass, translucent, and layered treatments are useful, but they should never weaken the legibility of typography or the clarity of interactive states.

The app shell should define a robust visual hierarchy for:

• primary text
• secondary text
• interactive states
• alert and caution surfaces
• disabled content

Quality check

A good high-contrast mode should feel deliberate, not harsh. The interface should remain calm and legible while preserving the product’s brand and information hierarchy.