New Brand Digital colors

Objective(s)
• Create a new color palette that is
o related to our current brand colors
o designed for digital content and consumption
o ADA compliant
Background
• With work being done for the new site redesign, it has become apparent that many of our current brand colors do not meet the ADA standard for contrast compliance, especially when being used as a background color with white text.
• There have been four new text colors that have been proposed
o White #fff
o Blue #0079c2
 Recommending we replace this with #0066b8 for text
o Gray #666666
o Dark Gray #171717
After running an audit of the current Visual Design styles that have been proposed, we saw that many of these color combinations failed to meet the requirements needed based on level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
• Tool used: https://webaim.org/resources/contrastchecker/
Current color combinations:

• While three of the color combinations did pass for Large text, it is our recommendation to not use the combinations at all to ensure that they are not misused unintentionally.

Constraints:
• Use colors that are ADA compliant for white text
• Use colors that work with our Brand principles:
o Relatable
o Trustworthy
o Motivating
o Confident
o Stable and Established

• Create a color palette that works well together as a whole

• Ensure enough flexibility with the base colors to allow for shades and tints to be used for more robust illustrations and infographic work.

• Ensure enough variety and choices of base colors (10) that can be spread across our different subsites.

o Recommendations: not all sites need to use all 10 colors, but can choose 3-5 as their main color palette.

Solution(s)
• Base colors are ADA compliant with white text:
o
• Color choices were based on the above constraints and research behind the meaning of color to make sure they match with our brand principles

Proposed base colors with spectrum options and recommended accent color:
Color Name Visual Meaning*/Brand Alignment
Bright Salmon • enthusiasm (aligns with motivating
• determined (aligns with confidence and stability)
Burgundy • sophistication (established)
• thoughtful (trustworthy)

Bright Green • confidence (confident)
• security (established)
Teal Green • inspiring (motivating)
• emotionally uplifting (relatable)
•trust (trustworthy)
NYL Blue • contentment (relatable)
• determined (motivating)
• ambitious (confident)
Steel • responsibility (trustworthy)
• calmness (relatable)
Bright Blue • calming (relatable)
• helpful (motivating)
Cool Magenta • kindness (relatable)
• innovation (motivating)

Purple • selfless (trustworthy)
• humanitarian (relatable)
Dark Gray • mature (established)
• intelligent (confident)
• reliable (relatable)

Sources:
https://www.entrepreneur.com/article/175428
www.color-wheel-pro.com/color-meaning.html
http://www.empower-yourself-with-color-psychology.com
Next Step(s)
• Stress test colors and color combinations on full page layouts
• Present findings and proposal to the broader team for feedback
• Present full report to the Branding team
• If all colors are approved, send documentation and hex values to the FED team

Up Next:

Untitled