Learn Accessibility by Building a Quiz - Step 46

Tell us what’s happening:

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.

Your code so far

<!-- file: index.html -->

/* file: styles.css */
/* User Editable Region */

nav > ul > li {
    background-color: #dfdfe2; 
}

nav > ul > li > a {
    color: #1a1a1a;  
    text-decoration: none; 
}


/* User Editable Region */

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 46

1 Like

do not change the background color, change only the text color, and make it with an appropriate contrast with the existing background

please solve this step i dont understand

I can’t solve it for you

You have added a new background to the elements, remove it, you should not add a new background, instead you need to make the text visible on the existing dark background

delete this

here you need to assign a color, that makes the text readable

nav > ul > li {
background-color: #dfdfe2;
}
i set this code but still not working

as I already said, delete that.

You only need to add the color rule to the a elements.

nav > ul > li {
color: #1a1a1a;;
}
i added that code but not working

dark on dark is a bit difficult to read, as the background is almost black you need to try something lighter

Use opposite color value for text.

thanks for your assistant

Thanks for your assistant