Why is our button that blue?
Posted: Sat Apr 05, 2025 3:26 am
Rationale: We can, but in this environment, we want the primary button to stand out more than the tabs so that we minimize cognitive load and disrupt the flow of visual scanning.
Branding
Connects and roots the experience in a familiar and established visual language. Example scenario:
Question:
Rationale: That’s our brand color.
Accessibility
Follows Web Content Accessibility Guidelines (WCAG). Example scenario:
Question: Why don’t we make that color lighter? I think it looks better.
Rationale: If we were to do that, we wouldn’t be meeting WCAG guidelines, and following those guidelines is required. Looking better isn’t always the most inclusive approach for users.
There are many additional considerations that might affect engineer data your conversations around color. Some include scale, brand, and messaging. Knowing the scale of the impact of your color decisions will help you determine the color themes and how they interplay. Work with your brand team (could be internal or an agency) to understand how best to represent the design in the user interface.
Related, identify what colors will signify messaging patterns like success, warning, error, among other significant states. Make conscious choices about how else these colors might exist – or not – in the visual language. If there are instances where messaging colors overlap with brand, collaborate with the brand team to decide what color(s) to use.
Branding
Connects and roots the experience in a familiar and established visual language. Example scenario:
Question:
Rationale: That’s our brand color.
Accessibility
Follows Web Content Accessibility Guidelines (WCAG). Example scenario:
Question: Why don’t we make that color lighter? I think it looks better.
Rationale: If we were to do that, we wouldn’t be meeting WCAG guidelines, and following those guidelines is required. Looking better isn’t always the most inclusive approach for users.
There are many additional considerations that might affect engineer data your conversations around color. Some include scale, brand, and messaging. Knowing the scale of the impact of your color decisions will help you determine the color themes and how they interplay. Work with your brand team (could be internal or an agency) to understand how best to represent the design in the user interface.
Related, identify what colors will signify messaging patterns like success, warning, error, among other significant states. Make conscious choices about how else these colors might exist – or not – in the visual language. If there are instances where messaging colors overlap with brand, collaborate with the brand team to decide what color(s) to use.