Fix color contrast problems

[brenoferreira]

Lighthouse has found many color contrast problems. Please refer to the reports to see what the problems are.

Some of the problems found which have low contrast scores are: the tomato color over gray backgrounds, some dark grays over gray, tag labels' gray over white.

[dos077]

The color is not defined in this repo, but at creativecommons/vocabulary. The $color-tomato variable is too light on a white black ground, supposedly. But going through Google's own material color palette, it seems like only the deep-orange darken-4 color can satisfy the >4.5 contrast requirement. Not sure how the design process of vocabulary group works, a plain orange text link maybe a big tough to satisfy the accessibility score without looking a bit ugly.

[Atanda1]

I'll like to work on this contrast ratio issue

[kgodey]

tagging @panchovm, @annatuma, and @dhruvkb to weigh in on color contrast issues.

[dhruvkb]

@dos077 I am pretty sure that the primary brand colors are immutable and using them is unavoidable. This means running into issues like this is inevitable. That said, here is the only way to rectify this:

• We can redesign the low-contrast parts to be more legible using the A_n guide and switch to more legible color combinations in the affected areas.
• We can setup monitoring for accessibility in Vocabulary that will allow us to catch such problems in more components and earlier in their lifecycle.

@Atanda1 this requires some design work. Maybe you can help @panchovm on that.

[dos077]

@dhruvkb we can just copy the link style of the usecontrast.com, underline into colored highlight. Preserves brand color while also improves link contrast. I vague remember seeing something like a UI kit for creative common, not sure if this change is large enough to violate any design principal though.

[fcoveram]

I'm not sure about where exactly is the contrast problem in the current application. The initial description indicates a problem of "tomato color over gray backgrounds", but accessibility guides refer to text color on backgrounds, not segments of color over each other. That contrast might be affected by the color lightness.

I used the Material Design tool to check the contrast of $color-tomato as background for large text with white color, as we are currently using it, and it meets the AA level. See the screenshot below.

For gray background (specifically, $color-lighter-gray), we are using $dark-slate-gray (custom text section in the example below) and the mix meets the level AA and AAA.

I totally agree with @dhruvkb on using the contrast guide to work on these issues, and that said, the boldness of text styles might be insufficient. Mostly because the large text size varies in every typography. It is a visual effect given by shapes and white spaces between characters. The guide recommends 24px, and I agree with following that definition.

However, regarding the accessibility problems mentioned, I do not see the problem. Maybe I am missing something 🤔

[brenoferreira]

here's an example of tomato over white

[fcoveram]

Oh. Now I see, we need to work on links. Thanks @brenoferreira

[Atanda1]

So what's the conclusion? Are we changing the colour contrast of the link and background

[fcoveram]

We are changing the tomato color for links. Definitely

[dhruvkb]

This seems like a Vocabulary issue. Should I transfer this issue to creativecommons/vocabulary?

[kgodey]

This is a general issue for all color contrast issues found by Lighthouse, I think it makes sense to leave it here and open new (related) issues in Vocabulary for each of the problems.

[Atanda1]

How do I come in now?

[kgodey]

@Atanda1 please wait for @panchovm to create new tickets.

[Atanda1]

Ok then...I'll look out for that

[wajeehamushtaq]

Does anyone working on this issue or may I work on it?

[annatuma]

Individual color issues should be addressed in Vocabulary, and updates will be made in parallel to the Design Library.

Leaving to @dhruvkb and @panchovm to create appropriate tickets in Vocabulary (starting with the link color issue), and make changes in Design Library.

We'll create more tickets once the reports are fully reviewed.

For contributors, I recommend looking for issues marked as "help wanted", and keep an eye on the Vocabulary repo for individual tickets there related to this.

[ayanchoudhary]

Linking the relevant issues from vocabulary here:
https://github.com/creativecommons/vocabulary/issues/454
https://github.com/creativecommons/vocabulary/issues/455

[Atanda1]

Thanks! I'll check it out ASAP

…

On Wed, 24 Jun 2020, 08:51 Ayan Choudhary, ***@***.***> wrote: Linking the relevant issues from vocabulary here creativecommons/vocabulary#454 <https://github.com/creativecommons/vocabulary/issues/454> creativecommons/vocabulary#455 <https://github.com/creativecommons/vocabulary/issues/455> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#998 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKZI4KNERWFMMTLG5EZ63MTRYGWA7ANCNFSM4NMFQDFQ> .

[zackkrida]

Closed, as all color contrast a11y issues have been resolved in vocabulary.