search

RITlug / ritlug.github.io

RITlug website
https://ritlug.com
Creative Commons Zero v1.0 Universal
13 stars 22 forks source link

Improve footer link contrast #231

Closed thenaterhood closed 5 years ago

thenaterhood commented 5 years ago

The blue on gray is a little hard to see in the footer in some circumstances, like if you use f.lux or redshift. This lightens it up a hair to make it a little bit better (but not so much as to totally change the look).

Before:

image

After:

image

jwflory commented 5 years ago

+1, looks great! :heart_eyes:

ct-martin commented 5 years ago

I'm finding the new color really hard to read normally (contrast issue?). I have no issue with changing the color, something else might be better though. Using off-white, maybe with an underline, would probably be more readable.

thenaterhood commented 5 years ago

Sure, works for me! I can try out some other colors and see how they do.

Tjzabel commented 5 years ago

@ct-martin the lighter color is harder to read for you than the old color?

For me personally, I have no qualms with the change in color. I can see that it may not be perfect, but I'm not sure the best color options here. If we do a shade of grey/white, I would want the links underlined or italicized in some way to distinguish them from the normal text.

Not sure what the best solution is :man_shrugging:

thenaterhood commented 5 years ago

It's all simple CSS, so easy enough either way :)

We could even try out a lighter shade of blue if we like the blue.

ct-martin commented 5 years ago

(cc @Tjzabel )

So TL;DR color theory, there needs to be a visible distinction with the "decorated" text and both the normal text as well as the background. The most robust distinction purely on the basis of color is contrast (grayscale difference between color values). This works with the white and medium-dark gray, however, it's somewhat more awkward between the white and gray (in part b/c ratios not absolute values).

The issue I had with Nate's was that I found I was glazing over the text as if it didn't exist, which gets to why I didn't have an issue with the current styling. The current styling has a very distinctly different saturation. Grayscale values are zero or near-zero saturation, whereas the blue being used had a very strong saturation yet different enough from black that it could be distinguished as a different contrast. There is an accessibility issue here as Nate discovered, which is what color-blindness & color-modifying filters such as red-shift reduce this saturation. However, Nate's color has a very low saturation while maybe also not having a good contrast with the background gray. When using a red-shift it changed the color enough to add some more contrast based on my observation, but without the red-shift my issue happens. I didn't check, but there are also calculators online for contrast ratios and accessibility.

Anyway, here are the thoughts I had when talking to Nate in-person:

That was probably a lot longer of an answer than was desired... :man_shrugging:

TL;DR - the current color has an accessibility issue, and Nate's does as well. My POV is that we should not change one non-accessibly-friendly color for another. If about what I ballparked for a color doesn't seem to work with and without red-shift I think we should move on to white with something else (preferably an icon or underline) stylistically denoting it as a link. None of them would be hard to do; it's either simple CSS or using a touch of Bootstrap.

jwflory commented 5 years ago

@ct-martin Could you open a new pull request with better color choices?

ct-martin commented 5 years ago

@jwflory maybe; it'd depend on if I have time early next week (since this weekend is homecoming and I'll probably have family visiting). I can mock something simple but I don't have the bandwidth to pursue testing implementations right now beyond giving feedback.

Here's a two-second mock of hsl(240,100%,85%) (aka #B3B3FF): image

If that seems to work for people it could be used; if not then we should probably look at other decoration. Personally, I'm not completely in love with that blue and I'm thinking it may make more sense to prepend a link icon and an underline on hover.

ct-martin commented 5 years ago

Aside: for those interested:

Current color: image

Nate's color: image

My color: image

nlMeminger commented 5 years ago

The current colour isn’t super readable, and I can see where Christian is coming from with nate’s colour. I’m not opposed to the colour Christian has suggested

On Thu, Oct 17, 2019 at 10:03 Christian Martin notifications@github.com wrote:

Aside: for those interested:

Current color: [image: image] https://user-images.githubusercontent.com/25327135/67015794-17cc4f80-f0c5-11e9-8efe-6ded93fadfd4.png

Nate's color: [image: image] https://user-images.githubusercontent.com/25327135/67015842-2ca8e300-f0c5-11e9-8447-ec793f6f79d2.png

My color: [image: image] https://user-images.githubusercontent.com/25327135/67015883-3fbbb300-f0c5-11e9-82f9-45e7d296b9a6.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/RITlug/ritlug.github.io/pull/231?email_source=notifications&email_token=AELFBENMNGCEMQ42EYDVSRLQPBWCJA5CNFSM4I7UGD5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBQGW5I#issuecomment-543189877, or unsubscribe https://github.com/notifications/unsubscribe-auth/AELFBEOBL6A6FWR3APGNWG3QPBWCJANCNFSM4I7UGD5A .

Tjzabel commented 5 years ago

@nlMeminger I didn't know we were in the UK :smile:

nlMeminger commented 5 years ago

Don’t make fun of me for spelling words correctly. Using the correct spellings in my favourite thing besides going to the theatre

On Thu, Oct 17, 2019 at 12:35 Tim Zabel notifications@github.com wrote:

@nlMeminger https://github.com/nlMeminger I didn't know we were in the UK 😄

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/RITlug/ritlug.github.io/pull/231?email_source=notifications&email_token=AELFBEORV6LYPTULVSIUQULQPCH6LA5CNFSM4I7UGD5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBQXPJI#issuecomment-543258533, or unsubscribe https://github.com/notifications/unsubscribe-auth/AELFBEKBR5JUYSHX2F3KDWTQPCH6LANCNFSM4I7UGD5A .

jrtechs commented 5 years ago

@thenaterhood @ct-martin what do we want to do with this PR? I'm fine with merging this branch after we update it with the purple color @ct-martin mentioned.

hsl(240,100%,85%) (aka #B3B3FF):
ct-martin commented 5 years ago

@jrtechs I still think a white with styling would be better. I'll be at FOSS Hours this week, could you remind me to play with it then?

thenaterhood commented 5 years ago

Play with it! I'm happy to change it to whatever works better :)

thenaterhood commented 5 years ago

Here's white with an underline (hover removes the underline). See what you think! image

Tjzabel commented 5 years ago

Here's a slightly more detailed screenshot of if we change the footer to all white:

image

This isn't an awful option, but seems to make the whole bottom footer super bland. With that being said, I'm not super opposed to doing this option either

thenaterhood commented 5 years ago

That's the downside of making things white! The purply color seems fine too, visibility-wise.

Tjzabel commented 5 years ago

What does everyone think of combining the two ideas of underlining with lighter blue?

image

This was done via:

footer a {
    color: #B3B3FF;
    text-decoration: underline;
}
footer a:hover {
    color: #B3B3FF;
    text-decoration: none;
}
ct-martin commented 5 years ago

Doing both LGTM. Sorry I didn't get a chance to play with this and thanks for picking it up. Please consider making a PR on the FOSS site as well since it has the same issue and linking to this thread

Tjzabel commented 5 years ago

Cool. @thenaterhood I added a commit to change the color to the lighter purple while keeping the underlining. Merging :tada: