Learn
Color Theory

Color Contrast

Color contrast plays a major role in design as well. Colors opposite of each other on the color wheel tend to have a higher contrast. Colors that fall next to each other have a lower contrast to one another.

When applying color to your designs, it’s vital to ensure contrast levels provide clarity to the users for the elements on your page. For instance, you wouldn't want to use a light color on a white background or a detailed background. It’s essential to try and increase the contrast of your designs in order to promote ease of use and legibility.

This is also the reason why you often see dark gray or black text on a white background. The high contrast between the two colors provides the best ability for users to read the information without any difficulty.

Before we begin to add color to our website, let’s add contrast to the text elements to ensure the readability of our content is ideal.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.