Backgrounds

Carefully adding background colors and patterns to a web page can enhance its visual appeal and improve user experience when done thoughtfully.

Background colors and patterns should be added to a web page to enhance readability and focus by creating contrast between sections, making content easier to navigate. Patterns & gradients can subtly separate content areas without creating harsh visual breaks. Additionally, they can add visual interest and make a website more engaging, reflecting the brand's identity and evoking specific emotions.

Well-chosen colors and patterns can guide users' eyes to important content or call-to-action buttons, providing a more immersive and enjoyable experience. Consistent use of these elements reinforces brand recognition and conveys professionalism.

Within the Sitefinity Content Management System we’ve adopted a consistent use of the same brand color and pattern background options so as users are building the website content, there is a cohesive, recognizable brand-standard. 

Background colors and patterns are applicable within the HTML view on any WYSIWYG Editor, on Content Block wrappers, on Layout Containers and most modules.

Classes are available for brand color backgrounds, and gradient and patterned backgrounds to be used in conjunction with brand colors. With some basic CSS and HTML knowledge, users can also add background images and videos.

Best practices for adding background colors, patterns and images to webpages:

• Consider Accessibility: Ensure the text-to-background contrast is sufficient for readability and avoid overly busy patterns which can make text difficult to read.
• Use Subtle Patterns: Opt for low-contrast, subtle patterns and use them sparingly in specific sections with a minimal amount of text.
• Maintain Consistency: Use a consistent color scheme and pattern style aligned with overall design and branding throughout the site's webpages.
• Be Mindful of Load Times: Optimize images and patterns to avoid impacting page load times, using formats like SVG and WebP.
• Responsive Design: Ensure colors and patterns work well on all screen sizes and test on multiple devices.
• Context and Purpose: Choose colors and patterns that match the page's context and purpose, such as muted tones for professional sites and playful patterns for children's sites.
• Test User Feedback: Gather and act on user feedback to improve usability and satisfaction.

All UTMB Brand colors are available in pre-written classes for use as a background color.  

Background color gradient extension classes are leveraged by stacking along with a UTMB background color class. This combination makes for a really nice effect on large blocks elements. When using any gradient be sure to test any overlaying text colors on the darkest and lightest part of the gradient to make sure the color contrast passes accessibility tests. 

Background color pattern extension classes are leveraged by stacking along with a UTMB background color class. When using any pattern be sure to test any overlaying text colors on the darkest and lightest part of the gradient to make sure the color contrast passes accessibility tests. Patterns are best used on large blocks elements with the overlaying text added to a solid color color background or card.