New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change color of links in toots to have higher contrast #9928

Open
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
10 participants
@Gargron
Copy link
Member

Gargron commented Jan 27, 2019

Alternative to #9898. Improve ability to distinguish links from other text.

With color Grayscale
links-color links-grayscale

Unlike underlines, it keeps visual noise down in an otherwise busy interface. Unlike text links in articles, links in toots are associated with specific syntax (@ for mentions, # for hashtags, example.com for URLs), and their primary function is to be read in the text, rather than clicked on. Contrast ensures the distinction works even for colorblind people (tested with this tool)

@ThibG

This comment has been minimized.

Copy link
Collaborator

ThibG commented Jan 27, 2019

I think the link color change is very welcome. I am very unsure about not changing hashtags and mentions, though.

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 27, 2019

@Gargron

This comment has been minimized.

Copy link
Member Author

Gargron commented Jan 27, 2019

All the colors involved are in the same palette, present through the UI. Mentions and hashtags are more common than URLs, I would say.

@Gargron

This comment has been minimized.

Copy link
Member Author

Gargron commented Jan 27, 2019

I've stumbled across the problem that not all posts use the same class names to mark up mentions/hashtags, so keeping the colors different is more inconsistent than I originally thought. So perhaps changing all of them would be more appropriate.

@aardrian

This comment has been minimized.

Copy link

aardrian commented Jan 28, 2019

@Gargron , I feel like you have chosen to ignore the larger issue — that contrast alone is insufficient to achieve WCAG compliance, let alone support all users in all browsing contexts.

Is this your way of abandoning #9898 ?

I've stumbled across the problem that not all posts use the same class names to mark up mentions/hashtags, so keeping the colors different is more inconsistent than I originally thought. So perhaps changing all of them would be more appropriate.

I have a suggestion:

.status__content a, .reply-indicator__content a { text-decoration: underline; }

You can find overwhelming supporting evidence in the issue linked above.

@hyperpress

This comment has been minimized.

Copy link

hyperpress commented Jan 28, 2019

This is disappointing, but very Twitter like in outcome and process. If that's what your trying to emulate @Gargron. 😑

@nolanlawson

This comment has been minimized.

Copy link
Collaborator

nolanlawson commented Jan 28, 2019

I appreciate that this PR automatically fixes the color contrast even for custom themes. Here it is with Toot Cafe's default purple, the "Paris mon Amour" theme on mastodon.technology, and the "Photon Dark" theme also on toot.cafe.

Screenshot of three different themes with good color contrast

@dariusk

This comment has been minimized.

Copy link

dariusk commented Jan 28, 2019

@aardrian, you say "contrast alone is insufficient to achieve WCAG compliance" -- I thought that WCAG 2.0 states that color contrast is in fact sufficient if it's a 3:1 contrast ratio, as long as a hover also causes underlining, which it does already.

And I'm trying to figure out what the WCAG position is on this, btw. You seem far more the accessibility expert than I am and I'd appreciate any corrections you could offer.

@Heydon

This comment has been minimized.

@aardrian

This comment has been minimized.

Copy link

aardrian commented Jan 28, 2019

@dariusk , @Heydon has already linked it, but for more context and discussion of G183 and how it relates to 1.4.1, I have a section in my post (which I wrote for use with clients in this same situation): On Link Underlines (this points to the Accessibility section)

@dariusk

This comment has been minimized.

Copy link

dariusk commented Jan 28, 2019

@aardrian, your article quotes this:

If there are not a large number of links in the block of text, underlines are recommended for links

You're emphasizing the part after the comma, those who disagree are emphasizing the part before the comma. I do take your point that these guidelines were written before touch interface was widely available.

For the record, I'm in favor of underlines as default but I'm trying to understand where everyone is coming from here. I'm merging your original PR to my instance today and I'll see what my users think (or if they even notice).

@aardrian

This comment has been minimized.

Copy link

aardrian commented Jan 28, 2019

@dariusk

You're emphasizing the part after the comma, those who disagree are emphasizing the part before the comma.

Link density is a fair concern. If an entire block is all links then that is a usability issue, but the lack of affordance (underlines in particular) is still an accessibility issue. So while it might be more unusable to some in those cases, it is still inaccessible to many in all cases (whether permanent disability, or temporary/situational impairment).

@clarfon

This comment has been minimized.

Copy link
Contributor

clarfon commented Jan 28, 2019

Colour contrast change is much appreciated, although you should include hashtags and mentions as well. And, add underlines, as mentioned in #9898.

@Gargron Gargron force-pushed the fix-link-color-contrast branch from 83d6465 to 71366cd Jan 30, 2019

@mayaeh

This comment has been minimized.

Copy link
Collaborator

mayaeh commented Jan 31, 2019

I feel that it is not necessary to change the link color of the default theme.
Link, name and hashtag become more conspicuous than the main text.

But accessibility is also important.
I will accept if this change is welcomed.

2019-01-31 14 09 02

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment