From 1376b5f2553aac4854eb1a4cf4fb096c78cb4ccc Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Wed, 2 Aug 2017 15:43:02 +0200 Subject: [PATCH 1/4] 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 --- index.html | 49 ++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 44 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index a933acbc..b91a2c52 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,32 @@ {% if rgbBlue < rgbMin %} {% assign rgbMin = rgbBlue %} {% endif %} + + + {% if rgbRed <= 0.03928 %} + {% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %} + {% else %} + {% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %} + {% endif %} + {% if rgbGreen <= 0.03928 %} + {% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %} + {% else %} + {% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %} + {% endif %} + {% if rgbBlue <= 0.03928 %} + {% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %} + {% else %} + {% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %} + {% endif %} + {% assign L = lRed | plus: lGreen | plus: lBlue %} + + {% if L >= 0.6 %} + {% assign class = "dark" %} + {% else %} + {% assign class = "light" %} + {% endif %} + + {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %} {% assign rgbDelta = rgbMax | minus: rgbMin %} {% if rgbDelta == 0 %} @@ -84,10 +110,10 @@ {% endif %} {% if hslSaturation < 10 %} {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% else %} {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} {% assign iconsArray = iconsUnsortedString | split: ";" %} @@ -158,9 +184,22 @@ width: 1.5rem; } - path, rect, circle { + .grid-item.light path, + .grid-item.light rect, + .grid-item.light circle, + .grid-item.light h2, + .grid-item.light p { + color: #FFF; fill: #FFF; } + .grid-item.dark path, + .grid-item.dark rect, + .grid-item.dark circle, + .grid-item.dark h2, + .grid-item.dark p { + color: #000; + fill: #000; + } #carbonads { height: 100%; @@ -461,7 +500,7 @@ {% for icon in iconsArray %} {% assign iconArray = icon | split: "," %} -
  • +
  • {% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %} @@ -472,7 +511,7 @@ {% endfor %} {% for icon in greyscaleIconsArray %} {% assign iconArray = icon | split: "," %} -
  • +
  • {% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %} {% include_relative {{ filePath }} %} From 8e3028c5fc27a4102642d8b107b6a5edc2e28c4e Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Wed, 2 Aug 2017 15:48:58 +0200 Subject: [PATCH 2/4] Tweak Luminance thresold for darkened icon --- index.html | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index b91a2c52..111e324f 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,6 @@ {% assign rgbMin = rgbBlue %} {% endif %} - {% if rgbRed <= 0.03928 %} {% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %} {% else %} @@ -77,15 +76,13 @@ {% else %} {% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %} {% endif %} - {% assign L = lRed | plus: lGreen | plus: lBlue %} - - {% if L >= 0.6 %} + {% assign luminance = lRed | plus: lGreen | plus: lBlue %} + {% if luminance >= 0.83 %} {% assign class = "dark" %} {% else %} {% assign class = "light" %} {% endif %} - {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %} {% assign rgbDelta = rgbMax | minus: rgbMin %} {% if rgbDelta == 0 %} @@ -110,10 +107,10 @@ {% endif %} {% if hslSaturation < 10 %} {% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% else %} {% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %} - {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %} + {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} {% assign iconsArray = iconsUnsortedString | split: ";" %} From 553aa4b8fbbf9357fc7367c6110cfdf94cc2e63b Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Thu, 3 Aug 2017 13:13:31 +0200 Subject: [PATCH 3/4] Use BEM naming and inherit colors --- index.html | 33 ++++++++++++--------------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 111e324f..24a8994d 100644 --- a/index.html +++ b/index.html @@ -78,9 +78,9 @@ {% endif %} {% assign luminance = lRed | plus: lGreen | plus: lBlue %} {% if luminance >= 0.83 %} - {% assign class = "dark" %} + {% assign class = "grid-item--dark" %} {% else %} - {% assign class = "light" %} + {% assign class = "grid-item--light" %} {% endif %} {% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %} @@ -177,27 +177,11 @@ } svg { + fill: currentColor; height: 1.5rem; width: 1.5rem; } - .grid-item.light path, - .grid-item.light rect, - .grid-item.light circle, - .grid-item.light h2, - .grid-item.light p { - color: #FFF; - fill: #FFF; - } - .grid-item.dark path, - .grid-item.dark rect, - .grid-item.dark circle, - .grid-item.dark h2, - .grid-item.dark p { - color: #000; - fill: #000; - } - #carbonads { height: 100%; width: 100%; @@ -376,6 +360,15 @@ background-color: #757575; text-align: center; } + .grid-item--light { + color: #FFF; + } + .grid-item--dark { + color: #000; + } + .grid-item__link { + color: inherit; + } @supports not (display: grid) { .grid-item { border: 0.1875rem solid #FFF; @@ -402,7 +395,6 @@ } .grid-item__link { - color: #FFFFFF; display: block; padding: 1rem 1rem 0; text-align: center; @@ -425,7 +417,6 @@ } .grid-item__subtitle { - color: #FFFFFF; font-size: 0.75rem; line-height: 1rem; margin: 0; From 25a4350882c9a8efaf56f72b4ab95657d09ab160 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Thu, 3 Aug 2017 13:15:39 +0200 Subject: [PATCH 4/4] Change dark color to dark gray instead of black --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 24a8994d..520dd63e 100644 --- a/index.html +++ b/index.html @@ -364,7 +364,7 @@ color: #FFF; } .grid-item--dark { - color: #000; + color: #222; } .grid-item__link { color: inherit;