FAQ: Color for UI - Contrast Constraints

This community-built FAQ covers the “Contrast Constraints” exercise from the lesson “Color for UI”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn Color Design

FAQs on the exercise Contrast Constraints

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

The purpose of the exercises for this lesson is never explicit, but I guess we’re instructed to change the background color so that the contact form, colored in white, will pop up and attract the user’s attention. Am I right?

If the title of the lesson is any indication, it is not about, call to action as much as it addresses accessibility for users with visual challenges. Contrast is a very important concern when choosing foreground and background colors.

This doesn’t really have anything to do with anything in the lesson itself. It’s about the HTML structure of this page. My question is why is the form section and the address section nested in so many

elements? There’s four of them before the divs child elements and all the divs are nested inside each other one after the other with everything else nested in all four. I’ve noticed this on a lot of webpages when looking in devtools. Is this just to make certain styling aspects easier in CSS? It seems like the same layout of the webpage could have been accomplished without all of those
tags on top of each other but maybe I’m wrong. I noticed that all the div tags class attributes are shared with class attributes from other elements except for class=“card contact-form-container” on the second
so I’m thinking it’s just to make the CSS easier because you can share certain rulesets and not have to make new ones.