Make text of light tags legible

[Roy-Orbison]

I found that many tags are difficult to read due to lack of contrast between the white text specified in the CSS and the random background colours, e.g.:

These could be improved by dynamically assessing the brightness of the tag colour, and applying a different text colour, e.g.:

Here's an untested draft of my idea to fix it. Feedback would be appreciated as I don't know TypeScript.

[acelaya]

Thanks for the contribution!

I'll do a proper review in a couple of days/weeks, as soon as I finish a few other things and also release v3.5.1 of this project.

[Roy-Orbison]

No worries. I'm sure you can easily fix my mistake that's preventing compilation, the rgb parsing works in JS, just not TS. 🙃

[github-actions]

Preview environment

https://shlinkio.github.io/shlink-web-client/tag-legibility/

[Roy-Orbison]

Thanks for doing that CI task, it made debugging much easier. I just had a gander at our server in that preview environment, it worked. The contrast looks maybe a little too heavy on some colours around the threshold. You could probably reduce this effect with per-theme text colours in the CSS.

[acelaya]

I really like how it looks. It's something so ovbious now that I see it done 🙂

[acelaya]

There are some edge cases though. Shlink's brand color looks better with white text, but I guess that's a matter of tweaking the logic afterwards.

[codecov-commenter]

Codecov Report

Merging #558 (12f61d0) into develop (5b7f1ef) will increase coverage by 0.05%.
The diff coverage is 81.81%.

@@             Coverage Diff             @@
##           develop     #558      +/-   ##
===========================================
+ Coverage    78.53%   78.58%   +0.05%     
===========================================
  Files          174      174              
  Lines         2082     2092      +10     
  Branches       321      324       +3     
===========================================
+ Hits          1635     1644       +9     
+ Misses         187      186       -1     
- Partials       260      262       +2     

Impacted Files	Coverage Δ
src/tags/helpers/Tag.tsx	50.00% <ø> (+50.00%)	⬆️
src/utils/services/ColorGenerator.ts	85.18% <81.81%> (-3.06%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5b7f1ef...12f61d0. Read the comment docs.

[acelaya]

I have pushed a couple of fixes for the linting issues, and added the missing tests.

I have also changed the CSS classes to use BEM, as that's the approach used in this project.

Thanks again for the contribution 🙂

[Roy-Orbison]

Thanks for cleaning it up, I never expected it to go in as-is.

Another option for reducing excessive contrast could be to add up to two classes, one for tags lighter than, say 160, and one for those lighter than 96, instead of only one for the 128 midpoint. The first would only get dark text in the light theme, and the second would get dark text in the dark theme.

[acelaya]

The theme doesn't really affect this. It's more like deciding where to put the "switch". Currently it's 50-50, but maybe it would look better with 60-40, or whatever.

I don't know. I'll probably do some checks with middle colors at some point, but for now, it works.

[Roy-Orbison]

The theme doesn't really affect this.

No, it really does. The perception of how dark or light something is is relative to its surroundings. See this classic example for proof. The two-class option would mean only switching to the other text colour when absolutely necessary.