ColorColor System & Accessibility
Color System & Accessibility
It's important when designing and combining colors that legibility is still crystal clear and the audience isn't fighting to read our copy. We adhere to WCAG scoring for typographic legibility on the web.
Follow these suggested palette recommendations to ensure all text is legible.
Light Mode
| Role | Color | Hex | AA | AAA |
|---|---|---|---|---|
| Background | Base Light | #E4E2DB | — | — |
| Text | Pure Black | #000000 | ✓ | ✓ |
| Accent | Deep Blue | #2E2E95 | ✓ | ✓ |
| Graphics | Base Mid | #CCC8BC | ✗ | — |
Mid-tone Mode
| Role | Color | Hex | AA | AAA |
|---|---|---|---|---|
| Background | Base Mid | #CCC8BC | — | — |
| Text | Pure Black | #000000 | ✓ | ✓ |
| Accent | Deep Blue | #2E2E95 | ✓ | ✗ |
| Graphics | Steel Blue | #506D8A | ✓ | — |
Dark Mode
| Role | Color | Hex | AA | AAA |
|---|---|---|---|---|
| Background | Base Dark | #201805 | — | — |
| Text | Pure White | #FFFFFF | ✓ | ✓ |
| Accent | Energy Orange | #EF6A29 | ✓ | ✗ |
| Graphics | Steel Blue | #506D8A | ✓ | — |