Color Theory in Web Design

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

The way colors interact with each other can make or break your brand’s perception. Yet, it’s one of the most overlooked aspects of branding. Many brands fall into the trap of relying on broad, generalized meanings for colors, like red for passion or blue for trust. ↓↓↓ While these are helpful, they aren’t the FULL story. The real power lies in how colors interact with each other within a palette. For instance, vibrant red and green appeal to the holidays, but pair that same red with deeper, muted reds, and you get a luxurious vibe. Hot pink might feel fun or feminine on its own, but combine it with black, and it suddenly exudes confidence and bold energy. The interplay of hues can subtly shift how customers emotionally connect with your brand. But don’t overlook trends either! Take Pantone’s recent Color of the Year, Mocha Mousse. While it might initially seem bland, its ties to sustainability make it a valuable accent for eco-conscious brands. I used it strategically for a high-end chocolate brand, not as the main color, but as an accent. Combined with richer hues, it told a deeper story about sustainable production and high-quality craft, steering away from overused color palettes in the industry. 💡 What’s the key takeaway? Your brand is more than JUST a color. Color is one of the first forms of communication. And how those colors interact, tell a story, and connect emotionally with your audience. Look at how your hues interact across visuals, packaging, and marketing touchpoints. Subtle shifts in contrast or tone can make a big difference in how your audience connects emotionally. Always test your palette as a whole. One approach I love to use when designing brand identities comes from the principles of Joseph Albers, who studied how our brains perceive colors differently depending on their surroundings. For brands, testing how your colors interact with one another is vital. These combinations tell a story about your brand’s tone, energy, and message. Which colors are driving your brand today? Have you considered what story they are telling? #LIpostingdayJune

Small color palettes can have a BIG impact. But how do you build one? As a younger designer, color used to completely overwhelm me. I’d scroll endlessly through swatches, trying to find the perfect combo, only to end up with a rainbow mess or a bunch of colors that just didn’t sit right together. What helped me finally get the hang of it? Limiting my palette. Giving myself fewer options ironically gave me more freedom to focus on balance, contrast, and cohesion. Now, most of my palettes use just a handful of colors—and they feel stronger and more intentional because of it. Here are some tricks I use to build small but mighty palettes: 1. Use a color harmony rule Start with something simple like analogous (colors next to each other on the wheel) for harmony or complementary (opposite colors) for contrast and energy. 2. Vary hue, value and saturation A limited palette doesn’t mean everything should look the same—play with lightness/darkness (value) and intensity (saturation) to keep it interesting. 3. Choose one “hero” color Let one color lead, and support it with tints, shades, or muted neighbors. This keeps your palette feeling cohesive without being flat. 4. Test in grayscale If everything looks the same when converted to black and white, you probably need more contrast. This is a great trick for making sure your design still works visually without color. 5. Consider color psychology What mood are you aiming for? Colors carry emotional weight (think calm blues, energetic reds, or fresh greens), and your palette should reflect your message. Color doesn’t have to be intimidating. Start small, stay intentional, and you’ll be surprised how far a few well-chosen colors can take you!

UX red flag: If you consider yourself a UX designer, don't use inaccessible colors on your portfolio, website, social media images, etc.. Far too often, I come across portfolios, LinkedIn header images, or other assets from UX designers, but the colors are inaccessible. That's a MASSIVE red flag. You're basically signaling to employers that you either don't know about visual accessibility or that you don't care, which you obviously don't want. Remember, your portfolio is a reflection of what you'll be able to do for a company. If your portfolio is visually inaccessible, you're telling potential employers that you won't pay attention to that kind of detail when you're hired. That's how you can quickly disqualify yourself from a job opening. The fix? Get a contrast checker on Figma and make sure everything is visually accessible. If you're using color combinations that aren't accessible, change them. Here are the ratios to hit: - Graphical image 3:1 - Normal text 4.5:1 for AA or 7:1 for AAA - Large text (24px and bold or larger, or 19px or larger) 3:1 for AA and 4.5:1 for AAA Make sure everything is in your favor when you try to get hired. You got this! #UX #Accessibility #UserExperience #UXPortfolio #Portfolio

If your brand colors look great but fail the accessibility test — they’re costing you. A beautiful palette means nothing if your audience can’t read it. Here’s my top 3-check process for creating accessible, brand-right color systems: 1. Contrast Is King Use a contrast checker (like WebAIM) to test all text/background combinations. Aim for a 4.5:1 ratio for WCAG AA compliance. 2. Rollover States Matter Do your buttons or links offer enough contrast on hover? Your default and rollover colors need to meet the 4.5:1 contrast ratio too. 3. Bend the Rules Meeting accessibility standards matters more than enforcing strict brand colors. Adjust the value — not the hue — to meet WCAG compliance. No one will notice, but everyone will benefit. Inclusive design isn’t a limitation — it improves engagement! Does your website pass?

Real talk: The most overlooked competitive edge in brand strategy is a color... Color isn’t décor; it’s memory, emotion, and speed. A signature shade buys you instant recognition in the feed, lowers cognitive load, and makes every impression work harder, higher thumb-stop, stronger CTR, more efficient spend. That’s ROI, not “vibes.” Hermès orange = heritage craft, quiet opulence. One box and you feel atelier hands, ritual, occasion. Clinique mint green = clean, derm-backed, gentle. It’s bathroom-cabinet nostalgia and dermatologist trust before a single word. From a Gen Z lens, color is social currency. We don’t just buy brands, we post them. When your shade mirrors how we want to feel (fresh, capable, elevated), it turns into identity. That’s why the right color can lift branded search, tighten CAC, and compound recall across seasons. How to make a color pay off: Pick the feeling first, then the hex → lock relentless consistency across paid, packaging, site, store → measure like an asset (logo-off recall, “that mint brand” comments, CTR/CPV lifts when color leads). My take: don’t get louder, get unmistakable. If I hid your logo, would your color still tell your story? Drop your brand’s color (and the feeling it owns) below #BrandStrategy #DistinctiveAssets #ColorPsychology #GenZMarketing #BeautyMarketing #RetailMarketing #NostalgiaMarketing #Marketing  #Branding #BrandIdentity #VisualIdentity #Design #PackagingDesign  #DigitalMarketing #ContentMarketing #SocialMediaMarketinG #Ecommerce #DTC #ConsumerBehavior #InfluencerMarketing  #CreatorEconomy #PaidSocial

Did you know that WCAG color contrast applies to more than just text? Under Success Criterion 1.4.11: Non-text Contrast, user interface components and graphical objects must meet a minimum contrast ratio of 3:1 against adjacent colors. This includes buttons, form fields, checkboxes, sliders, and icons, especially those used to convey meaning or trigger actions. If a visual control or icon blends into the background due to insufficient contrast, users with low vision may miss or misinterpret it. To check for this, try using the WebAIM Color Contrast Checker to evaluate your digital content in e-Learning and online courses. Improving contrast for all visual components supports a broader range of users and helps ensure that your interface is perceivable, not just to some, but to everyone. Have you checked color contrast on non-text elements yet? Image Description: Brightspace course titled “Making Online Content Accessible for All Cohort.” The interface features a table of contents made up of rectangular course tiles (cards). Each tile displays a course module title, progress indicator, and two icon buttons at the bottom. An orange arrow points to the question mark icon. When hovered over, it displays a visible label reading “Show Description.” Another arrow points to the WebAIM Color Contrast Checker, which shows a contrast ratio of 8.62:1 between white text (#FFFFFF) and a dark gray background (#4A4C4E), confirming it passes WCAG 2.2 contrast requirements for non-text elements.

Accessibility Tip of the Day: To make content easy to see for sighted users, the WCAG 2.1 recommends a color contrast ratio of 4.5:1 for most text. There are some exceptions, and large text, for example, only has to be 3:1. In general though, with a good color palette, 4.5:1 is at least what you should shoot for everywhere for all text, regardless of size. Why is this important? No one wants to squint to read white text on a yellow background. Additionally, poor color contrast is especially hard for low-vision users and colorblind users. Some cool tools to help check color contrast: 1. If you use Chrome as your browser, the Chrome DevTools have a color contrast checker built into it. Open the DevTools, use the Elements panel, click on the pointer icon in the top-right of the panel, then hover over some text in your UI. You'll see a white rectangle box with information in it next to your element, including the color contrast (see screenshot). 2. WebAIM has a simple contrast checker where you can input your foreground color and background color and see the resulting contrast ratio: https://lnkd.in/g6hUJ2zP 3. If your foreground or background colors use an alpha level (opacity), most color contrast checkers don't attempt to account for it. Just this week I found one though that does take opacity into account when determining the color contrast ratio. I haven't used it a ton yet, but it's the first of its kind that I've found, and it seems promising! https://lnkd.in/g4iup5uC #accessibility #a11y #accessibilitytipoftheday

My client ($1M+ CEO) felt misunderstood. Her business was succeeding but it was attracting the wrong attention. It wasn’t about her. It wasn’t about the service. It was about the branding. It was saying: Successful, but not deeply respected. Credible, but unsophisticated. Professional, but not iconic. Her brand didn’t reflect the high quality value of her and her business. Instead, it got lost in the competition. So I helped her understand how every aspect of the top 1% brands is meaningfully intentional, down to the smallest details. And together we completely rebuilt her brand from the ground up. One aspect we looked at was color. Color speaks volumes about your brand. It evokes emotion. These colors command respect and authority. They say: Luxury. Exclusivity. Prestige. Confidence. 💎 Black = Power + Elegance → Use for: Prestige, timelessness, and mystery → Tip: Pair with silver or gold for instant luxury 💎 White = Simplicity + Purity → Use for: Clean, modern, high-end design → Tip: Let white space lead, less says more 💎 Gold = Wealth + Status → Use for: Legacy brands and opulent touches → Tip: Use sparingly, too much feels superficial 💎 Navy = Trust + Intelligence → Use for: Discreet, quiet luxury → Tip: “Navy + Neutrals” = Sophisticated Authority 💎 Emerald Green = Heritage + Growth → Use for: Luxury rooted in nature or tradition → Tip: Works well with leather textures, wood, and serif fonts 💎 Burgundy = Passion + Prestige → Use for: Classic luxury with warmth, and romance → Tip: Combine with cream or gold for an upscale feel Color is your silent first impression. Make it memorable. Build a legacy. Thanks for reading! Find this helpful? If this resonates, please: ♻️ Repost and inspire others. ➕ Follow Emily Rossetta for daily insights. Image Credit: Respective Owner

I build color palettes the same way a CEO builds a team. Every color has a job. You can implement the same strategy by asking these questions as you design your palette: 1. What will this color achieve? What role will this color serve for your brand? What need does it fulfill that other colors in your palette currently don’t? What is its purpose? Each color in your palette needs to reflect the unique personality of your brand, your consumers, and the meaningful space where you two intersect. It needs to incorporate your brand’s strategy, history, and reality. It must go beyond being a forecasted trend color. Each color must be dialed to elevate your brand’s individual character, relevance, and market leadership. Every color also has a human, marketing, and sales cost – populate your palette with high performers. 2. Who does this color appeal to? Color is an immediate communicator and the quickest way to emotionally connect with your consumers. Who will this color speak to – which of your current customers, distribution channels, or targeted areas of growth? Will it appeal to a big enough or valuable enough audience to make its addition worthwhile? What message does it need to send? Make sure you have a clear sense of what each color in your palette is communicating and who it is speaking to. Nail this. 3. What products is this color applicable for? Look at the products in your line that will get new or additional colors for the season. Does this color make sense for those products – their end-use, materiality, life-cycle, price point? How often can this color be used? Will it show up frequently enough in the line to adequately convey its message and be worth the investment? In that same vein, how can this color be applied – as an all-over color, combined with multiple other palette hues, only as an accent? Does this justify its value? 4. Is this color a team-player? Does this color merchandise well with the other colors in your palette? Does it allow you to create sellable color assortments across products? Is it a color workhorse that can be paired with multiple colors in your palette? Does it inject calculated energy into your line? Color additions should add balance or excitement to your overall palette by working with or off of the other hues. 5. Core, directional, or seasonal? Core colors need to be foundational, chosen for their ability to merchandise with a wide range of other colors, translate well on various materials, and have sustaining appeal with all or the vast majority of your consumers. Directional colors (1-3 yr lifespan) align with the near-future priorities and lifestyles of your consumers and can be more nuanced. These colors will be the dominant visual communicators of your brand’s ethos, culture, and values. Seasonal colors are timely, precise storytellers. They are opportunities for your brand, and thus your consumer, to express a potent, captivating emotion. This is how you put color to work. #color