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 defined by your theme's color palette and are the lowest level color tokens in your theme. Each token is identified by a name, like red or gray, and a number based on the color's lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.

You can use these numbers to ensure accessible color contrast per WCAG 2.1 success criteria:

• 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)

Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format --wa-color-{hue}-{tint}.

• 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

• 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 tokens 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 tokens 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