freeCodeCamp / contribute

> docs site for all things contributions. begin your contribution journey here.
https://contribute.freecodecamp.org
BSD 3-Clause "New" or "Revised" License
42 stars 63 forks source link

Color Contrast Issues #154

Open bbsmooth opened 4 months ago

bbsmooth commented 4 months ago

Not sure if you are ready for accessibility issues?

Describe the bug There are a few color contrast issues that do not meet WCAG mininum contrast requirements:

On a side note, you can do away with the 3:1 contrast requirement for link vs non-link text by using another method for distinguishing these links, such as underlining them. But if color is going to be the only way to distinguish the links, then they must have at least a 3:1 contrast with the surrounding text.

bbsmooth commented 4 months ago

OK, this is weird. I tested this in another version of Firefox and the non-link text in light mode is now showing as #000, which does give it more than a 3:1 contrast with the link text. Not sure what is going on here, but if the default text color is really black then you can ignore my first bullet point above. But the other two bullet points are still there.

Update: Oh wow, now even this Firefox has suddenly switched back to having the default text as #1B1B32 instead of pure black and bullet point one is valid again.

Second update: I figured it out. When you first view the page in light mode, the default text color is pure black. But if you use the toggle to switch to dark mode and then switch back to light mode, you get the #1B1B32 color instead. So I think all three bullet points above are valid.

a2937 commented 4 months ago

I wanna try to match the legacy colors as much as I reasonably can. Do you have some suggestions for colors I can use? I could probably combine it with the PR I made to resolve dark theme.