So we should have soft contrasts.
Yes. Softer contrasts but not too soft as well. (If you make it too soft it will be harder for color blind people to read)
Minimum contrast ratio recommended is 3:1 (don’t make it softer than that)
Ok, are there any tools for checking the contrast.
I never used any tool, I just look at the design and estimate whether it is too low or not.
But if you want to double check, this website does that for you:
Hold on I will create a design where contrast ratio is too low to show you as an example
Look at this design (text below main title Mahatma Gandhi has too low of a contrast by my judgement):
Mm, yes its difficult to read.
Ok, go through this website for colors. Try to design with better colors with what you find on this site:
(Again I will guide you through, just try learning by yourself and come back to me with a different color choice design)
Ok. Surely I will follow your instructions and come with a new design tomorrow. Thanks a lot for spending your valuable time with my project.
I also have online classes from my school and I am spending the rest of the time studying coding. It feels really good receiving advices from an expert.
I have tried to improve the contrast ratio and the sizes of the elements. I am not sure if it is good now.
Still, I am having problems with the spacing. Please tell what changes should I bring into my code to solve this problem. I tried my best to solve the issues still I am not sure. Please go through my code.
Here’s the link to my code.
How can I decrease the space between the main heading ie Mahatma Gandhi and Warrior Of Peace. What changes should I bring in my code to do that.
I will make another one with a different color selection after fixing these main problems.
I will give you inputs to help you with that, but keep in mind that what you are doing is not at all required for completing the exercise. (You already have completed the exercise).
What you are doing is additional work to improve your skills, outside of the actual curriculum (good job for that btw).
Will go through your code and give inputs in a bit…
I will not give you answers directly, I will guide you through so that you can figure it out yourself:
Starting from the top… Giving lesser space between the title (Mahatma Gandhi) and the subtitle itself…
What would be your best guess as to how you would try to approach that? (If you don’t know just say that, I am here to help you)
Sir, it is a
<p> text now. When I tried changing it into h2 it is getting far again.
I don’t have an idea,
What happens when you change the margin-bottom of an element?
Oh the margin from the bottom goes up.
So i can put some margin-bottom to the h1 element.
Yes do that, as well as add an id to your p element (maybe id=“subtitle”)
and in you css, give a margin-top to your p element
Can you check it out now?
Ok, I see you have given them both 20px… what happens if you set them both to 0 px?