Color Contrast
The difference in luminance between foreground and background colors, critical for text readability and accessibility. WCAG guidelines require minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text. Use contrast checking tools to ensure your color combinations are accessible to users with visual impairments. See Understanding contrast ratio.
Accessibility
Accessibility
The practice of designing websites that can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities. Beyond being ethically important, accessibility improves SEO, expands your audience, and is legally required in many jurisdictions. Key practices include proper heading structure, alt text for images, sufficient color contrast, and navigationkeyboard navigation support.
Stroke
Design
The border or outline applied to shapes and text, defined by weight, color, and style like solid, dashed, or dotted. Strokes add definition, create contrast, or achieve specific visual styles like outlined buttons. Framer offers stroke controls including width, color, and position (inside, center, outside).
WCAG
Accessibility
Web Content Accessibility Guidelines—international standards defining how to make web content accessible to people with disabilities. WCAG compliance is increasingly required legally and expands your potential audience. Aim for at least WCAG 2.1 AA conformance.
Visual Hierarchy
Design
The arrangement of elements to show their order of importance through size, color, contrast, and position. Strong hierarchy guides users through content in the intended order and highlights key actions. Squint at your design—hierarchy issues become obvious when details blur.
HEX Value
Design
A HEX Value is a web color notation like #RRGGBB used in CSS and design tools to represent exact RGB color values.
Readability
Typography
Readability describes how comfortably users can consume written content, influenced by typography, line length, spacing, and visual contrast.
Dark mode
Design
Framer supports dark experiences through color choices, tokens, and component variants, making it easier to design interfaces that feel polished in low-light or high-contrast contexts.