Background
Scandic Hotels, the leading hotel chain in the Nordics, operates in six countries, each with its own set of local agencies and interpretations of the brand. While red was the core brand color, its use lacked consistency—agencies often added arbitrary colors, making it difficult to maintain a unified visual identity across markets.
To solve this, I redefined the color strategy for both print materials and digital products. I introduced a system of pre-paired color sets—each combination carefully designed to complement the Scandic brand while allowing enough flexibility for creative execution. This not only eliminated confusion but also provided a scalable solution for consistent brand application across all regions.
Scandic Colors
I inherited a fragmented color palette, with each market adding their own variations.
Brief
To kick off the project, I created a clear and concise brief outlining the core issue—lack of brand consistency across regions. The goal was to ensure everyone involved understood the problem and could contribute insights toward a unified solution.
Objective:
Develop a new set of colors that align with Scandic’s brand essence of “Warm Friendly” while ensuring maximum accessibility for all users.
Background:
- Our current brand colors: Red, Brown, Sandstone, and White.
- The rebranding efforts should be showcasing that accessible design can be both functional and aesthetically captivating.
Considerations:
- The color palette should not only be a visual treat but should also evoke emotions of warmth, friendliness, and trust.
- Explore the usage of bold, high-contrast pairings as seen in Wise’s approach.
- Strive for AAA accessibility ratings, prioritising user experience and inclusivity.
Colors in use
- High-Quality Print:
- Brochures
- Posters
- Low-Quality Print:
- Suitable for in-house printing within hotels. Examples include:
- Signages
- Digital Platforms (Advertisements):
- Advertisements displayed across various online platforms.
- Digital Platforms (Web and App):
- Web interfaces, website banners, and mobile app layouts.
- Presentations:
- Optimized for monitor screens, but also designed to maintain quality and clarity on lower-resolution devices such as TVs and projectors.
Key Deliverables:
- Inclusive Brand Colors: A set of new colors that represent Scandic’s values, ensuring they are ADA compliant and align with modern accessibility standards (WCAG 2.1/3.0 and APCA).
- Contrast and Readability: Colors that pass the contrast requirements, especially for vital UI components, ensuring ease of readability.
- Versatility: Colors that can be used in various mediums including our website, branded items, presentations, and more.
- Simulation Results: Using tools like the “Color Blind” Figma plugin to ensure that the chosen colors are still coherent and aesthetically pleasing for those with color vision deficiencies.
- Documentation: A comprehensive guide detailing the new color palette, its applications, and the reasons behind each choice.
Scandic Key color format:
- Foreground/Background Pairs: Colors should be meticulously paired to maintain visibility, aesthetics, and brand consistency.
- Shade Variations: Every primary color should possess various shades to ensure:
- Dynamic digital interactions: such as hover, focus, disabled, and active states.
- Versatility in design: like backgrounds for content blocks and other design elements.
- Color Overlays: Design often involves nesting or overlapping elements. It’s pivotal to determine which color combinations work best together to retain visibility and contrast. For instance, discerning if a red foreground can overlay a sandstone or black background without losing its significance.
- Color Ratios in Themes: Depending on the context, the proportion in which colors are used can vary. Examples:
- Promo Theme: Red (50%), White (50%)
- App/Web Theme: Action Red (10%), Sandstone (20%), Brown (20%), White (50%)
- System Information Colors: Apart from the standard brand palette, there are essential colors used for system messaging:
- Info: Typically a blue or light shade to convey neutral information.
- Warning: Often an amber or yellow to indicate caution.
- Error: Traditionally red to signify something critical or wrong.
- Success: Generally green to denote a positive or successful action.
Exploration
There’s a common misconception that accessible design means compromising on aesthetics. That the result will feel too plain, too restrained — even boring. But good design is inclusive by nature. And simplicity doesn’t mean less — it means clarity.
At Scandic Hotels, we serve a wide range of guests, from young digital natives to older generations. Our products need to work for everyone, without exception. When we set out to refine our design system, our guiding principle was simple: bold, accessible, and timeless.
Color plays a vital role in how people experience our brand. It’s the first impression, the emotional tone, the connective thread across platforms. Creating a new, accessible color system wasn’t a detail — it was the foundation.
In the end, I defined two distinct but connected color groups.
The first is Scandic’s core palette — built around the brand’s signature red, supported by white, peach, and burgundy. These colors form the foundation of the identity, rooted in warmth, clarity, and recognition.
The second group is a set of add-on color pairings: dark green, light green, warm black, warm white, burgundy, light blue, dark blue, and pale yellow. Each of these was carefully selected and tested to work harmoniously with Scandic’s primary red — ensuring contrast, accessibility, and visual balance across digital and print.
This system allows flexibility without fragmentation — empowering teams across countries to stay on-brand while designing for a wide range of audiences.
SCANDIC MAIN BRAND COLORS
ADD-ON COLOR PAIRINGS
Test, test, test
WCAG vs APCA: A Contrast Conundrum
While reviewing our color selection process, we found that WCAG 2’s contrast formula can be overly simplistic — especially with light text on dark backgrounds — often recommending combinations that aren’t truly legible.
Enter APCA (Advanced Perceptual Contrast Algorithm), part of the upcoming WCAG 3. It offers a more accurate approach to color contrast by factoring in how humans actually perceive color, including font weight and style.
Colour accessibility isn’t all about maths. Sometimes you just need empathy. According to Colour Blind Awareness, there are approximately 300 million people with colour blindness worldwide. That’s almost the same number as the entire population of the USA. But as designers, it’s not always easy to put yourself in their shoes.
Luckily, there’s a brilliant Figma plugin called Color Blind that does just that. We ran this simulator on our new colour set to see how each colour would appear to colour blind users, then weaved the adjusted shades through key product screens. This helped us to understand how well our new colours were working for the 8 most common types of colour blindness (spoiler alert, it’s not just grey scale).
Top tip — I’d recommend this low vision simulator too. It really helps you simplify designs and see where you need to up the contrast.
Design Testing
To make a confident final decision, we tested all color combinations across multiple designs and touchpoints — from UI screens to print materials — to ensure consistency, accessibility, and visual harmony in every context.
Final product
Impact
We reduced over a thousand inconsistent color variations down to just twenty carefully defined colors. Of those, only three are core brand colors, supported by black and white as neutral foundations, and six add-on color pairings.
This streamlined system allows Scandic to manage branding across six countries and multiple agencies — all from a single, unified source. It eliminates confusion, ensures consistent color use, and strengthens the brand across both print and digital touchpoints.