Contrast Ratios

I’m on step 46 of building a quiz and it’s about colour ratios. I struggled for a while, it was asking for a 7:1 contrast, how am I meant to know what a 7:1 contrast is?
I’m basically asking if anyone has any tips or advice on learning more about this as although I’m great with colour palettes, clearly I need to learn about contrast and ratios.
I found a website that seems to be helpful? I’d appreciate the help! Thanks!


Heyo! I just reached this part of the project and struggled with finding colors that pleased whatever internal checker they had. Thank you for sharing this question. :slightly_smiling_face:

(You may have already realized this answer and moved far past this subject level, so I am writing this answer to help myself and future freeCodeCampers. If you no longer need this answer, feel free to ignore my essay, lol.)

I ended up struggling with this question so much that the course guide provided a hint with a color hexcode that would work. :see_no_evil: However, I was confident that there were other shades that would satisfy the contrast ratio provided. Rather than memorizing which color combinations would satisfy certain contrast ratios (a herculean task!), I agree that we are meant to seek websites such as the one you posted to help us choose the best color combinations for accessibility! Plugging in the code for one of the pieces and choosing the best color for the other piece from there is a much more reasonable expectation.

The website you provided was very helpful. I think people can find the color of the text-background from the previewed website by right-clicking said background in the preview and then clicking on “Inspect Element” to view what color is actually being used. You can then plug that into the accessibility/color picker website before looking for a text-color that would satisfy the stated ratio.


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.