Change the link colour on FAQ page to be more web accessible

[rufaida99-k]

Terms

• [X] I have searched open and closed design issues
• [X] I agree to follow activist's Code of Conduct

Description

A link on the FAQ page in Light Mode does not meet the Web Content Accessibility Guidelines, as the problem is the element does not have sufficient colour contrast. I am proposing changing the colour of this element to a more contrasting or darker one that does comply with the guidelines instead.

(The link is in light orange)

Contribution

This is the element upon inspection:

.border.xl\:rounded-lg.text-light-distinct:nth-child(3)

INSPECT IMAGE:

and the change to be made is simply going to the styles file and changing:

The Resulting view is:

This colour complies with the WCAG suggested contrast.

[andrewtavis]

Thanks for opening this very important issue, @rufaida99-k! I totally agree with the problem that the text is not responsive... I've been squinting a bit at the links and had it in the back of my head to fix the color there :)

We do have the general interest right now to stick with orange for things. Let me play around with it a bit and see if I can find a way to change the value for light-cta-orange in tailwind.config.ts to something that will work for the buttons and the text over the various background. I'll apply this in the Figma designs to see how it works and then report back to you 😊

Would you like send a PR along to make the change when we figure out a new color?

[rufaida99-k]

Hi @andrewtavis, yes of course, and thank you!

[andrewtavis]

Exciting, @rufaida99-k! I'm in the midst of a grant application for activist today, but I'll work to get the designs updated and figure out what the change should be as soon as I can 😊

[andrewtavis]

Looking at this again in a bit of a break, @rufaida99-k :) Thing is that it's super hard to get orange to be WCAG compliant, especially for light mode... How about we do bold as you suggested, and then we can use the special-text colors that are a bit more grey than the normal text? We could also make a link-text class for this within the frontend's tailwind.css file that combines all this together?

Generally what I'm thinking is:

.link-text {
    @apply font-bold text-light-special-text dark:text-dark-special-text hover:text-light-text dark:hover:text-dark-text;
}

From there we just replace the tailwind classes for all the links. We wouldn't have the underline on hover anymore, but the text would change colors instead, which also matches how we do hover in the links in the footer.

Let me know how this sounds 😊

[rufaida99-k]

@andrewtavis sorry for responding a bit late, this does look good and would help address all the others links with a similar issue as well!

[andrewtavis]

No stress on replying a bit late, @rufaida99-k! Feel free to send along a PR for these changes if you’re still interested in doing that 😊 Would be happy to review and merge it in!

[rufaida99-k]

@andrewtavis I just wanted to triple check before I made a PR, I changed the class for this specific page (and I'm attaching the ss below for the result), do you want me to replace all classes using "text-light-cta-orange dark:text-dark-cta-orange hover:underline focus-brand" to "link-text" as well?

[andrewtavis]

Hey @rufaida99-k! Thanks for checking :) link-text would replace text-light-cta-orange dark:text-dark-cta-orange hover:underline, but would not replace focus-brand that adds the same orange ring around elements when they’re focused.

Something that I’ll check after the PR would be if focus-brand can be included within link-text, so whether it’s possible to add a custom class within another. We could just put the classes from focus-brand within link-text as well because all links will need to appear the same when they’re focused. Would be nice if we could change the focus in one place and have it applied to the other 😊

The above was just me writing some thoughts down 😇 Feel free to send the PR with the change I talked about in the first paragraph! Looking forward :)

[rufaida99-k]

@andrewtavis thank you so much for the clarification! Just made a PR for the same :)

[andrewtavis]

Thank you, @rufaida99-k! Will get to this after work 😊

[andrewtavis]

Thanks for the PR @rufaida99-k! I'll leave this open for now as I am considering how to change the color again to make it show up a bit better 🤔 I'd say it's definitely better for accessibility, but maybe switching it to a blue would make more sense as as of right now the links don't stick out as much as they should.

Another thing is that it looks like your GitHub email isn't set up properly as you're currently not listed in the contributors. This Stack Overflow question talks about it :) Just make sure the email that you use for GitHub is the same that you have for git config --global user.email "your_git_email@email.com" then we should be good :)

[andrewtavis]

@rufaida99-k, 975ad78 makes the links blue for a more traditional link color and also changes the info icons that appear at the top of some pages to blue to match the style 😊 I tests the colors on this contrast checker and it looks like the ones I had selected for links do work.

I'll close this issue now :) :) Let me know if you figure out what's up with your email settings, and maybe you can do the PR for #65 so that you can get in as a contributor 😊 You might also be added retroactively after you get the settings figured out.

[rufaida99-k]

@andrewtavis I figured the email thing out. It was because I had set my primary email as private, so github made a noreply email my visible one. It should be fixed now! :) Thank you so much!!

[andrewtavis]

Thank you! Hopefully you’ll be in the contributors soon then, @rufaida99-k :) I’ll write to you later about #65 😊