Colors

<aside> 💡 Contrast checker: https://webaim.org/resources/contrastchecker/

</aside>

Light Mode

  1. When the container background differs from the page background (also fine if it is the same), the container background should be lighter:

Frame 427320786.png

Frame 427320787.png

  1. It is recommended that the primary color be dark enough to show up on the background:

Recommended contrast ratio is above 4.5

Frame 427320789.png

Frame 427320790.png

Frame 427320791.png

  1. Text on primary should be white:

Frame 427320792.png

Frame 427320793.png