Learn Accessibility by Building a Quiz - Step 46

[Kaijyuu]

Tell us what’s happening: it says to make the contrast ratio 7:1 but they haven’t even explained how to manipulate the contrast, let alone how to know when it’s on a 7:1 ratio.

Step 46

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 also happened with the nav > ul > li for CSS they made us use it and didn’t explain what nav is. When I look for it on google all I get is “navegation” and not “nav” in CSS.

Your code so far

li > a{
  color: contrast-ratio(7:1)
}

Challenge Information:

Learn Accessibility by Building a Quiz - Step 46

freeCodeCamp.org

[stephenmutheu]

Hey. Welcome to our forum.
Here, we are giving the text a color property that ensures the background-color and the text-color have the desired contrast level.

In your case the background color is #1B1B32. I have used a Color Contrast checker to confirm the contrast ratio. I used this one.

Color Contrast Checker - Coolors

Then went ahead and performed the following tests.

1. I converted the ratio to a number, the number is 7. That our new contrast value.

2. I gave the text a color (black) the contrast level was 1.25, lower that expected, therefore, this won’t pass.

3. I further cleared my doubts by using white for the text and black for the background color, the contrast value was 16.81, this passed the test as it exceeds 7.

4. I used pink as the text color and this as the background-color #1B1B32, the contrast value was 10.93, this also passed the test.

I hope this helps.

[CrlosZgz]

Hello.

In this step, you need to change the color of the links in the navbar,so that they read well.

If the background is black, the links should have the opposite color. White for example.

Try to set the color to white

Greets.