27 KiB
title, description, layout
| title | description | layout |
|---|---|---|
| Color | Ensure consistent use of color and readable contrast with Web Awesome's color properties. | page-outline |
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
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
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
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).
| Custom Property | Preview |
|---|---|
--wa-color-surface-raised |
|
--wa-color-surface-default |
|
--wa-color-surface-lowered |
|
--wa-color-surface-border |
Text
Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
| Custom Property | Preview |
|---|---|
--wa-color-text-normal |
AaBb |
--wa-color-text-quiet |
AaBb |
--wa-color-text-link |
AaBb |
Overlays
Overlays provide a backdrop to isolate content, often allowing background context to show through.
| Custom Property | Preview |
|---|---|
--wa-color-overlay-modal |
|
--wa-color-overlay-inline |
Shadow
Web Awesome uses a single color for all shadows. This is used alongside other shadow properties to construct your theme's shadows.
| Custom Property | Preview |
|---|---|
--wa-color-shadow |
Interactions
Focus
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.
| Custom Property | Preview |
|---|---|
--wa-color-focus |
Hover and Active
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.
| Custom Property | Preview |
|---|---|
--wa-color-mix-hover |
mixed |
--wa-color-mix-active |
mixed |
Semantic Colors
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-loudwith--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
| Custom Property | brand |
success |
neutral |
warning |
danger |
|---|---|---|---|---|---|
--wa-color-*-fill-quiet |
|||||
--wa-color-*-fill-normal |
|||||
--wa-color-*-fill-loud |
|||||
--wa-color-*-border-quiet |
|||||
--wa-color-*-border-normal |
|||||
--wa-color-*-border-loud |
|||||
--wa-color-*-on-quiet |
AaBb |
AaBb |
AaBb |
AaBb |
AaBb |
--wa-color-*-on-normal |
AaBb |
AaBb |
AaBb |
AaBb |
AaBb |
--wa-color-*-on-loud |
AaBb |
AaBb |
AaBb |
AaBb |
AaBb |