OT: Type on Background - Contrast Ratios

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

OT: Type on Background - Contrast Ratios

Sannyasin Brahmanathaswami
For the RGB wizards… what is the algorithm to determine the luminance ratio between two colors?

See w3C recommendations posted in today's Adobe's XD newsletter (useful feed) below.

I'm thinking the total value of all three will serve.


The WC3 sets minimum standards for contrast ratios, which represent how different a color is from another color (commonly written as 1:1 or 21:1, the higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors). The W3C recommends the following contrast ratios for body text and image text:

  *   Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferred.
  *   Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.






_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

Colin Holgate-3
This page does that:

http://leaverou.github.io/contrast-ratio/

Here’s their Javascript that does the job:

http://leaverou.github.io/contrast-ratio/contrast-ratio.js


> On Oct 6, 2016, at 10:58 AM, Sannyasin Brahmanathaswami <[hidden email]> wrote:
>
> For the RGB wizards… what is the algorithm to determine the luminance ratio between two colors?
>
> See w3C recommendations posted in today's Adobe's XD newsletter (useful feed) below.
>
> I'm thinking the total value of all three will serve.
>
>
> The WC3 sets minimum standards for contrast ratios, which represent how different a color is from another color (commonly written as 1:1 or 21:1, the higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors). The W3C recommends the following contrast ratios for body text and image text:
>
>  *   Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferred.
>  *   Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
>
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

J. Landman Gay
In reply to this post by Sannyasin Brahmanathaswami
Does this work well enough?:

function luminanceRatio c1,c2 -- pass two RGB triplets
   put calcLuminance(c1) into tL1
   put calcLuminance(c2) into tL2
   return max(tL1,tL2) / min(tL1,tL2)
end luminanceRatio

function calcLuminance pRGB
   -- wikipedia: Y = 0.2126 R + 0.7152 G + 0.0722 B
   put item 1 of pRGB * 0.2126 into tR
   put item 2 of pRGB * 0.7152 into tG
   put item 3 of pRGB * 0.0722 into tB
   return sum(tR,tG,tB)
   # if sum(tR,tG,tB) > 125 then return "black"
   # else return "white"
end calcLuminance



On 10/6/16 12:58 PM, Sannyasin Brahmanathaswami wrote:

> For the RGB wizards… what is the algorithm to determine the luminance ratio between two colors?
>
> See w3C recommendations posted in today's Adobe's XD newsletter (useful feed) below.
>
> I'm thinking the total value of all three will serve.
>
>
> The WC3 sets minimum standards for contrast ratios, which represent how different a color is from another color (commonly written as 1:1 or 21:1, the higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors). The W3C recommends the following contrast ratios for body text and image text:
>
>   *   Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferred.
>   *   Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
>
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>


--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

Sannyasin Brahmanathaswami
Awesome! thanks… will add immediately to my UX design toolbox…

Svasti Astu, Be Well
Brahmanathaswami

www.himalayanacademy.com

 

On 10/6/16, 9:21 AM, "use-livecode on behalf of J. Landman Gay" <[hidden email] on behalf of [hidden email]> wrote:

    Does this work well enough?:
   
    function luminanceRatio c1,c2 -- pass two RGB triplets
       put calcLuminance(c1) into tL1
       put calcLuminance(c2) into tL2
       return max(tL1,tL2) / min(tL1,tL2)
    end luminanceRatio
   
    function calcLuminance pRGB
       -- wikipedia: Y = 0.2126 R + 0.7152 G + 0.0722 B
       put item 1 of pRGB * 0.2126 into tR
       put item 2 of pRGB * 0.7152 into tG
       put item 3 of pRGB * 0.0722 into tB
       return sum(tR,tG,tB)
       # if sum(tR,tG,tB) > 125 then return "black"
       # else return "white"
    end calcLuminance
   
   

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

hh
In reply to this post by Sannyasin Brahmanathaswami
> Jacqueline L.G. wrote:
> Does this work well enough?:
>
> function luminanceRatio c1,c2 -- pass two RGB triplets
>    put calcLuminance(c1) into tL1
>    put calcLuminance(c2) into tL2
>    return max(tL1,tL2) / min(tL1,tL2)
> end luminanceRatio
>
> function calcLuminance pRGB
>    -- wikipedia: Y = 0.2126 R + 0.7152 G + 0.0722 B
>    put item 1 of pRGB * 0.2126 into tR
>    put item 2 of pRGB * 0.7152 into tG
>    put item 3 of pRGB * 0.0722 into tB
>    return sum(tR,tG,tB)
>    # if sum(tR,tG,tB) > 125 then return "black"
>    # else return "white"
> end calcLuminance

In case black is also an option as color then the following
ratio, known as contrast ratio, avoids dividing by zero:

function contrastRatio c1,c2 -- pass two RGB triplets
   put calcLuminance(c1) into tL1
   put calcLuminance(c2) into tL2
   return (0.05 + max(tL1,tL2)) / (0.05 + min(tL1,tL2))
end contrastRatio

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

pmbrig
But isn’t there something more fundamentally wrong with this measure, with the criteria outlined by Sannyasin:

>  *   Small text should have a contrast ratio of at least 4.5:1 against its background. A ratio of 7:1 is preferred.
>  *   Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

If you’re comparing something with black, it’s very easy to get a high luminance ratio but text will still be unreadable. Try setting a field’s forecolor to 5,5,5 and the backcolor to 45,45,45. The luminance ratio is 8.27, but you can’t read the text at all.

— Peter

Peter M. Brigham
[hidden email]


> On Oct 6, 2016, at 5:34 PM, hh <[hidden email]> wrote:
>
>> Jacqueline L.G. wrote:
>> Does this work well enough?:
>>
>> function luminanceRatio c1,c2 -- pass two RGB triplets
>>   put calcLuminance(c1) into tL1
>>   put calcLuminance(c2) into tL2
>>   return max(tL1,tL2) / min(tL1,tL2)
>> end luminanceRatio
>>
>> function calcLuminance pRGB
>>   -- wikipedia: Y = 0.2126 R + 0.7152 G + 0.0722 B
>>   put item 1 of pRGB * 0.2126 into tR
>>   put item 2 of pRGB * 0.7152 into tG
>>   put item 3 of pRGB * 0.0722 into tB
>>   return sum(tR,tG,tB)
>>   # if sum(tR,tG,tB) > 125 then return "black"
>>   # else return "white"
>> end calcLuminance
>
> In case black is also an option as color then the following
> ratio, known as contrast ratio, avoids dividing by zero:
>
> function contrastRatio c1,c2 -- pass two RGB triplets
>   put calcLuminance(c1) into tL1
>   put calcLuminance(c2) into tL2
>   return (0.05 + max(tL1,tL2)) / (0.05 + min(tL1,tL2))
> end contrastRatio
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

hh
In reply to this post by Sannyasin Brahmanathaswami
Peter M.B. wrote:

> But isn’t there something more fundamentally wrong with this measure,
> with the criteria outlined by Sannyasin:
>> *   Small text should have a contrast ratio of at least 4.5:1 against
> its background. A ratio of 7:1 is preferred.
>> *   Large text (at 14 pt bold/18 pt regular and up) should have a
> contrast ratio of at least 3:1 against its background.
> If you’re comparing something with black, it’s very easy to get a high
> luminance ratio but text will still be unreadable. Try setting a field’s
> forecolor to 5,5,5 and the backcolor to 45,45,45. The luminance ratio
> is 8.27, but you can’t read the text at all.

You are convincing with your example, of course.

As the script-link given by Colin shows, the matter is very complicated
(and complicated to code). I'm not at all an expert with luminance, do
such things by trial and error.

Jacques probably tried by intention to give a simple method and forgot to
exclude the divide-by-zero part. That's why I cited the contrast "formula".
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

J. Landman Gay
Actually I did hit the divide by zero error, which is why I added the
min/max test. But your solution was better.
--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com



On October 6, 2016 9:08:42 PM hh <[hidden email]> wrote:

> Peter M.B. wrote:
>
>> But isn’t there something more fundamentally wrong with this measure,
>> with the criteria outlined by Sannyasin:
>>> *   Small text should have a contrast ratio of at least 4.5:1 against
>> its background. A ratio of 7:1 is preferred.
>>> *   Large text (at 14 pt bold/18 pt regular and up) should have a
>> contrast ratio of at least 3:1 against its background.
>> If you’re comparing something with black, it’s very easy to get a high
>> luminance ratio but text will still be unreadable. Try setting a field’s
>> forecolor to 5,5,5 and the backcolor to 45,45,45. The luminance ratio
>> is 8.27, but you can’t read the text at all.
>
> You are convincing with your example, of course.
>
> As the script-link given by Colin shows, the matter is very complicated
> (and complicated to code). I'm not at all an expert with luminance, do
> such things by trial and error.
>
> Jacques probably tried by intention to give a simple method and forgot to
> exclude the divide-by-zero part. That's why I cited the contrast "formula".
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

hh
In reply to this post by Sannyasin Brahmanathaswami
Below are two functions on base of the ones mentioned in the
W3C's Accessibility Recommendations. They work fine here for me.

To test these, I made a stack for the Raspi collection in the forum.
This stack contains also a _simple_ algorithm for _trying_ to get a
textColor on base of the current textColor (the current backColor
is fixed) such that a contrast ratio of at least 7 is reached.
Works for giving an "advice" in most cases I tried. The algorithm
may easily be improved (for example by giving the change of color
channels different weights, adaptive, on base of input).

-- usage example
on mouseUp
  lock screen; lock messages
  put the backColor of fld "Text" into bC
  put the backColor of fld "Text" into fC
  put relativeLuminance(bC) into bL
  put relativeLuminance(fC) into fL
  put contrastRatio(bL,fL) into contrastBF
  put "Contrast Ratio: " & round(contrastBF,2) into fld "contrastRatio"
  unlock screen; unlock messages
end mouseUp

-- param RGB is of the form "r,g,b" where each
-- item r,g,b is an integer in range 0-255
function relativeLuminance RGB
  put 0 into tLuminance
  put "0.2126,0.7152,0.0722" into tWeights
  repeat with i=1 to 3
    put item i of RGB into ci
    put ci/255 into cc
    if cc <= 0.03928 then
      put cc/12.92 into ri
    else
      put ((cc+0.055)/1.055)^2.4 into ri
    end if
    add (item i of tWeights*ri) to tLuminance
  end repeat
  return tLuminance
end relativeLuminance

-- computes ratio of lighter against darker r.L.
function contrastRatio lu1,lu2
  if lu1 > lu2 then -- lu2 is darker
    return (lu1 + 0.05) / (lu2 + 0.05)
  else return (lu2 + 0.05) / (lu1 + 0.05)
end contrastRatio


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
hh
Reply | Threaded
Open this post in threaded view
|

Re: OT: Type on Background - Contrast Ratios

hh
In reply to this post by Sannyasin Brahmanathaswami
Typo, sorry:

In the usage example read
put the foreColor of fld "Text" into fC

instead of
put the backColor of fld "Text" into fC


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode