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.

Sign up for GitHub

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

Remove misleading claims from contrast documentation #218

Closed
wants to merge 3 commits into from
Closed

Remove misleading claims from contrast documentation #218

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a6484c
[doc] explain relation between Michelson Contrast and Weber Contrast
xi Sep 11, 2022
35db9c8
[doc] do not claim that Weber is not perceptually uniform
xi Sep 11, 2022
ff81a2f
[doc] do not claim that Weller study shows that WCAG 2.1 performs poorly
xi Sep 11, 2022
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
21 changes: 7 additions & 14 deletions docs/contrast.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ to study the relationship between contrast, character size and reading speed:

> Critical Print Size (CPS) was found to increase as the contrast decreased. The relationship between contrast and CPS was linear in log–log coordinates, that is, log–CPS increased as the log-contrast of the characters decreased.

Calculating the Michelson Contrast is the same as
calculating the Weber Contrast between
Y<sub>max</sub> and (Y<sub>max</sub> + Y<sub>min</sub>) / 2.

This formula does not care which is the text color and which is the background.
The lighter of the two will be detected automatically.

Expand All @@ -132,8 +136,6 @@ APCA is being evaluated for use in version 3 of
the W3C Web Content Accessibility Guidelines (WCAG).

The first stage of this system is the measurement of Lightness Contrast **L<sup>c</sup>**.
Unlike systems using luminance, which is not perceptually uniform,
APCA calculates a measure of lightness.
The formula for L<sup>c</sup> starts with gamma-encoded sRGB values
and involves multiple steps:

Expand Down Expand Up @@ -161,11 +163,7 @@ let wrongContrast = text.contrast(background, "APCA");

## Lightness difference

Instead of being based on luminance,
which is not perceptually uniform
(and thus, the visual difference corresponding to a given luminance difference
is greater for a dark pair of colors than a light pair),
lightness difference uses the CIE Lightness **L<sup>*</sup>**,
Lightness difference uses the CIE Lightness **L<sup>*</sup>**,
which is (approximately) perceptually uniform.

> LstarC = L<sub>max</sub> - L<sub>min</sub>
Expand All @@ -190,11 +188,11 @@ So, color.js `Lstar` will give you the HCT Tone difference.

## 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.
Simple Contrast values are used in photography, to specify the difference between bright and dark parts of the picture.

> SC = Y<sub>max</sub> / Y<sub>min</sub>

Because it is not very useful, and also trivial to compute,
Because it is basically the same as Weber Contrast, and also trivial to compute,
color.js does not provide a function for simple contrast.

## WCAG 2.1
Expand All @@ -216,9 +214,6 @@ color.js provides this method, mainly to aid comparison.
Note though that it has been criticized for
numerous false positive and false negative results,
particularly in dark mode.
In a study of the legibility of white and black text
against 8,000 random coloured backgrounds (Waller),
WCAG 2.1 performed poorly compared to APCA.

This formula does not care which is the text color and which is the background.
The lighter of the two will be detected automatically.
Expand Down Expand Up @@ -248,5 +243,3 @@ 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)

- 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)