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.



In styles.css, change the text color within the body tag to #333333 so it has more contrast to the white background.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?