diff --git a/docs/contrast.md b/docs/contrast.md index 5b96ed923..fc2624af3 100644 --- a/docs/contrast.md +++ b/docs/contrast.md @@ -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 +Ymax and (Ymax + Ymin) / 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. @@ -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 **Lc**. -Unlike systems using luminance, which is not perceptually uniform, -APCA calculates a measure of lightness. The formula for Lc starts with gamma-encoded sRGB values and involves multiple steps: @@ -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***, +Lightness difference uses the CIE Lightness **L***, which is (approximately) perceptually uniform. > LstarC = Lmax - Lmin @@ -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 = Ymax / Ymin -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 @@ -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. @@ -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) -