Learn Accessibility by Building a Quiz - Step 45

HTML-CSS
1

I’m not sure what to do at this junction.

Your code so far

li > a{
	color
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.71

Challenge: Learn Accessibility by Building a Quiz - Step 45

Link to the challenge:

1 Like
2

Don’t know if the topic of ‘contrast ratio’ was explained in the new responsive design certification, if it came out of the blue for you, you may find it usefull to visit the legacy course: chek the “Improve Readability with High Contrast Text” challenge in " Applied Accessibility" segment.
Good Luck!

3 Likes
3

It will be good habit to share more details about the struggle in the future, though…:wink:

4

On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1.
Change the font color of all the anchor elements within the list elements to something with a contrast ratio of at least 7:1.

This is the instruction from the 45th step.

5

If you pay a visit to where I recommended for you to, you would have been informed that there are many color contarst tools on the web.
what you need to do is figuring out what bg-color is, take its value to one such a tool, and make sure contrast-ratio requirments are met.
Please be more descriptive when sharing a problem, I know what is written in the chllenge you linked to, becuse I checked. just not what was in previous challenges, but it doesn’t matter, I think you got enough info here regardless of that.

1 Like
6
7

I’m just trying to figure out what I should do, and the hint read that I should give the a element a color property. but I’m not sure what that even means…

8

Like, am I supposed to make it a separate {} for a?

9

you did well in giving it half ‘color-property’, now just append a color value to it, like that:
color : #
the angeled brackets represents placeholder

10 
li > a{
	a { 
		color: #ffffff;
	} 
}

I tried this, am I doing it wrong?

1 Like
11

The whole concept of numerically calculated visual contrast needs to be explained in the prompt, specifically how to measure against existing colors and which format is best to use: hex, rgb, etc.
If there is not going to be a revision of this prompt, a link to appropriate resources would be better than nothing.

that said, i’ll look into the legacy course prompt for now.

12

have you got the answer or not?

13

set the color property to
li>a{
color:#fff;
}

14

is correct but without the a{ }
li > a {
color: #ffffff;
}

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.