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

Use dark color icons/text on light backgrounds #488

Merged
merged 4 commits into from Aug 3, 2017

Conversation

2 participants
@ericcornelissen
Copy link
Contributor

ericcornelissen commented Aug 2, 2017

Implements the feature specified in #480

It is using this formula for relative luminance combined with this approximation to find the contrast ratio between the background (which is the brand color) and white (the default color of the icon/text). If this value, which is between 0 and 1, is to high it will make sure the brand icon, brand name and hex-value of the color are displayed in black (currently #000) instead of the current default white.
The color change is achieved by adding a class to the li.grid-item, either .dark or .light.

ericcornelissen added some commits Aug 2, 2017

Contrast ratio proof of concept
Initial implementation of making icons/text dark on a light background, as
suggested in issue #480. This implementation is based on the suggestion by
@pushrax, using the formula provided on
http://chilliant.blogspot.nl/2012/08/srgb-approximations-for-hlsl.html

Note that this implementation is not yet as desired, as it still darkens
some icons we might not want darkened and the dark color is currently full
black.

I also used this link in the process of making this:
http://springmeier.org/www/contrastcalculator/index.php
@birjolaxew
Copy link
Member

birjolaxew left a comment

Nice work 😄 As a sidenote, where did you get your numbers from? I couldn't find the exact used numbers in the linked article

{% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %}
{% endif %}
{% assign luminance = lRed | plus: lGreen | plus: lBlue %}
{% if luminance >= 0.83 %}

This comment has been minimized.

@birjolaxew

birjolaxew Aug 2, 2017

Member

I find that a cutoff of 0.5 covers most characters that are hard to read. This is obviously up for debate.

This comment has been minimized.

@ericcornelissen

ericcornelissen Aug 3, 2017

Author Contributor

0.5 seems like a logical cutoff, but I'm not sure if its the best. I made a screenshot so you can see it:
screenshot

I think we can identify two problems from this screenshot:

  • First, imo there are a few icons that don't need to be darkened. This includes most yellow icons except for Pingdom, Snapchat and Javascript, and Upwork, Kickstarter and maybe even Gumtree from the green icons.
  • Second, it seems a bit odd to me that there are some white icons in between dark icons? Not sure if the icons are not properly ordered or if it is due to the formula that I'm using 🤔

One last thing, if you want to play around with this more effectively I recommend you check out the develop-see-luminance branch I created in my fork where instead of the hex-value the calculated luminance is shown so you get a better idea of what icons will be made dark if you change the value (also the cutoff is set to 0.5 on that branch).

index.html Outdated
.grid-item.light rect,
.grid-item.light circle,
.grid-item.light h2,
.grid-item.light p {

This comment has been minimized.

@birjolaxew

birjolaxew Aug 2, 2017

Member

Simplify selector to .grid-item--light (using BEM naming), and use inheritance for all the rest. IIRC this means adding .grid-item__link { color: inherit } and removing .grid-item__subtitle { color: #FFFFFF }.

index.html Outdated
.grid-item.light circle,
.grid-item.light h2,
.grid-item.light p {
color: #FFF;
fill: #FFF;

This comment has been minimized.

@birjolaxew

birjolaxew Aug 2, 2017

Member

Add svg { fill: currentColor; } instead of setting fill here.

index.html Outdated
.grid-item.dark circle,
.grid-item.dark h2,
.grid-item.dark p {
color: #000;

This comment has been minimized.

@birjolaxew

birjolaxew Aug 2, 2017

Member

Use #222 instead - it's a nicer color

@ericcornelissen

This comment has been minimized.

Copy link
Contributor Author

ericcornelissen commented Aug 3, 2017

@birjolaxew about the numbers, you're correct that you can't find all numbers in the original link I provided, I also used the relative luminance link you provided (I updated the PR description 👍). Also, I rounded all numbers to 4 decimal places.

Just for good measure, I'll try to explain how I applied the functions (using red as example):
This come straight from the if-statement provided in the relative luminance link.

{% if rgbRed <= 0.03928 %}

This is the then-branch for the if, the times: 0.2126 comes from the L = 0.2126 * R + 0.7152 * G + 0.0722 * B formula also found on that page.

{% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %}

This is the else-branch for the if, but instead of the formula you see on the relative luminance link I used the approximation provided in the other link (see C_lin_3). The times: 0.2126 is from this the L = 0.2126 * R + 0.7152 * G + 0.0722 * B formula again.

{% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %}

Then the luminance is calculating by adding the terms of the luminance formula L = 0.2126 * R + 0.7152 * G + 0.0722 * B:

{% assign luminance = lRed | plus: lGreen | plus: lBlue %}
@ericcornelissen

This comment has been minimized.

Copy link
Contributor Author

ericcornelissen commented Aug 3, 2017

Also, note that some icons are colored incorrectly due to the fill defined on the SVGs themselves. I fixed this in another PR, see #489 👍

@birjolaxew birjolaxew merged commit 2e1b506 into simple-icons:develop Aug 3, 2017

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