.wa-palette-natural
| 95 | 90 | 80 | 70 | 60 | 50 | 40 | 30 | 20 | 10 | 05 | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Red |
|
|
|
|
|
|
|
|
|
|
|
| Yellow |
|
|
|
|
|
|
|
|
|
|
|
| Green |
|
|
|
|
|
|
|
|
|
|
|
| Teal |
|
|
|
|
|
|
|
|
|
|
|
| Blue |
|
|
|
|
|
|
|
|
|
|
|
| Indigo |
|
|
|
|
|
|
|
|
|
|
|
| Violet |
|
|
|
|
|
|
|
|
|
|
|
| Gray |
|
|
|
|
|
|
|
|
|
|
|
Web Awesome color scales are designed to guarantee certain contrast ratios, both per WCAG 2.1 success criteria as well as the emergent APCA specification (planned), so you can ensure that text is both legible to all users, and legally conformant.
A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA).
| 50 on 90 | 40 on 80 | 30 on 70 | 20 on 60 | 10 on 50 | 90 on 50 | 80 on 40 | 70 on 30 | 60 on 20 | 50 on 10 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Red |
3.6
|
4.2
|
4.4
|
4.2
|
3.7
|
3.6
|
4.2
|
4.4
|
4.2
|
3.7
|
| Yellow |
3.6
|
4.2
|
4.4
|
4.2
|
3.7
|
3.6
|
4.2
|
4.4
|
4.2
|
3.7
|
| Green |
3.6
|
4.2
|
4.4
|
4.2
|
3.7
|
3.6
|
4.2
|
4.4
|
4.2
|
3.7
|
| Teal |
3.6
|
4.2
|
4.3
|
4.2
|
3.7
|
3.6
|
4.2
|
4.3
|
4.2
|
3.7
|
| Blue |
3.6
|
4.2
|
4.3
|
4.2
|
3.7
|
3.6
|
4.2
|
4.3
|
4.2
|
3.7
|
| Indigo |
3.6
|
4.2
|
4.3
|
4.2
|
3.7
|
3.6
|
4.2
|
4.3
|
4.2
|
3.7
|
| Violet |
3.7
|
4.3
|
4.3
|
4.2
|
3.7
|
3.7
|
4.3
|
4.3
|
4.2
|
3.7
|
| Gray |
3.6
|
4.2
|
4.4
|
4.3
|
3.7
|
3.6
|
4.2
|
4.4
|
4.3
|
3.7
|
This also goes for a difference of 45:
| 50 on 95 | 05 on 50 | 95 on 50 | 50 on 05 | |
|---|---|---|---|---|
| Red |
4
|
4.1
|
4
|
4.1
|
| Yellow |
4
|
4.1
|
4
|
4.1
|
| Green |
4
|
4.1
|
4
|
4.1
|
| Teal |
4.1
|
4.1
|
4.1
|
4.1
|
| Blue |
4
|
4.1
|
4
|
4.1
|
| Indigo |
4.1
|
4.1
|
4.1
|
4.1
|
| Violet |
4.1
|
4.1
|
4.1
|
4.1
|
| Gray |
4
|
4.1
|
4
|
4.1
|
A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
| 40 on 90 | 30 on 80 | 20 on 70 | 10 on 60 | 90 on 40 | 80 on 30 | 70 on 20 | 60 on 10 | |
|---|---|---|---|---|---|---|---|---|
| Red |
5.6
|
5.7
|
5.8
|
5.6
|
5.6
|
5.7
|
5.8
|
5.6
|
| Yellow |
5.6
|
5.8
|
5.8
|
5.6
|
5.6
|
5.8
|
5.8
|
5.6
|
| Green |
5.6
|
5.8
|
5.8
|
5.6
|
5.6
|
5.8
|
5.8
|
5.6
|
| Teal |
5.6
|
5.7
|
5.8
|
5.6
|
5.6
|
5.7
|
5.8
|
5.6
|
| Blue |
5.6
|
5.7
|
5.8
|
5.6
|
5.6
|
5.7
|
5.8
|
5.6
|
| Indigo |
5.6
|
5.7
|
5.8
|
5.6
|
5.6
|
5.7
|
5.8
|
5.6
|
| Violet |
5.7
|
5.7
|
5.8
|
5.6
|
5.7
|
5.7
|
5.8
|
5.6
|
| Gray |
5.6
|
5.7
|
5.8
|
5.6
|
5.6
|
5.7
|
5.8
|
5.6
|
This also goes for a difference of 55:
| 40 on 95 | 05 on 60 | 95 on 40 | 60 on 05 | |
|---|---|---|---|---|
| Red |
6.3
|
6.2
|
6.3
|
6.2
|
| Yellow |
6.2
|
6.3
|
6.2
|
6.3
|
| Green |
6.2
|
6.2
|
6.2
|
6.2
|
| Teal |
6.3
|
6.2
|
6.3
|
6.2
|
| Blue |
6.2
|
6.2
|
6.2
|
6.2
|
| Indigo |
6.3
|
6.2
|
6.3
|
6.2
|
| Violet |
6.3
|
6.2
|
6.3
|
6.2
|
| Gray |
6.2
|
6.3
|
6.2
|
6.3
|
A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
| 30 on 90 | 20 on 80 | 10 on 70 | 90 on 30 | 80 on 20 | 70 on 10 | |
|---|---|---|---|---|---|---|
| Red |
7.7
|
7.6
|
7.7
|
7.7
|
7.6
|
7.7
|
| Yellow |
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
| Green |
7.6
|
7.6
|
7.7
|
7.6
|
7.6
|
7.7
|
| Teal |
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
| Blue |
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
| Indigo |
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
7.6
|
| Violet |
7.6
|
7.7
|
7.6
|
7.6
|
7.7
|
7.6
|
| Gray |
7.6
|
7.6
|
7.7
|
7.6
|
7.6
|
7.7
|
This also goes for a difference of 65:
| 30 on 95 | 05 on 70 | 95 on 30 | 70 on 05 | |
|---|---|---|---|---|
| Red |
8.6
|
8.6
|
8.6
|
8.6
|
| Yellow |
8.5
|
8.5
|
8.5
|
8.5
|
| Green |
8.5
|
8.6
|
8.5
|
8.6
|
| Teal |
8.5
|
8.5
|
8.5
|
8.5
|
| Blue |
8.4
|
8.5
|
8.4
|
8.5
|
| Indigo |
8.5
|
8.5
|
8.5
|
8.5
|
| Violet |
8.5
|
8.6
|
8.5
|
8.6
|
| Gray |
8.4
|
8.5
|
8.4
|
8.5
|
If you are using a Web Awesome theme that uses this palette, it will already be included. To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
Simply add the following code to the <head> of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/color/natural.css" />
Simply add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/styles/color/natural.css');