Color

Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.

Color is organized by three main categories:

• Literal colors that give familiar names to your starting color palette
• Foundational colors that lay the groundwork for your theme
• Semantic colors that draw attention and convey meaning

Literal Colors Jump to heading #

Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.

Lightness values on this scale have a strong correlation to relative luminance, which is used to calculate color contrast. To meet WCAG 2.1 success criteria for minimum or enhanced contrast, even across hues, calculate the difference between the lightness values of any two colors:

• A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
• A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
• A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)

Web Awesome defines seven literal colors each with 11 lightness values using the format --wa-color-{name}-{#}.

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

• 95
• 90
• 80
• 70
• 60
• 50
• 40
• 30
• 20
• 10
• 05

Foundational Colors Jump to heading #

Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.

Surfaces Jump to heading #

Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where --wa-color-surface-raised is the closest to the user (e.g., dialogs and popup menus) and --wa-color-surface-lowered is the farthest away (e.g., wells).

Text Jump to heading #

Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.

Overlays Jump to heading #

Overlays provide a backdrop to isolate content, often allowing background context to show through.

Shadow Jump to heading #

Web Awesome uses a single color for all shadows. This is used alongside other shadow properties to construct your theme's shadows.

Interactions Jump to heading #

Focus Jump to heading #

Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other focus properties to construct --wa-focus-ring. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.

Hover and Active Jump to heading #

Web Awesome leverages color-mix() to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through color-mix(), these custom properties contextually generate hover and active colors based on the color of the component.

Semantic Colors Jump to heading #

Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format --wa-color-{group}-{role}-{attention}. There are five groups of semantic colors:

• Brand to emphasize your brand color
• Success for validity or confirmation
• Neutral for ordinary or inactive content
• Warning for caution or uncertainty
• Danger for errors or risk

Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:

• Fill for background colors or areas larger than a few pixels
• Border for borders, dividers, and other stroke-width elements
• On for content displayed on a fill (e.g., pair --wa-color-danger-on-loud with --wa-color-danger-fill-loud)

Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:

• Quiet draws the least attention
• Normal draws some attention
• Loud draws the most attention