Learn Accessibility by Building a Quiz - Step 46

HTML-CSS
1

is this not right?
li>a{color:white contrast:(7/1);}

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}
li>a{color:white contrast:(7/1);}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
}

p::before {
  content: "Question #";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 46

Link to the challenge:

2

I hope you still remember about inheritance. When you set the color to inherit,it will take the color of the parents. You do not need to specify the (white) value. You also do not need that “contrast property and value.”

1 Like
3

Of course is right , try writing them in different rows
color:
contrast:

2 Likes
4

The ‘header’ selector contains the ‘background-color’ property. The color of your ‘a’ elements within ‘li’ elements should have a value that is seven times brighter than that background color in order to be clearly visible to the user. Use the contrast finder to find the color value with that contrast between the background color and the color of the text, and to solve this challenge:

li > a {
  color: find the value with the given tool;
}

This is guidance

2 Likes
5

thankyou, i got through and this website is really good.
but i had a doubt, i put the value of text colour as #dfdfe2 and as #F5F6F7 and i got a response as “everything is ok”, so how do i know which on i have to use?

6

It doesn’t matter as long as your contrast between colors is minimum 7:1. Any other, greater contrast will pass.

1 Like
7

Mod edit: removed
It won’t work without the semi-colon.

8

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
9