Learn accesability by building a quiz: question 46

Learn accesability by building a quiz: question 46 want’s me to select a color for the link that has a high contrast. I chose one using a contrast checker with 8.5:1 and it marked it wrong. It then suggested a color that made the link almost impossible to see! Am I missing something?

did you maybe also ask on Discord this same question?

#dfdfe2 on that background gives a contrast ratio of 12.64:1 which is well above minimum contrast requirements for accessibility. Could it be even better? Sure, you could use plain white and get a contrast of 16.81, but then there are people who have trouble reading bright white text on dark colors and thus it is generally considered best practice to tone it down just a little.

But from a technical accessibility perspective, the suggested solution is perfectly fine.

I assume we are talking about different links. The challenge is talking about the links in the list items. That would be the links in the header/nav. Not the link in the footer, which at this point does not have the background color (yet).

Ahh, I think I see the problem. This test accepts the following solution:

a {
  color: #dfdfe2;

This is what @kurtisjfarthing is using and thus it is turning all the links that color, which includes the link in the footer. Yes, that footer link would be inaccessible with that color.

I was testing using the “real” solution:

li a {
  color: #dfdfe2;

Which of course only affects the links in the header and thus the link in the footer remains accessible.

Seems like we have a bug that needs to be created in github. Hey @kurtisjfarthing, did you want to do this?

Yeah, this was the issue I was having. Um…sure, I’ll give it a shot!

1 Like

Ya, sorry for my potentially confusing post above. Since the instructions for the step were about links inside of a list, which only occurs in the header, I didn’t even look at the bottom of the page to notice that link in the footer.

The links in the nav ends up using inherit and getting the color from the list item.

I guess since the link style doesn’t stay as it is in this step, scoping it to the list items for this step would work as well and might avoid any confusion.

No worries, I actually thought it was a different problem at first haha. I have a GitHub but never created a bug but I’ll figure it out!

1 Like

You can ask here if you have any questions about creating the issue. The main problem is that the tests are too lenient for this step and are allowing bad CSS to pass. The CSS should be targeting links inside of a list, but instead they are allowing all links.

I created the bug. I was pretty clear and added a screen shot.

1 Like

Yes, sorry. Was trying to figure out what happened. Thanks for your help!

The problem was I selected all links, not just the li links, so it changed the color of the link in the footer which is almost impossible to read at that color. It still marked it as correct.

I’d change the title to “Problem with step 46 in Accessible Quiz” or something like that. There are a lot of step 46’s in RWD.

Oh my bad, ill change that

All right, it’s updated