Skip to content
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

Contrast docs #214

Merged
merged 4 commits into from
Sep 13, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions docs/contrast.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ and that adding chromatic contrast does not further increase reading speed.
This is true for both those with low vision and those with normal vision.

Color.js provides several methods to estimate luminance contrast.
Most methods report a contrast of 0 for a color on itself
(WCAG 2.1 gives 1),
and around 100 for the highest contrast black-on-white
(WCAG 2.1 gives 21, Weber gives a high number which we cap at 50,000).
Methods which distinguish polarity will report a negative number for reverse polarity;
APCA gives -110 for white on black.

The strengths, drawbacks and uses of these methods have been examined by
the NASA (Color Usage Research Lab).

Expand Down Expand Up @@ -188,6 +195,30 @@ but Tone is the same as CIE Lightness:

So, color.js `Lstar` will give you the HCT Tone difference.

## Delta Phi Star

Delta Phi Star (ΔΦ*) computes the difference between
two CIE Lightnesses (D65-adapted),
which have been raised to the power φ.
The difference is raised to the power 1/φ,
then scaled to give a convenient 0 to 101 range.
Finally, low contrasts less than 7.5 are clipped to zero.


> let phi = Math.pow(5, 0.5) * 0.5 + 0.5; <br>
> let difference = (L<sub>bg</sub> ** phi) - (L<sub>txt</sub> ** phi);<br>
> let DeltaPhiStar = difference * Math.SQRT2 - 40;<br>
> if DeltaPhiStar < 7.5 DeltaPhiStar = 0;

Delta Phi Star was created by Andrew Somers
as a "general" simplifed, polarity-insensitive perceptual contrast algorithm.

```js
let color1 = new Color("p3", [0.9, 0.8, 0.1]);
let color2 = new Color("slategrey");
let contrast = color1.contrast(color2, "DeltaPhi");
```

## Simple contrast

Simple Contrast values are used in photography, to specify the difference between bright and dark parts of the picture. This definition is not useful for real-world luminances, because of their much higher dynamic range, and the logarithmic response characteristics of the human eye.
Expand Down Expand Up @@ -248,5 +279,7 @@ let contrast = color1.contrast(color2, "WCAG21");

- Andrew Somers (2022) _APCA for W3C & WCAG3_. [https://github.com/Myndex/apca-w3](https://github.com/Myndex/apca-w3)

- Andrew Somers (2022) _𝜟𝜱✴︎ (delta phi star)_ [https://github.com/Myndex/deltaphistar](https://github.com/Myndex/deltaphistar)

- Sam Waller (2022) _Does the contrast ratio actually predict the legibility of website text?_ [https://www.cedc.tools/article.html](https://www.cedc.tools/article.html)