From be9d40ae2d3ff4036425344b1b26f92e3b2b6416 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Tue, 9 Feb 2021 15:09:22 -0800 Subject: [PATCH 01/94] Substantial Fixes Substantially re-written to remove the egregious errors, massive duplication, rambling/confusing prose, broken links, and replaed --- .../320px-red_saturations.svg.png | Bin 1199 -> 0 bytes .../YellowDotCheckerShadow_DLyon_PD.png | Bin 0 -> 48856 bytes .../chromaRamps.svg | 29 ++ .../index.html | 444 +++++++++++------- .../tomjewettminicolorpicker.png | Bin 9112 -> 0 bytes 5 files changed, 315 insertions(+), 158 deletions(-) delete mode 100644 files/en-us/web/accessibility/understanding_colors_and_luminance/320px-red_saturations.svg.png create mode 100644 files/en-us/web/accessibility/understanding_colors_and_luminance/YellowDotCheckerShadow_DLyon_PD.png create mode 100644 files/en-us/web/accessibility/understanding_colors_and_luminance/chromaRamps.svg delete mode 100644 files/en-us/web/accessibility/understanding_colors_and_luminance/tomjewettminicolorpicker.png diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/320px-red_saturations.svg.png b/files/en-us/web/accessibility/understanding_colors_and_luminance/320px-red_saturations.svg.png deleted file mode 100644 index 5990f2497f867fde6fd1a309bee5ab2480f1cdd3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1199 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�j%?E=IIWDt>f2!+Y_9*qwJr+XYj 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 KRB^{V{Qm$(z2Lh5 literal 0 HcmV?d00001 diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/chromaRamps.svg b/files/en-us/web/accessibility/understanding_colors_and_luminance/chromaRamps.svg new file mode 100644 index 000000000000000..05f23cc5bdd5ad1 --- /dev/null +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/chromaRamps.svg @@ -0,0 +1,29 @@ + + + + Chroma Ramps + Ramps from 0 to full Chroma + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index e802588399bdf34..b16323d61525d68 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -2,289 +2,417 @@ title: 'Web Accessibility: Understanding Colors and Luminance' slug: Web/Accessibility/Understanding_Colors_and_Luminance tags: - - Accessibility - - Photosensitive Epilepsy Analysis Tool + - accessibility + - CSS + - vision - color + - luminance + - hue + - chroma + - saturation + - contrast + - readability + - legibility + - displays + - red + - green + - blue + - RGB Color model + - sRGB + - colorspace - epilepsy - photosensitivity - - reflex epilepsy - - saturation + - photic seizure - seizure disorders - - seizures --- -

Understanding color, luminance, and saturation is important in meeting WCAG 2 accessibility guidelines in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders.

+

Understanding luminance which is a measure of light, and color, which means hue, chroma, and saturation, is important for designing visual and readable content that is accessible to all sighted users, and especially those with reduced vision and color deficient vision, but also for accessibility by those with certain neurological, cognitive, and other impairments.

+ +

While there are a number of international standards such as the ISO and ANSI, they are not freely available. Nevertheless, the W3.org's WAI publishes freely available guidelines, maintained by the AGWG (Accessibility Guidelines Working Group). Currently these are known as the WCAG 2.1 accessibility guidelines. The next generation, WCAG 3, is presently published as a public working draft, pending further development and approvals.

+ +

The WCAG 2 guidelines attempt to define adequateluminance contrast for sighted users with deficient color vision (inaccurately called "color blindness"") or reduced vision, and further WCAG 2 guidelines are intended to prevent seizures and other physical reactions in people with vestibular or neurological disorders.

+

Overview

-

Colors, and how they are used, are a major component of accessibility.  At the surface, the subject seems simple, but it is actually a complex subject because color is as much about the physiology of the eye and human perception as it is about light emitting from a computer screen.  Environment matters.  Perception of color in a well-lit room will be different than perception of that same color on that same computer screen in a dark room.  In terms of accessibility, the use of certain color-combinations have more impact than others. Font size, font style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen. (See Understanding Success Criterion 1.4.3: Contrast)  A viewer's distance from the screen, the ambient background, the health of his eyes, and more all affect how that color is received by the viewer.  How the viewer perceives color after it gets to his eyes is yet another matter, and can be affected by overall health.  Luckily, CSS Media Queries Level 5 will be a game-changer in accessibility initiatives, because it will allow users to select settings that accommodate their needs best.

+

Color and how it is used is a major part of accessibility. While at first color may seem simple as it is something most sighted users experience on a daily basis, the underlying science of color perception is complex and often not intuitive.

-

Color, contrast, and luminance are among the most central and critical concepts to creating accessible web content with color.  Luminance is of particular importance, however, because at the end of the day, understanding of what it is and how it is employed enables accessibility for those who are color-blind, as well as those who can perceive color.  It is the luminance contrast that enable the color-blind to distinguish dark against light.

+

To begin with color is not "real," and while that may sound like an odd statement for an article on color, the fact is that in the visible range of light, the light simply exists in different frequencies, or wavelengths, much like the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping groups. These three bands of light as detected by light sensitive cells known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

-

Luminance must be established before the contrast may be.  When speaking of color contrast, W3C formulas are actually incorporating luminance, not just the colors ("hues") themselves. 

+

We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively. Thus we have what are referred to as the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model, such as that used for the common sRGB monitor and the sRGB colorspace, which is the default standard colorspace for web content.

-

Terminology can be confusing, because different terms are often used to describe the same thing. "Luminance" and "Saturation" are particularly important to get right.  For example, "saturation" is known as "chroma" in some circles. In others, "chroma" and "saturation" are two different concepts.  The "L" in the HSL color space is sometimes referred to as "luminosity," other times as "lightness."  Even something seemingly simple like naming common colors can be open to debate.  For example, the color "crimson red" may be described in hex values as #990000 by some and #DC143C by others.  For the purposes of this document, we'll use terminology as it is defined in the W3C, in the CSS Color Module Level 3

+

RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L,M,S cones in the eye to create a particular color perception. For instance when you see the color yellow on your monitor, the monitor is only putting out red and green light, which stimulates the L and M cones similarly to how a "yellow" wavelength of light might — the red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

-

When working with color, it's important to know which "color space" you are working in, as different color spaces map to different measurement systems. Currently, the RGB color space predominates as the space web developers work in.  HEX, RGB and HSL color spaces all are measured differently.  Conversions between the color spaces are usually needed. Because of the current domination of the RGB color space in measuring color output, most calculations in this document are presumed to be in the RGB color space, and very specifically, in the sRGB color space. 

+

CMYK is another form of color model, known as a subtractive model. Here, the cyan, magenta, yellow, black inks remove certain wavelengths of light, reflecting back only the narrow range each is associated with. In this article we will be focusing on displayed web content, and so we discuss mainly the RGB color model.

-

The sRGB color space 

+

For a deeper dive into how the eye and vision system functions, see this overview. -

The MDN document, <color> notes "The  CSS data type represents a color in the sRGB color space."  Color has many ways of being defined, including RGB, RGB decimal, RGB percent, HSL, CMYK among others.

+

Perception of Color and Contrast

-

For digital concerns, much of the technology has historically resided in the RGB color space.  This is because the companies behind the evolution of digital technology set the standards, and these standards still retain a powerful presence today.  This is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements in the RGB color space still predominates, and this includes video production.  The RGB color model is extended to include “alpha” -- RGBA -- to allow specification of the opacity of a color.

+

The first thing to understand about our perception of color, light, and contrast is that it is not absolute, that it is a context sensitive perception, and that perception is mostly neurological in nature. Like color, contrast is not "real" it is a perception. And it takes the first 20 years of our life to develop peak contrast sensitivity. Age and many forms of health issues — even medicine you may be prescribed — can affect your contrast perception.

-

There's movement towards adopting the use of HSL color values rather than RGB values is CSS Color Module 3 (see section 4.2.4), the rationale being that RGB is hardware-oriented, reflecting the use of CRTs, and that RGB is non-intuitive.  That said, HSL colors incorporate lightness, not luminance, and this is a significant consideration.  Note that in that same section of the CSS Color Module 3, there are algorithms available to translate the HSL to RGB.

+

In the image below both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

-

Newer technologies, such as OpenGL and Direct3D incorporate support for the sRGB gamma curve, although some articles for OpenGL reference use of RGBA rather than sRGB. WebGL is usually in the RGBA format; see an example of how it is used in "Clearing with colors".  

+

An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

-

Where accessibility is concerned, however, standards and guidelines are currently written predominantly using the sRGB color space, especially as it applies to color contrast ratios.  In speaking specifically to relative luminance, WCAG's definition of relative luminance notes:

+

Our contrast sensitivity is therefore affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging, and is clearly not as simple as the distance or ratio between two colors.

-

"Note 2: Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3."

+

Readability Contrast

-

CSS Color Module Level 4 will likely change the domination of the sRGB color space in the future.

+

For web content, readability is one very important goal. Readability is not the same as legibility. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

-

Conversions

+

But the threshold of 1% to 3% is wholly insufficient for fluent, easy reading. The minimum critical contrast level is ten times the CS JND, and 20 times the JND is considered the better target to allow for "contrast reserve." (Visual requirements for reading, S G Whittaker, J Lovie-Kitchin).

-

It's important to know that there are variations even within one color space, such as the RGB color space.  For example, variations of the RGB color space include RGB, sRGB, Adobe RGB, Adobe Wide Gamut RGB, and RGBA, among others  And, one color within the same color space may be expressed in different ways.  Looking at how the RGB color space is used to describe a  color "red", you can see that the same color may be expressed in a shorthand, three-digit hex number that converts to a rgb value, as a full six-digit hex number that also converts to the same rgb value, or as a rgba value, expressed in percentages.

-
em { color: #f00; }              /* #rgb */
-em { color: #ff0000; }           /* #rrggbb */
-em { color: #ff0000ff; }         /* #rrggbbaa */
-em { color: rgb(255, 0, 0); }
-em { color: rgb(100%, 0%, 0%); }
-em { color: rgb(255, 0, 0, 1); }
-em { color: rgba(100%, 0%, 0%, 100%); }
+
Spatial Frequency

 
-
+

Our perception of contrast is not only affected by surrounding elements and the environment, but the "Spatial Frequency" of the stimulus itself. A higher spatial frequency means smaller, thinner, and more crowded. This obviously applies very much to text and the font size and design used.

-

Conversions are not casual.   See the Stack Exchange article,  "Formula to Determine the Brightness of RGB Color".   There are many online tools that can convert RGB to HSL for you, with both the RGB hexadecimal and CSS function syntax.   A great example of a tool that converts colors for you is Tom Jewett's "mini color selector" with HSL, RGB, Hex options for checking contrast in the browser. 

+

In a typical eye exam for acuity (ability to focus), legibility at a particular level means getting three out of five letters correct. This is wholly insufficient for fluent, easy reading.

-

Functional in Firefox, Chrome, and Opera browsers.

+

"Normal" print is usually considered 11.5pt to 12pt, this is equivalent of 16px on screen. And this is for normal vision. To relate this to real world visual acuity, if you think of an eye doctor's chart, and focusing on a capital E. If that E is at the legibility or acuity limit for 20/20 vision, and that is at full contrast, it is equivalent to a Helvetica capital E that is 3.9px on screen, meaning a 5.5px CSS font-size. (In print, this is a 4pt font on coated paper).

-

Luminance and Contrast

+

But that is the minimum for "just making out" the letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.

-

Contrast

+

This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability for to zoom up text.

-

Contrast between colors ("hues") is a critical component, but the use of color ("hues") alone is not enough to create accessible content.  As mentioned before, any calculation of contrast must include luminance in the calculation. 

+

Interestingly, while text that is too small is hard to read, so is text that is too big. Above approximately 96px, reading speed decreases. Also, very large fonts make it difficult for a user to enlarge the smaller text on the page, as most browsers presently zoom all text regardless.

-

In addition, the "shape" of the text itself will matter.  Thin letters will be harder to read than thick ones; all type faces need space to "breathe" for human perception.  In general, for accessibility purposes, the more contrast the better.  That changes with animation.  "Safer" animation means images with less contrast, not more. For more on color contrast in animation, see Three Flashes or Below Threshold Understanding SC 2.3.1

-

Icons also need sufficient contrast for perception.  See WCAG 2.1 technique G207

+

Text Size Guidelines

-

Luminance

+

The current WCAG 2 contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

-

It is the difference in the luminance of a color that enables us to see contrast.  Here is the definition of Relative luminance as defined by the W3C:

+

Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3 standard on visual contrast known as APCA takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

-

"the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white"

+

Non text elements such as icons also need adaquate contrast for perceptionWCAG 2.1 technique G207

-

This statement is of course accurate, but may be confusing when used in reference to the RGB color space, which is an integer between 0 and 255.  White has 100% relative luminance, black has 0% relative luminance (in most but not all literature).  Interpreting for the W3C standard above, that would mean that white, normalized to 1, would have an RGB value of rgb(255, 255, 255) and black, normalized to 0, would have an RGB value of rgb(0,0,0)

-

Where do these numbers of 0 to 255 come from?  Historically, graphics engines store the color channels as a single byte; that means a range of integers between 0 and 255. 

-

The luminances of the primary colors are different.  Yellow has a greater luminance than blue, for example.  This was done by way of design, "to achieve white alignment of the monitor" according to the NASA document, "Luminance Contrast in Color Graphics"

+

CSS and the sRGB Colorspace 

-

Once luminance is established, the color contrast ratio can be established.  A color contrast ratio is meaningless without its luminance component.

+

The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The  CSS  color data type represents a color in the sRGB colorspace."  -

Where human perception is concerned, a difference in luminance matters more than a difference in color.  This is important, luminance contrast enables the development of content that even those with color-blindness can see. With this understanding, luminance may be manipulated so that colors that are difficult to see because of their low luminance could be made more legible by placing these colors against another that had contrasting luminance.  An interesting study by NASA on the color blue, for example, noted that this color, which has low luminance, can be made legible if "care was taken to achieve adequate luminance contrast"  (From the article, Designing With Blue)

-

WCAG 2.1 defines relative luminance as follows (as of July 2019):

+

CSS Color Level 3 provides for several different notations:

-
+ 

+      /* by name (from a defined set of names) */
+      em { color: 'magenta'; }
 
+      /* by HSL representation of the sRGB value */
+      em { color: hsl(300, 100%, 50%); }
+      em { color: hsla(300, 100%, 50%, 50%); }
 
-
For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G+ 0.0722 * B where R, G and B are defined as:

+      /* by sRGB value as a percentage */
+      em { color: rgb(100%, 0%, 100%); }
+      em { color: rgba(100%, 0%, 100%, 50%); }
 
-
    
- 
  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
    • 
- 
  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
    • 
- 
  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
    • 
-

+      /* by sRGB integer values */
+      em { color: rgb(255, 0, 255); }
+      em { color: rgba(255, 0, 255, 128); }
 
-
and RsRGB, GsRGB, and BsRGB are defined as:

+      /* by sRGB value in hex */
+      em { color: #f0f; }            /* #rgb, a shorthand for #rrggbb */
+      em { color: #ff00ff; }         /* #rrggbb */
+      em { color: #ff00ff80; }       /* #rrggbbaa */
+
-
    -
  • RsRGB = R8bit/255
    • -
  • GsRGB = G8bit/255
    • -
  • BsRGB = B8bit/255
    • -
-

The "^" character is the exponentiation operator. (Formula taken from [sRGB] and [IEC-4WD]).

+

The first example is using one of the defined color names. The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Some have aliases, for instance, cyan and aqua are the same color, as it fuchsia and magenta, and grey and gray. There are over a hundred and fourty more names that came from the SVG specification that are supported by most browsers.

+

The next examples show "HSL" which stands for "Hue, Saturation, Lightness". The color produced from the settings are still in the sRGB colorspace, but HSL is intended as a more convenient way that some people prefer for selecting and setting a color. Because hue is adjusted as an angle, it is easy to create a user interface using a knob or circular control to adjust hue. And while in terms of real light, the range of visible wavelengths do not exist as such an angle, our perception of hue could be thought of as somewhat circular.

-
+

Next, we can set the sRGB values directly, as a percentage, 0% being off (black) and 100% being the full value for that color. The values are in the order of red, green, blue.

-

Colors Perception

+

We can also set the sRGB values directly by an 8bit integer number, which means a whole number from 0 to 255. This is the number of values available in an 8bit byte, which is how numbers are often stored in a computer.

-

When it comes to "perceiving" colors, not all colors are created equal.  Our eyes are tuned to perceive certain colors, Red, Blue, and Green, but we do not perceive these colors with equal strength.  According to the article, Hypersensitive cones, the authors note that  "By population, about 64% of the cones are red-sensitive, about 32% green sensitive, and about 2% are blue sensitive."  Surprisingly, although cones that are blue-sensitive typically make up the fewest number of cones, they are also the most "sensitive" to color.

+

Shown below that, we can use a hex value. Hex value means "hexadecimal," where the 0-255 integer is represented by two digits that each range from 0-15. As there are no Arabic numerals above 9, we use the letters a-f to represent 10-15. We add the '#' symbol to indicate the value is hex. Thus, #ff = 255. -

Put another way, as humans, the color blue is perceived differently than other colors, for multiple reasons.  First, because the blue cones are actually the most sensitive of the three, second, we have fewer blue cones than red or green, and third, it so happens that these "blue sensitive" cones tend to be located at the rims of our eyeballs, away from the center (fovea centralis) of the back of the eyeball, where the red and green cones tend to cluster. There is software that actually takes advantage of that fact.  Because we do not perceive the color "blue" as well as other colors, for example, some algorithms for compressing image sizes remove the parts of the image with "blue" in them more heavily than other parts of an image. This fact is also used by television signals to allocate less bandwidth to the yellow-blue part of their signal, thus saving bandwidth.

+

In the examples above, you'll notice that some have a fourth value which is called “alpha”: RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.

-

Another important point to consider is the ambience of light surrounding the color.  The color will appear differently if the background lighting is dark, or light.  One of the greatest gifts to accessibility now in development is the CSS Media Queries Level 5. These queries will allow users to choose contrast levels that is right for them, and enable them to adjust these levels depending upon where they are, and what kind of screen they are using.  The MDN document, Ambient Light Events, describes an experimental technology worth watching; this technology would enable a web page to be aware of any change in the light intensity, and consequently, adjust the text accordingly.  This would be a great boon to those with motor skills problems, or do not have the use of their hands.

-

To summarize, color is as much about human physiology and perception in the brain as it is the measurement of light coming from a computer screen. It's also important to understand that the ambient light environment affects the ability to perceive color and contrast.  Light, and its measurements, are linear, but human vision and human perception are not.

+

sRGB the Accessible Colorspace 

-

Color Combinations

+

For accessibility guidelines the sRGB colorspace is most commonly used. This is not only because sRGB is the current default standard for the the web, but also the sRGB color primaries are well suited for accessibility concerns. For instance, the "red" sRGB primary is actually a red-orange, with a dominant wavelength of 611nm which overlaps into the M cone (green) sensitivity.

-

Contrast alone is not enough when it comes to accessibility considerations.  In the case of animation, certain color combinations are more likely to cause photosensitive seizures to those who are susceptible to them than others.  For example, alternating flashes between red and blue is more problematic than alternating flashes between green and blue. It has been theorized that this is because the "red" sensitive cones of our eyes, which tend to cluster around the fovea (near the center) are physically located at a different location than the "blue" sensitive cones of our eyes, which are located away from the fovea and towards the rims. The electrical signals that go from eye to brain have much to resolve between them as the information is processed in our brains.

+

Thus someone with protanopia (a form of CVD) where they have no red cones will still be able to perceive the sRGB red primary, though about 35% darker. But still, both a protan and deutan form of CVD will have difficulty distinguishing between red and green.

-

In the article, Certain Colors More Likely To Cause Epileptic Fits, Researchers Find, the authors noted that "..complexities underlying brain dynamics could be modulated by certain color combinations more than the other, for example, red-blue flickering stimulus causes larger cortical excitation than red-green or blue-green stimulus.."

+

However, some other display colorspaces use different primary colors. For the new ultraHD Rec2020 colorspace, the red primary has a much longer wavelength of 630nm. This greatly improves color fidelity for normal vision, but it also means that someone with protanopia will not see this red at all, or very dimly at best.

-

Adaption

+

While some standards in development such as CSS Color Module Level 4 are adding additional colorspaces, sRGB will remain the default colorspace, and the preferred colorspace for accessibility for the foreseeable future.

-

Our eyes don't adapt equally, in the same way, going from light areas to dark ones, and vice versa.  This is due to the physiological ways our eye are built.   This affects the ability of a user to read text against a background.  There's (at least) two kinds of adaptation that take place: local adaptation, and adaptation to an ambient environment. 

-

Local adaptation takes place right on the "page" a reader is looking at.  For example, if you have blue text within a gray "highlighted" area, your eyes will perceive that same blue text with a gray highlight differently if it is in a black div, or a white one.  This is called local adaptation.  This difference in the ability to perceive the text is affected even though the ambient lighting of the room does not change.  

+
-

The implication is that web developers who seek to improve legibility of text against a background can take advantage of the principles of local adaptation.

+

Light and Luminance

+ + +

Luminance

+ +

Once an RGB color value is converted to luminance, that luminance value can be used relative to another color to determine a contrast ratio, or used to predict a perceptual contrast. In WCAG 2, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.

+ +

See also this article on luminance contrast

-

Dark adaptation, to low luminance, is slow. When you come in from outside where the sun was bright, and walk into a dark room, you are experiencing dark adaptation.  It can take a few minutes to adjust to this.

-

Light adaptation is the reverse.  Going from a dark room into bright sunlight is quicker, but it can also hurt.

-

The implication is that web developers who seek to improve legibility of text in which the ambient conditions of a room have changed can take advantage of CSS Media Queries 5 Environment Media Features, when these features become available.

+

Adaptation

-

Saturation

+

The human vision system normally has a remarkably wide range of vision, from bright daylight down to a dark moonless night where the eye is so sensitive, one study found a mere 54 photons of light are enough to perceive "something". These researchers estimated under ideal dark conditions the eye could see a candle flame flicker at 30 miles away.

-

Saturation deserves special mention in discussions about color ("hues") and accessibility. Generally speaking, most of the focus is on luminance when attempting to ensure that there is enough contrast between text and its background, or, in evaluating for the possibility of inducing seizures in those sensitive to photosensitive seizures. There is one aspect about color ("hues"), however, independent of luminance, that deserves special attention as it applies to accessibility, and that is the concept of saturation.  This is because of its ability to cause seizures in those susceptible to photosensitive seizures, no matter what the luminance of the color.

+

This incredibly wide range is possible due to a mechanism known as light and dark adaptation, where the eye adjusts to the current overall light level.

-

The expert consensus of the Epilepsy Foundation noted the following in their publication, Photic- and pattern-induced seizures: expert consensus of the Epilepsy Foundation of America Working Group

+

Dark adaptation, also known as scotopic or "night vision." Here the eye is adapted to a very dark level. Instead of the "color" sensitive cones, another type of cell called rods becomes active. Rods are sensitive to very low light levels and don't sense color. Despite being very sensitive to light, with night vision the resolution is very poor, and details can be hard to see.

-

"Irrespective of luminance, a transition to or from a saturated red is also considered a risk"

+

When adapting to a dark condition, it can take thirty minutes to achieve full dark adaptation. Yet a brief exposure to a bright light can throw off that night vision, taking substantial time once again to adapt. In situations where it is important to maintain dark adaptation but something needs to be illuminate (such as a map or a control) a red light is often used, as that is less likely to interfere with the rods which are sensitive between green and blue.

-

Saturation is sometimes described as the "purity" or "intensity" of a color, and although these are good definitions for "pigments" in an artist's paint set, they are not quite accurate as definitions for color from a computer screen. When it comes to color on a monitor, saturated colors are of a particular wavelength.  While the definition of saturation for each of the color spaces may differ, saturation is readily measured.  The key is to know which color space you are working in, and be ready to convert it, if necessary.  The color spaces that come up most frequently when discussing photosensitivity are the RGB, the HSL, and HSV color spaces. It's important to know what color space you're working with.  For example, saturated colors have lightness 0.5 in HSL, while in HSV they have value 1.  Saturation in the RGB color space is usually indicated by an RGB value of 255 for the color in question.  For example, a saturated red of hex value #ff3300 has an RGB value of rgb(255, 51,0). A different saturated red with a hex value of #ff0000 has an RGB value of rgb(255, 0,0). Both are "saturated" reds.  They are two different "hues", but are both considered to be a saturated color.

+

Light adaptation, also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.

-

Saturation is not brightness.  Brightness refers to how much white or black is mixed in with a color.  One can decrease saturation by adding white, black, or gray to the color; to take the example further, brightness can be increased by adding the color white, which also reduces saturation.  A common example is to add white to red to get the color pink. Pink is considered a desaturated red.

+

The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.

-

Saturation and Luminance

-

There is a loss of saturation at the extremes of luminance, at the extremes of black and white.  NASA's article, Luminance Contrast in Color Graphics, in the section titled, "The effect of luminance on saturation", points out that there is a loss of saturation at low luminances. and also, "..the loss of saturation at high luminances--the colors converge on white."

+

Here is a much deeper discussion of the nature of eye adaptation.

-

The Special Case of "Red" 

-

Not all colors ("hue") are processed the same way by our brains.  Human physiology and psychology are affected by the color "red" generally speaking, in ways different from that of other colors. We respond physiologically as well as psychologically to colors. For example, it has been demonstrated that some colors are more likely to cause epileptic fits than others; There is an interesting observation in a discussion thread, "What is the “grayscale” setting for in accessibility options?" in which one of the participants states: "I have photo-triggered ocular migraines and wish everything had a greyscale option. Even better a red or violet scale, but that is probably very specific to me."

+

Hue Chroma and Saturation

+ +The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information. When searching they use the UK spelling of "colour."
    -
  • Red Desaturation tests The human eye is so sensitively "tuned" to red, that opthamolegists set up a test using it.  The Red desaturation test assesses the integrity of the optic nerve.  For more information as to how an opthamologist uses this test, see Red Desaturation
    • -
  • Red Environment: Studies have shown that for those who suffer Traumatic Brain Injury, cognitive function is reduced in a red environment. 
    • +
  • Colourfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (17-233). + +
    • For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.
      • +
    + +
  • Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (17-1136). + +
    • For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high.
      • +
    + +
  • Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (17-139). + +
    • For normal day viewing conditions a color exhibits approximately constant chroma for all levels of illuminance except when the brightness is very high. In the same circumstances if the luminance is increased, the chroma usually increases.
      • +
-

Saturated Red

+

Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."

+ +0 to 100 Chroma Ramps + +

A a good resource with many more detailed examples is at the Munsell color site.

+ +

Color Combinations

+ +
    +
  • Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. +
    • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
      • +
    • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
      • +
    • Pure blues should typically be the darkest of two colors
      • +
      • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability. +
      • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
        • +
      • The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other.
        • +
      • In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
        • +
      +
    +
+ +
Normal Vision
+
BG #F00 TEXT #00D
+
BG #E0D TEXT #00D
+
    +
  • Reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer. +
  • However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia sees the above examples as: +
+ +
Protanopic Vision
+
BG #F00 TEXT #00D
+
BG #E0D TEXT #00D
+
    +
  • Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast, which improves readability for everyone. +
+ +
Normal Vision
+
BG #F70 TEXT #00D
+
BG #D89 TEXT #00D
+
Protanopic Vision
+
BG #F70 TEXT #00D
+
BG #D89 TEXT #00D
+ +
    +
  • Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors. +
+

Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.

+ +
Normal Vision +
BG #000 TEXT #F00
+
+
Protanopic Vision +
BG #000 TEXT #F00
+
+
    +
  • Here again, adding a small amount of green (#77) makes an noticeable difference for protanopia, and in fact improves readability for all users by improving the luminance contrast.
    • +
+
Normal Vision +
BG #000 TEXT #F70
+
+
Protanopic Vision +
BG #000 TEXT #F70
+
+ -

"Saturated Red" is a special, dangerous case, and there are special tests for it.

+

Psychophysical Aspects of Color

-

The concept of color saturation is a difficult one to understand when only looking at numbers and terminology, so consider looking at the image below to illustrate the concept of saturation in a color.  Wikimedia Commons provides a great image for illustrating red saturation.  It's the same "color" going from least saturated on the left hand side to most saturated on the right hand side.  (Thanks to the author, Datumizer, for this example)

+

Color as in hues and saturation can affect our mood, and enhance — or de-enhance — our interactive experiences.

-

Red Saturation from Wikimedia Commons svg saved as png Attribution: Datumizer [CC0]

+

Color can be culturally dependent

+

A Cross-Cultural Study of the Affective Meanings of Color

-

More than one "red" color may be considered a "saturated" red. For example, in addition to the color #990000 described above, the color #8b0000  also has a saturation of 100%.  Not all saturated reds may be represented well in the RGB spectrum, or other spectrums commonly used in web development.  According to Wikipedia's page on "Shades of Red", the color "Carmine" is a saturated red in which, in its pigment form, mostly contains the red light with wavelengths longer than 600nm; the article makes the special note that "Carmine"  is close to the extreme spectrum.  This places it far beyond standard gamuts (both RGB and CMYK), and its given RGB value is a poor approximation only."

+

Color affects our emotions

+

Color and emotion: effects of hue, saturation, and brightness

-

Saturated Red Flashing:

+

Higher contrasts can also have a positive affect on our emotions

+

Emotion Variation from Controlling Contrast of Visual Contents through EEG-Based Deep Emotion Recognition

-

In addition to a red environment affecting the cognitive function of those with traumatic brain Injury, color in the red spectrum wavelength requires special attention and tests. Dr. Gregg Vanderheiden, when testing the Photosensitive Epilepsy Analysis Tool, noted seizure rates were much higher than expected.  They found that we are much more sensitive to saturated red flashing.   (See the video, The Photosensitive Epilepsy Analysis Tool)

+

Some colors can affect our perception of time

+

Color and time perception: Evidence for temporal overestimation of blue stimuli

-

Measuring Color & Luminance

+

Blue also has a significant effect on brightness and glare

+

Blue and glare & brightness

-

Methods that measures color

+

Red tinted glasses can provide increased happiness or joy

+

Looking Through "Rose-Tinted" Glasses: The Influence of Tint on Visual Affective Processing

-

Exploring the RGB color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the RGB color space, such as sRGB, scRGB, and RGBA. There are also different ways to reference RGB:  RGB Decimal reference: 153, 0, 0 and an RGB Percent reference: 60, 0, 0.  {{domxref('Window.getComputedStyle()')}} returns values using RGB Decimal Reference scale.   For example, calling Window.getComputedStyle() on a div with a background-color: #990000; set  returns the computed background color as rgb(153, 0, 0) -- the RGB Decimal reference.

+

Red is well known to have significant effects on our behavior

+

How the Color Red Influences Our Behavior Scientific American, S. Martinez-Conde, S,Macknik

-

Window.getComputedStyle() measures color in terms of RGB. CSS Color Module Level 3 added HSL color values, stating  "CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. It has been observed that RGB colors have ... limitations".  One of those limitations is that RGB is tied to computer hardware, rather than how the human eye perceives color. 

+

Red Environment

+

Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according to this study.

-

Measuring Relative Luminance

-

When evaluating luminance, bear in mind the W3C's wiki on relative luminance "Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3.". 

+

Flashing and Seizures

-

The "math" for the calculations is spelled out in WCAG 2.1 in the definition for relative luminance, and is as follows: 

+

In 1997 in Japan, a Pokemon animation on television displayed rapid flashing between blue and red, at the rapid rate of about 12 flashes per second. Approximately 700 children that were watching were brought to the hospital due to photic induced seizures or other photic induced neurological issues.

-

For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G+ 0.0722 * B where R, G and B are defined as:

+

It has also been found that certain very regular, high contrast patterns such as parallel white and black stripes, can also induce seizures.

-
    -
  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
    • -
  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
    • -
  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
    • -
+

While there is a lack of consensus, some studies have indicated that very deep saturated red (with wavelengths of 660nm-700nm+) may exacerbate the problem, if these deep reds flash between a saturated and unsaturated state. It is useful to note that the sRGB red primary is actually red-orange at 611nm.

-

and RsRGB, GsRGB, and BsRGB are defined as:

+

Nevertheless, flashing at rates higher than 3 per second over a screen area greater than 300px square, has been shown to induce photic seizures in some people, largely children and adolescents.

-
    -
  • RsRGB = R8bit/255
    • -
  • GsRGB = G8bit/255
    • -
  • BsRGB = B8bit/255
    • -
-

There is active discussion and investigation underway concerning relative luminance, contrast, and more.  See W3C/WCAG issue #360.

+

DEEP DIVE: The Epilepsy Foundation of America researched photic- related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review

-

R, G, and B have distinct weights in the relative luminance formula.

+

The study resulted in these following guidelines, a few key guidelines are:

-

Calculations for relative luminance are not casual ones, luckily, there are tools that will do it for you. Here are a few.

+

Single, double, or triple flashes in one second are acceptable, but a sequence of flashes is not recommended when both of the following occur:

+
    +
  1. More than three flashes within any one second period.
    2. +
  2. From the minimal expected viewing distance, the total area of concurrent flashes subtends at the eye a solid angle of >0.006 steradians (approximately 300px square).
    3. +
- +

and

-

Some notes:

+

When the light–dark stripes of any pattern are larger than 300px square (approximately) and the luminance of the lightest stripe is more than 50 cd/m², the pattern should display no more than:

+
    +
  1. Five light–dark pairs of stripes, if the stripes change direction, oscillate, flash, or reverse in contrast.
    2. +
  2. Eight light–dark pairs of stripes, if the pattern is unchanging or continuously and smoothly drifting in one direction.
    3. +
-

Luma and luminance are not the same.  From IEC 61966-2-2:2003(en), "Video systems approximate the lightness response of vision by computing a luma component Y′ as a weighted sum of nonlinear R′G′B′ primary components: Each RGB signal is, comparable to the 1/3 power function with an offset defined by L*. Luma is often incorrectly referred to as luminance."

+Photic- and Pattern-induced Seizures: Expert Consensus of the Epilepsy Foundation of America

-

Luminosity and Luminance are not the same, but sometimes, in the HSL color spectrum, they are sometimes used interchangeably.  Sometimes the "L" in HSL stands for luminance, and sometimes, for luminosity -- and also, has been referred to as "lightness"

-

Luminance and brightness are not the same.  Brightness is a perception.

+

Here also are some additional insights in these guidelines for preventing seizures from the UK.

-

Luminance and lightness are not the same.

-

Luminance and reflected light are not the same.

-

See also

+
-

MDN

- +

Calculating Relative Luminance

-

 Discussions (General)

+

The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:

- +

STEP ONE (8 bit integer to float)

+ +

Convert 8 bit sRGB values to float (0.0 to 1.0) by dividing by 255.0:

+ +

   R´float = R´8bit / 255.0       G´float = G´8bit / 255.0       B´float = B´8bit / 255.0

+ +

If your sRGB values are 16 bit then convert to decimal by dividing by 65535.

+ +

STEP TWO (Linearize)

+ +
function sRGBtoLin(colorChannel) {
+		// Send this function a decimal sRGB gamma encoded color channel
+		// between 0.0 and 1.0, and it returns a linearized value.
+		if ( colorChannel <= 0.04045 ) {
+			return colorChannel / 12.92;
+		} else {
+			return Math.pow((( colorChannel + 0.055)/1.055),2.4);
+		}
+	}
+ +

IMPORTANT NOTE

+

Those familiar with the WCAG 2 contrast math may notice that the above code uses the threshold value of 0.04045. This is from the official IEC standard. The WCAG 2 guidelines were drafted citing an obsolete value. While the WCAG 2 version is incorrect, with 8-bit color there is no functional difference. For the record, the WCAG 2 value is 0.03928

+ +

STEP THREE (Spectrally Weighted Luminance)

+ +

The normal human eye has three types of cones that are sensitive to red, green, and blue light. But our spectral sensitivity is not uniform, as we are most sensitive to green (555 nm), and blue is a distant last place. Luminance is spectrally weighted to reflect this using the following coefficients for sRGB:

+ +

   Rlin * 0.2126 + Glin * 0.7152 + Blin * 0.0722 = Y

+ +

Multiply each linearized color channel by their coefficient and sum them all together to find L, Luminance.

+ + +

STEP TWO ALT (Linearize, Simple Alternate Version)

+ +

Use this version instead of the piecewise version above if you are less concerned with accuracy and more concerned with performance.

+ +

Raise each color channel to the power of 2.2, the same as an sRGB display. This is fine for most applications. But if you need to make multiple ound trips into and out of sRGB gamma encoded space, then use the more accurate versions below.

+ +

   R´2.2 = Rlin    G´2.2 = Glin    B´2.2 = Blin

+ + +
+ +

Math and Methods

+ + +

Within the W3 AGWG there is active discussion and investigation regarding the WCAG 2 contrast method, math, and future proposals. The main discussion thread is on GitHub as W3C/WCAG issue #695.

-

The Color Red

    -
  • How the Color Red Influences Our Behavior Scientific American By Susana Martinez-Conde, Stephen L. Macknik on 
    • +
  • WCAG 2 Contrast Checkerat WebAim.org. This popular and easy to use contrast check is for the WCAG 2 guidelines 1.4.3 and 1.4.6
    • +
  • APCA Contrast CalculatorThe new method for assessing contrast and more.
    • +
  • brucelindbloom.com Bruce Lindbloom's site on colorspaces and the related math and transformation. It includes a very helpful calculator that converters between many color models, including the key CIE models.
-

Scientific Papers

+

Additional Resources

+ +

MDN

W3C Issues and Discussions

- -

W3C Resources

- +

W3C Standards and Guidelines

- -

Contributors

- -

Many, many thanks to Wayne Dick of the Low Vision Task Force of the W3C and the intense discussions on luminance; to Teal for his help and discussions on human perception of the color blue and how software companies create algorithms for image output based on it; and to Tom Jewett from Knowbility; for the tools and educational resources he developed, that help us all.

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/tomjewettminicolorpicker.png b/files/en-us/web/accessibility/understanding_colors_and_luminance/tomjewettminicolorpicker.png deleted file mode 100644 index 8d2b5efc697165ff8c8680d8206e05e623f6180f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9112 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 O13*v9NV62@K=@zW22|_- From 23a7a99766e58115315ed7f3dd580b635e906906 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Tue, 9 Feb 2021 16:43:12 -0800 Subject: [PATCH 02/94] Additional fixes --- .../understanding_colors_and_luminance/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index b16323d61525d68..b852ea9349e64d3 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -53,7 +53,7 @@

Perception of Color and Contrast

In the image below both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

-

An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

+

An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

Our contrast sensitivity is therefore affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging, and is clearly not as simple as the distance or ratio between two colors.

@@ -177,20 +177,20 @@

Adaptation

Hue Chroma and Saturation

-The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information. When searching they use the UK spelling of "colour." +

The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information. When searching they use the UK spelling of "colour."

    -
  • Colourfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (17-233). +
  • Colourfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (17-233).
    • For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.
    -
  • Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (17-1136). +
  • Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (17-1136).
    • For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high.
    -
  • Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (17-139). +
  • Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (17-139).
    • For normal day viewing conditions a color exhibits approximately constant chroma for all levels of illuminance except when the brightness is very high. In the same circumstances if the luminance is increased, the chroma usually increases.
    @@ -198,7 +198,7 @@

    Hue Chroma and Saturation

    Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."

    -0 to 100 Chroma Ramps +0 to 100 Chroma Ramps

    A a good resource with many more detailed examples is at the Munsell color site.

    From e2ad39eae4e60dc4355483a1f57e0b3d0823d5ea Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Tue, 9 Feb 2021 21:33:44 -0800 Subject: [PATCH 03/94] Additional fixes UGH (I hate GitHub) hopefully this gets the image names in sync and lowercase. --- .../{chromaRamps.svg => chroma-ramps.svg} | 0 .../index.html | 45 +++++++++--------- ...D.png => yellowdotcheckershadow_dlyon.png} | Bin 3 files changed, 22 insertions(+), 23 deletions(-) rename files/en-us/web/accessibility/understanding_colors_and_luminance/{chromaRamps.svg => chroma-ramps.svg} (100%) rename files/en-us/web/accessibility/understanding_colors_and_luminance/{YellowDotCheckerShadow_DLyon_PD.png => yellowdotcheckershadow_dlyon.png} (100%) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/chromaRamps.svg b/files/en-us/web/accessibility/understanding_colors_and_luminance/chroma-ramps.svg similarity index 100% rename from files/en-us/web/accessibility/understanding_colors_and_luminance/chromaRamps.svg rename to files/en-us/web/accessibility/understanding_colors_and_luminance/chroma-ramps.svg diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index b852ea9349e64d3..ca30e8167c7c143 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -34,7 +34,7 @@

    Overview

    -

    Color and how it is used is a major part of accessibility. While at first color may seem simple as it is something most sighted users experience on a daily basis, the underlying science of color perception is complex and often not intuitive.

    +

    Color and how it is used is a major part of accessibility. While at first color may seem simple as it is something most sighted users experience on a daily basis, the underlying science of color perception is complex and often not intuitive.

    To begin with color is not "real," and while that may sound like an odd statement for an article on color, the fact is that in the visible range of light, the light simply exists in different frequencies, or wavelengths, much like the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping groups. These three bands of light as detected by light sensitive cells known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

    @@ -53,7 +53,7 @@

    Perception of Color and Contrast

    In the image below both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

    -

    An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

    +

    An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

    Our contrast sensitivity is therefore affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging, and is clearly not as simple as the distance or ratio between two colors.

    @@ -89,9 +89,9 @@

    Text Size Guidelines

    -

    CSS and the sRGB Colorspace 

    +

    CSS and the sRGB Colorspace

    -

    The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The  CSS  color data type represents a color in the sRGB colorspace."  +

    The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace."

    CSS Color Level 3 provides for several different notations:

    @@ -132,7 +132,7 @@

    CSS Color Level 3 provides for several different notations:

    In the examples above, you'll notice that some have a fourth value which is called “alpha”: RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.

    -

    sRGB the Accessible Colorspace 

    +

    sRGB the Accessible Colorspace

    For accessibility guidelines the sRGB colorspace is most commonly used. This is not only because sRGB is the current default standard for the the web, but also the sRGB color primaries are well suited for accessibility concerns. For instance, the "red" sRGB primary is actually a red-orange, with a dominant wavelength of 611nm which overlaps into the M cone (green) sensitivity.

    @@ -198,18 +198,18 @@

    Hue Chroma and Saturation

    Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."

    -0 to 100 Chroma Ramps +0 to 100 Chroma Ramps

    A a good resource with many more detailed examples is at the Munsell color site.

    Color Combinations

      -
    • Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. +
    • Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments.
      • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
      • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
      • Pure blues should typically be the darkest of two colors
        • -
        • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability. +
          • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
          • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
          • The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other.
          • In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
            • @@ -221,15 +221,15 @@

            Color Combinations

            BG #F00 TEXT #00D
            BG #E0D TEXT #00D
              -
            • Reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer. -
            • However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia sees the above examples as: +
            • Reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer.
              • +
            • However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia sees the above examples as:
            Protanopic Vision
            BG #F00 TEXT #00D
            BG #E0D TEXT #00D
              -
            • Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast, which improves readability for everyone. +
            • Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast, which improves readability for everyone.
            Normal Vision
            @@ -240,8 +240,9 @@

            Color Combinations

            BG #D89 TEXT #00D
              -
            • Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors. +
            • Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors.
            +

            Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.

            Normal Vision @@ -284,7 +285,7 @@

            Red tinted glasses can provide increased happi

            Looking Through "Rose-Tinted" Glasses: The Influence of Tint on Visual Affective Processing

            Red is well known to have significant effects on our behavior

            -

            How the Color Red Influences Our Behavior Scientific American, S. Martinez-Conde, S,Macknik

            +

            How the Color Red Influences Our Behavior Scientific American, S. Martinez-Conde, S,Macknik

            Red Environment

            Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according to this study.

            @@ -300,7 +301,6 @@

            Flashing and Seizures

            Nevertheless, flashing at rates higher than 3 per second over a screen area greater than 300px square, has been shown to induce photic seizures in some people, largely children and adolescents.

            -

            DEEP DIVE: The Epilepsy Foundation of America researched photic- related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review

            The study resulted in these following guidelines, a few key guidelines are:

            @@ -324,11 +324,8 @@

            and

            Here also are some additional insights in these guidelines for preventing seizures from the UK.

            - -
            -

            Calculating Relative Luminance

            The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:

            @@ -373,14 +370,11 @@

            STEP TWO ALT (Linearize, Simple Alternate Version)

               R´2.2 = Rlin    G´2.2 = Glin    B´2.2 = Blin

            -

            Math and Methods

            - -

            Within the W3 AGWG there is active discussion and investigation regarding the WCAG 2 contrast method, math, and future proposals. The main discussion thread is on GitHub as W3C/WCAG issue #695.

            - +

            Within the W3 AGWG there is active discussion and investigation regarding the WCAG 2 contrast method, math, and future proposals. The main discussion thread is on GitHub as W3C/WCAG issue #695.

            + +

            Page Source

            + +

            This page is based largely on the white paper on color and contrast by Andrew Somers, which is being developed for the W3 and Accessibility Guidelines Working Group, used herein by permission. Andrew Somers is an invited expert of the W3 and the AGWG, the author of the WCAG 3 Visual Contrast specifications, and the inventor of the APCA.

            + diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/YellowDotCheckerShadow_DLyon_PD.png b/files/en-us/web/accessibility/understanding_colors_and_luminance/yellowdotcheckershadow_dlyon.png similarity index 100% rename from files/en-us/web/accessibility/understanding_colors_and_luminance/YellowDotCheckerShadow_DLyon_PD.png rename to files/en-us/web/accessibility/understanding_colors_and_luminance/yellowdotcheckershadow_dlyon.png From 4ca8cd8f7aef39cd929c6d5f048994389a928ef7 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Wed, 10 Feb 2021 13:34:04 -0800 Subject: [PATCH 04/94] Compressed images --- .../chroma-ramps.svg | 30 +----------------- .../yellowdotcheckershadow_dlyon.png | Bin 48856 -> 30960 bytes 2 files changed, 1 insertion(+), 29 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/chroma-ramps.svg b/files/en-us/web/accessibility/understanding_colors_and_luminance/chroma-ramps.svg index 05f23cc5bdd5ad1..e5ba7ea2f6aab7e 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/chroma-ramps.svg +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/chroma-ramps.svg @@ -1,29 +1 @@ - - - - Chroma Ramps - Ramps from 0 to full Chroma - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/yellowdotcheckershadow_dlyon.png b/files/en-us/web/accessibility/understanding_colors_and_luminance/yellowdotcheckershadow_dlyon.png index ab808566412e2ee7693e8e3f3c5620385ca7400f..8df97e7d0f46026db3dafa3030ff13f081c4d324 100644 GIT binary patch literal 30960 zcmV)HK)t_-P)Px&08mU+MGZtD(S`s@N=m)Gy)G^;Z*Onj-roQJ|8a3~ z-{0SIa&j##EiW%GF)=aV;NUYeGi_~cbaZsx-Q8|(ZgX>U>+9>fy1Lof+1uOOySuwG zGBTK$m^nE))6>%pMHxFgJ1i_LK0ZE7OiVyPK%1JH+S=M{Yil(%HA_oNMMXtONJw~i zc${ z&gSOkx3{+`DJfA=QOwND;rL_|bdTUxcXwaCcG zc%Xv8!NGfbdwza?AXhVjgM!1u!!0cXlQ7m!=-YXeHKhAprD|vtgNf6t0rGMb)A1DCM8&hXNZW1XOwhcU|G@WtqO8j*gBxZ%xkY&7z{BUW{xANFt83m0OBx zw$!<%$EqP)H?q;QuCA^VKq0ECs*|^vs?4s@?ax_QSk>{<;NRm_RaM{f+`!+y%jn0w z+q&-V?jJ-gu+FiEu8^O>p^LGS7(OSNzMQqwv<^ZdUtV6g*SP5S=Emf~PKW=vgCe{)@Wfpv&>Qm(_SF+w%Tg#veSXD?Mfb9!@jhNbM9|66D%32EGGTWV-MV$_kzaiK>8D@)$Ft9V<7Yqm z$&bJP!yo+g%sW5--glmS@{KoNe))+fo`3$z+aJ7s?%b(U@BZo!?_Ij|(TD&1-CMu@ z&EJ3f*V2EaVFm2Hg8lOf*cGrVV3#A|Z|m@NX+%7YFQ>6|fJ4V%Lw=Cs-ic(6D32a#iezSQD}2*l-{#G=!jCclmPRht+2qJry@1`D2fJfoiamEO5B5?` z!H#Lq7oNbBVj(E@qD;p1uwHWMK4@S^wD73Lg+&X?^Ica2+2ruDw}RKI@YtmQJKV%T zr@?fv@Deo4ScJ1nCEW)L?By%~oWfbY7^A{-Jt2hWVLCFp0(L=qWx$T&nP`n%!Eb$d z<@vtnMV?NMj1I4WtuzlX;X}a^Gr;DJK^VOX%5>g?na=8D&FC%-*eh4xe!T?tQf`Y`y?t0`QKF z)}>-k)ex+9G4t|us|57!UQ4O(;etKnKLLaT(GpR=y|wevuk_>5MFG3Bs+P8V(0yd< zk+}!mSFV0==bqPMgB{jzkK@X~nub9XBs`TM04<|FYyGO^>4V*!1BdPv?gIi=?{+md zNsG?8iXaPMOQj8d3!m!#$5d$NLWEQp@{WPVmM?(N#BJ86`6iD28HJaJ1vRDzRM!o^!QojpfD#TaV$v)LGVjS zhs&Je@CVDzDe_oXH2lzjO?s~9do-XBnHC7P@NUSnIykf;rBseMQV|C^X^w1S5iS9( zV>v{EEg-@zLin)@hx9V?*qVWDg2oBcDwhk+OtG(By|2?oX;QWj%Bz-?p5m7(2X^t| z$>%cjB!*A_doN&5!@6sOaOTXJ0@yceJA`S1j)_(c7Q7?Sf#(JLFZ9|Dx90;3j(}{1 zEa0oiu?<7X(K*2Gs14Y6mIQ25#%E?4SnYz=mIlmy=0aLYi^y`WhU|2(P}sNy-vE2C zl|qh6b#^uD;aL=W;6F>F*cxmmHVHRiQ500oRRms!>7KQ(KxLAW-@z3C&H!t1?!Y%q z7=uKndYy1EOm%#@Z%zB?qI&Ft6npL3wM7Oy;z7|8kz2K31qQwAmT#Fmo7g3=09DGo zXz%n`%d(6~09|;^IW!U+%3V09j%^rdbVsKRVJ_CGV%M9(6S+cEO%@v4Kt}_qP$7v( z$qEp-OZ0TQS(Yf}w=Lhd3g6Z{Q$#m1^53 z=>M{X(XO$A`t;bO>FyzGnQhss6{~}2duotFb_KawF}KghClYsGljEPmdmN)xfELo75*o_xQ^RLhW=Ei9=o0f+K0lWaW(&c~X1dOT2~6czbn`}H?lp0<1eRE70@4NHI*ROS z^@CvP!7ldMt+7C78Ds(s-K;3?1JL>BvBmT%AWpz#(Azh|om`5qwW0eBiBsTub25>rgzQxO zvWb}>aH2XIBO33b)wg27R|E57#6DTt%ffh;!FIVduo!GWeX28!U$>NmvQ;SdWFk?? znkZ`+oOC?->R!dP83)(5V#mI?wyQ5P=Psy`t2tU&JdiPc9y`Nx<9%=tEJO(%G9gX;L<-GTNZzrGbaJd{#=bN9&$Pwme{P~Ocdo^zQ#HjH21 zG1xAEg|EAfCoN?`#Fxc*I#D6m31k((g5bFw9`EveK~1Dya>ZU*#39ToXAtUzB)s?N zmbUF*TLZ<*qqBe&cLi$>8fn(Iiz~-M25aHgzFi^MNfaku01G{WBR3Dg^$oz5@O_F~ zivzZcD>+rhbBZ5dyS;x+gmqT4{8?j2Uyv6}STGMJgXPa5$D4-C96}1T+pb$X;V&vy z_k5YJ6l?;ngpHtNDTQ(;db|8&F>TzdVjIf9p04<){Gxz;&a%_i6j%_PEv?C?Q_pohuwZRU9MCM7D>bPXE`Sz|9URH9n49uXm4dwuX#kNlM^@TWsXczX zI|WwME7$?kPC^G-KHY<^Qb7?pzItHQ{ua~XdcwzydQr<7H?Lc-;0KtQ;{=%MY-_ij zGwl*8pSxDRz#pWbhT|gk3hqb2x|Q9dL(X4)LQMZC~o|iA3aK z@H`WNziXky zRB4VSl1RwEwk6-k+Kr~F<^57@@laf~U>nonK@_IBvZew$NY02BNq{RY9-3nSC>&I& z^KCEnHSYta;JWegL(~1b5Q;=r_pJpFu`FrkQd9G5L$=b+%ghfsSD`bsyPamR7WY}P z_Xu{|(U6~zFIv)?@>p;IGrg0RsVyCQUg~dgeLrp?1Vjb+$(iVT zG@T={Ny;Kq_;gIR!dZd&cOAIItFf_f@SM6NZ1xe$ z3`xx}S~*8MHgp|+CW`zxatSb5bAZ4c9|G0JI1N@OCJU4+n{E+eD+s`=d(2)WHh07Q zR_wdggKg~1IS0wK^?zp0H?)oWjN@Cy9lCpQ+?~$8E8e|m=KGQ4f-F=y9zMB~?AeZz zP;*&j$(e*4Y&Bq~wsEtHWO0M)9$jPtL3>>&c~i0!jI%dkw5(zzu#tf0kx|HAn7$ch zdo#w`F!o~4^E;jXSaxjL`LoB#Nme3*KYH%@eV;$SAJeq>Z0TL2&UHk|yb!z5wQ^=L z2?CzW3*i9>82Dj`j1qMJt0DyycR&L^j$P`pB4k?*LwJyCJ>iblZBHDxwzjb$8wmFO z0}O0$-+bO+PaYWTVoVHRm2R(K zs}H!!1qjWO0t}H-sZ#Ig@Ov{R_5cBo--J+0V{$O4puTY5_OESvUf-uZFIYA~`-*Zq%7VH)YZV=3=oLe$&#c1FG6G{j&yC>NY2hr zjHPB2Of4J?%Cr+G(iqLx9KEGWOQUf>A>iZ;@A!uckb(%!BluJ;BiA+dxr2Q+9-F+V zzPs4vmi6`w((_|KB7xA=zU06qCLP6DITZ%Akfz?w$#t#d5VDC_Q7YwQ~0B1@lC(ND&dD74g zfyE+%kzPDg8c1D06#=0EKZ7ly#hu!yJ2J)=kP?t|4UgpW8W*A!HQ8+qdA9Llz<%@$ zz@`T+6K5kx^ElvBvC@eZMCHffOVC{w5vA^2hh~Q+Imqq}SAJ!3vz@oD4aOA_hlUu1 zV)Qqnb(@Av-5}6PDPJbfs)C@ldaQtJ*9(iWCx3eYuxiQz|5IS$ki>Su;&clGZw)An zc;SN)_tpiXA%XU%P=(5xosD*u20p&R6AQR1H0fwu59z#-YZAy^hKZM0jm-<17HSOy zZj9yFM~|PJI(zf~*<&NIvS0GIX%r0By)Z|DoVN@s-?g;HX#GlX`EFjcT$?Fu#$_XquCzhG&R2EH*#;DcE_Z$oR|Xj^OD zpc~7Xbo5nl-54ZyaC?A6bL+M6!SD)%5)uSez>wJOtj5+ll8JQ&#e5qx{_*v4j}3-_BiQ~p!{82~wnIS! zVcOrm677I^s^vXt)I7aWZ9?J}dtho9Dlle4tiCuuFnmc89dKTe7AF}c))$$SZPpFd zcM}AC5Mpwpe@I(=%zHmr`AEbJ>zee2~ zQMwk1&`U(ury)Vu2iUVNSa*u^S3mjr{=sf;(nkL_U?<0jq*wvP*+(ewz%rsJ`r`== z=U!|hq_I019k0^_xI(1m5HB{*-N9yov+aC#wEN;kUy{>QSnE_3eL=M~m#ZDAS~98Y z$#goMOokEc&HaHrbzra%3f3P%xW~w}6)bn05fxPUJYTP3d8_?)2?1KITuAo}f&PVM zJf5&8@q7YA=Ov(C9_lSRTGhOlFm9q(Ld-Pq^$4r!9Y5-G-W~6oUkqnhh+lXXosrC_ z@TjMC-31z62v29Hr>DcY|NiIhsW;qu?3=E&Ik0h%Bly5$H`gDr!Unp>7Opbb!Ms+;PoebO*SFBZ!v4nW!#i}0sNf>#H-hDLqSa5!8j z%toVy#Sx#+_bOQD{JF%pFB$AQfZf35xDjl}HPezzQItGd^$6Qax-rIjV0noas+f0I zB9IpduAr*2th-?yZWGrg;RJ?Hj6&>knK*=4$dr;TS1J|A&Sp~G6Nz)3zTRG6=ecw9 zClZO#Qfc(o3V^+NkWlc;1A~Q7fB~=pY{xByh}f!9T$&AFd45~6HK^54fPPINvnZwe z1)CLc^;T7nE3#|6*&9r4mZPqGLj82+xHBh`We0-+SfyNqYq4A|FV9shznL2B=_@6` zPZP-X_QXWrC*K?d?9RJp_8en35iHjPwtr$qWO&i>2i<~QqX^gqY;ATB-sF%g1GWko zl%1(k^te{RwFvu0pr}P*rPuX{4(n3lDq~rqRjeRSa8--?Yo#(bw>$^7e15e|q*y%F zGcYt!DwS4-2712v;{AhyZ9Ap?-If@;feBCz?8DnZKklW(k}{nj66<4|-fYFwi!Zb? z9dML^w9H}pZs6TqjRXx~;kBk)z9#Y!Y7$p`*QS?d$BPxGSgDXQM1bYx3Oro~n_C5_ zt9Q;%O~K!{-kLgpzDWLkWqkN}SNHM9e+RHPUnbbi5Q61uU>_7xyhNypc~YoDA@Z! z5Z7@7-PTIph(?zdmKF=)`INOq*QE#Mx#P!0bTvT@<%g6pDxH}W zC6+*JP=<}U0TQp{xf$t`#rnX+yGKiw)ZE;y+mhX8X>*_KCfyQ~{SRH*o%8v8zF)v< zYiqlE628zhee&x2obx{C^W_WX=k?X0iesIw?JnRGg|d z*te3u2xq>}ccIId8#Ob`VT{EX#~4mb7?}*tO%S8`yv4G-EMHD7ZI|XD@ges4%*VW^ zDutNji0X7vjRxM3tm?%F2g@F|bFyL)>>vYs@rHT$hv6hZh=)OD!|_$2&+2z&$#;P} z3>z0Z@us&916K+RERZQN?;Us?yRlIU3U9#w&NLh0n`ts#COMXrC$bzJO{G$KjAiQe zg~G(xc(4|j+ha%>Q$&iH4?H2FItYzQsZ^>kl*)diQ7L=z*FRpn|M7wRUiK7jnVCc5r+RC18tpWQB&N!{*^jVU#I{ zG9Jglo+*^clZcb&3G*lpqy%X<#86_$=Pqdj^MOEs$rPb-B27mLQyrBkf(57$HltC7 zVAnpdV*h#K7wC?H{Sm;J4##1F1gOJU77+`)V&-JbJQmqrFrYm*oIBsFQZ6<&hYmj7EhNLoIpnFDM27`S!p*BX)~`y%>AsJvr}4jHiKM$cj_m_wH$wwB@A-~ko-^saj+GHIpeC1))ZDEvZi{D%MjYqY7dLtP%t(l8D6Osi_vQYu_r^(HqmKvzCaHOg6JB znOUWEa&a3JQ0VZ?g-k!k4DpsDbpygRgfw}O0yrZibM!jBvwz|yh*^`e|xaa zx5~c{u+Y5XaUhta6_MB>`WZWSrm5qkusF)|=5XAc$|r{$E1eq$dpO7+!03K(uhX-f z%8zmqrPA!~rUFHrsL=6=R)Ja@QTLP`4!vIQby!{ZOqzZbIw|I&urt|gnEf>W6(kr` z#EM`aiIMB(=DUF<$6gJvpPUsexPn2!4RZ>Tocha#$y`M<1Tzq|?uZNj1omCnEw|)n zgsIhKpJV%Km;GRIv1ACGbL2BZ`7*YqF)C0>bcO+?m6Q;zqClBM>!8vyh6At;^z`^g z9NRTje^jO7(%vRJ5+wPhGze4(@uNqN)Tq~^UrhretxlZ)w!*&M|LY!+V3j_DOe~++2biQponw?f~eF@BNPe-;pN^>!@S>bw9%w* zC{heTKea0L*i!JY73}K<1mXq=Q_A&if4PJEa>wrv|Mpw%7Ne)%X>Z4;j|k{6w9KM0 zX0jH9$-Tt5VvI9Wzk}d>5nrNwr#7c0yHObK=k^Z_cS3%B*$Oy4b%&>Jtpia;bzlV2 zz6Xk_pGp;F8U&q&T<-1SmfKmHRLO9Nk{t(DOz9rSl?QwC{|fd=ZGCN8Z5!^J=jQL(uNFd3 z8p==r%FyohBkTSFy`Ey_bP7a4rVv{$S1^=wxk@%Dsz!xctYA&Q1*{rEEEXLbXHzUe zJ9`$z9`azneD?UeFJF=xE93(bpG`*CfQXZ)K>5N+t0w8~yHGtL)63a;Q(s>Im(CDy z?d|Q0YIG(o6ozwGiXpGxKQf>PoU}gy(`{hNA$1jtuC374maCB4%Gq^OAXb?|B$73( ze}gRarm2(29_tF$PIvDX1v~pLV4u9ISUmnlu;2=)muEy9!%>SuD;3s>m<1&l=k7KTNO@`2Z*7Hw+bB|um0WHG-;2%_ zmmw;a(pIIAahB>#U>}_Frnp%auf4C}vzE2tACCNJ2YMV^+TPPSxVKhxcWw^U&KX<#ZvgL*{;6}87wFpde zE99ChICHLCN3TLHlZwlq z4=wp^9#8m0qb-Y;FZlH*_AG>bW<&r-UO^zU1{HX7rWI2cI`uheex>U&rz}XWDx+1 zIbW&l_jqFf9xBkF|@o`DN}8eJL{%C^r~R_S_=4W;D71h*%+<43zMlBrDE z{R8{?+qo6zLbl+%diC}~E_d4ykckvhv3N=?QOFb$k%Y0NI61MN9GfDkdg^P!m6U=X z|KQ=;gSBtIdC20_4}$pkr_H6{&p-clE7;#~r?m8&iF_&eF9Z9RFTQ;Gbo$ayzK5=W z5N*8l(@07*naR6MWI)^WaR`fQ$=%D}`t0R2c|xJ!f2^HfY*W`A$30|Eo_(zwEB9eDR($PH zJHd)s_E2P5RCXpdt5KX5LCZ)k?fue|M`~A+j|Lg=}ww*w70g;DKzUTMvoZs)#Enf#z z+WHeJO=<1H=pMqRe)#YvaPK>bQq`KNQZ<#ClEhT5OM7U+UtbUy4`?@W#4r>LW=wI` z%v)^WxXgMRrm=d90+w$4?Z8^h5HbMQQTzJU+1c=1TQ{HuwoSfHee157`OS*`sYbC! z>%d-9!2a#uH(nx&J}6TGuqmytW$)FJp22lYKfHF_xC4VY*)L(DT|eC zeEBqrDAiM6M75z5Sw_zTS;owgq}9R{%#6rZ0_9Ez3#cI_6(BT#mXz1vHYq<(u~N7-1J3K_=32q$pJR(8c&~5k_s!;U-Jh9y9OW?IcD7JeFLM@uhm_Rw0F^iK~Zcr+!9C4 zdV5DXRZhg?i+8VTz_!6h_kRcWS&9V{d%Hoge@4lk|L~*QMi2n?^zWbe$**+CbeD>> zU%T@sCkfIhEkT8fp=c}zdW~zssd}vHSrox(Q!4&?)e~Xd$@+QG#`1;E0G&)C4LBoR zP_1rv8Q|K?;O0d$gU8yUz>uF4dMPt}UlG0_aq<~rI7Sq^T&X-T84eo-o# z;Ma_`B8O9(9KQ-ymg%NUiKq{~z8<#k?kcw3(pU4C$<@Mn9 zc(A`{BG5SFFRUGy5iLHCGWOnVHD3m_mH6WN)#*ETAR_4NlZ#p`y;uD?fhQUqra z6-u>=Sg{Tj427%-JKH5AZNRF4)tK3ayk0^JTU-#@tF3q?zeQ>-1+HW!E$JL}<77U3 z&6L4ijdwa7tX>ez3@R4CIdN@fVjhS&W(O11QYxFRf@-ss#f6Kr)3Cz27mW&}#Osi9 zcWXPabhhESbAP;c<#g?KdLtH9oV*UB)Oyz+llML;MNzS)X*nv*#XWk~E-O`gdxD(v zHGs8jSu;VKDTur?WhH}7(5y;rPvFRqWvkChtpb3y`f!#>snXGI_d^^kQ0qzzEJ=UC z5(`XcWF?2eJ>dDW&J$s-=x$n!J<82>d7ikd_i=SNi#IZ zaYnTf8s|QcHzSe;6BC(Y53F$@gdtFlcXT?5QzL;G1`Z(nLc!*!WLL43xGYY0sDN#YQO^5)62&;9;ahPJQYQV#n_}ybyP70s=W8d@HZCtu(k)wlyWi_ zzlYJ>@zDsAVKiVFTB>HY$Uh-;5(Imtg=@i!_$H%vn3)tGNXo^o9nRR|=8R<4deR-J zW?gS%71Bc7mjF40U~7*6)Rh$wZN6H?c7??1>H-!GAXU(XHI>2Vf|dH}X;=L=idCvx z2=@BZr^`=klxvZCrBEpLvMwqs6__egrF%a}7uHNihHyn33?8A@ok=m8rGizFYGY8@ zc@;!|Bw$6bIQJW!7v)OTO9q({sMtq}^P&JOzVxRBakm6YDc6ocaA|^w^+lUAk}s!L zQYzS$#LDX8!jswABcj@pC zG?>a|#&X42C^I%Tf<U0uDm@bJmS@buiA1oq(6)Ml`A1ASm(Rj?>o z0v5d2;lqc2yH(fBtK{w$h6S~mjkUEk*yX59YEVI_`_2GZhqKpJuDZD-ig|2g7*F?x z2~IEo!)OP*-l3!^-)`pF#`?;3V3jb7#+^KtV+Bh`09}2Hfz}A{MQP6(eg4^(5?F;S z1q<;l4w&}_;tq^#^`gLAJdVN6!QMzERVtNIq?2(K(cXP>adwH`Bbrhct?O0E$-ik zrC1$FqwIqnm6Dqq9vREz(j#847YzWQCClp#8naH#ghJV9$PY2LqJpfeO9^EJ9%T>_?XSey~@AkxNmIXl5DpsiiOwR-Q~LqJP= z3>2(Wv^Ilh40KVjZLhR}Vj-tJNfdixo=R3$>{;amfrPQAPR)Gs_irBm^U>PlG&uZp zPL8Q2ckRWq1D!)UsP_Bq&fW2<+nO8+a^4{@vj5@i>SCM7u5grkBx^j=@zkSM8obT; zr!#RZPfFE-EN{RGMQ9h=dL=h#32n9G)f%#P9_rLhqG(w+joS3VOS9UgtEy6VAJIyd z@`S2JB5#O?=7EO@b^%3^C@4Thm++$q)N{_gGj>QIh7+)zNQv#wXTI}$&p~Jzwn8I9 zhR4kTz5=i;y$1-yYB<>+8CIl#>)OtXP=seEexSbENwcWr>N&%4Flj(}MoP*ksc@pF zGhdkh55x9~7vdf}_H%^wiqmR~eQ8|>F;C24bH8)X^ub-D*^vu~nJ zVEHFecZO;js2XF`7tDEK(t!JRIcH1`#}Yl= zge@?_{p$!V`m{}r#a!))6E{6zL1p)SAA#L}lBl3XW48eNuYbPx^`8LMTcEAg>|}qH z+5PeU$!z~Y?6ll_V5S3etL*HAWl?Hh))gyOSj?DOvNBpylO-|Zwx$^17sy^M%JAgH z#tSGw(gOfOpzf42w$PmNDYStrBHOa=ipKnzs$H>*3Z@MydC=l7(~WasYz!5_3ded1 z5bxf&apTJMiz^E&XBQUs9X?E%+M74Qj)BS^10U=Je)k2rTl>*1_?RjPoMeFtJ~{LE zCm%ie9K3>uU%&a)n_rQx0<3q3M^{(Dotgw-0pM{kVgqqN6^k+*UR#A_QMw9&#r#UR zT%1}o?b2vzDhve1a-jHD3~E;)Mco-#x`AKDXF2;Ye)gHn(F7j1ms-M#Y850q_JeIJS>Sfq+F}z#_80 zCSX4~bLP`eKmF))FkKH(enzMQtgClNSI1XRaY0A*^ugXf*5fkM;S~Zco(Du=C15T? zx0KkC=+tz zF&}&K&mS|6#asbr0x(`ro;>*L1Cm>}*4Eb7*KNR+

            EBFke;8R>9G7yRkaF0&6qD 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 literal 48856 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�j%?E=IIWDt>f2!+Y_9*qwJr+XYj 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 KRB^{V{Qm$(z2Lh5 From 1848d1236d7cdeeebdc4a7ae4e917840c3ba7efd Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Wed, 10 Feb 2021 23:44:13 -0800 Subject: [PATCH 05/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Agree Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index ca30e8167c7c143..573b93a286d2055 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -27,7 +27,7 @@ ---

            Understanding luminance which is a measure of light, and color, which means hue, chroma, and saturation, is important for designing visual and readable content that is accessible to all sighted users, and especially those with reduced vision and color deficient vision, but also for accessibility by those with certain neurological, cognitive, and other impairments.

            -

            While there are a number of international standards such as the ISO and ANSI, they are not freely available. Nevertheless, the W3.org's WAI publishes freely available guidelines, maintained by the AGWG (Accessibility Guidelines Working Group). Currently these are known as the WCAG 2.1 accessibility guidelines. The next generation, WCAG 3, is presently published as a public working draft, pending further development and approvals.

            +

            The W3.org's WAI publishes freely available guidelines, maintained by the AGWG (Accessibility Guidelines Working Group). Currently these are known as the WCAG 2.1 accessibility guidelines. The next generation, WCAG 3.0, is presently published as a public working draft, pending further development and approvals.

            The WCAG 2 guidelines attempt to define adequateluminance contrast for sighted users with deficient color vision (inaccurately called "color blindness"") or reduced vision, and further WCAG 2 guidelines are intended to prevent seizures and other physical reactions in people with vestibular or neurological disorders.

            @@ -414,4 +414,3 @@

            W3C Standards and Guidelines

            Page Source

            This page is based largely on the white paper on color and contrast by Andrew Somers, which is being developed for the W3 and Accessibility Guidelines Working Group, used herein by permission. Andrew Somers is an invited expert of the W3 and the AGWG, the author of the WCAG 3 Visual Contrast specifications, and the inventor of the APCA.

            - From 247ac228ae6be036bf1084752ad7eb57f6f1a0e5 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Wed, 10 Feb 2021 23:45:33 -0800 Subject: [PATCH 06/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Doh, my dev environment sometimes does that trying to be helpful, LOL Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 573b93a286d2055..113760b671805bd 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -29,7 +29,7 @@

            The W3.org's WAI publishes freely available guidelines, maintained by the AGWG (Accessibility Guidelines Working Group). Currently these are known as the WCAG 2.1 accessibility guidelines. The next generation, WCAG 3.0, is presently published as a public working draft, pending further development and approvals.

            -

            The WCAG 2 guidelines attempt to define adequateluminance contrast for sighted users with deficient color vision (inaccurately called "color blindness"") or reduced vision, and further WCAG 2 guidelines are intended to prevent seizures and other physical reactions in people with vestibular or neurological disorders.

            +

            The WCAG 2 guidelines attempt to define adequateluminance contrast for sighted users with deficient color vision (inaccurately called "color blindness") or reduced vision, and further WCAG 2 guidelines are intended to prevent seizures and other physical reactions in people with vestibular or neurological disorders.

            Overview

            From 600a51a42ba2989f8e4ef80b605d5044d2fc521b Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Wed, 10 Feb 2021 23:54:46 -0800 Subject: [PATCH 07/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html I'd probably say sRGB.... is an example of the additive RGB color model, but this is good for now Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 113760b671805bd..3f0f922540a2951 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -38,7 +38,7 @@

            Overview

            To begin with color is not "real," and while that may sound like an odd statement for an article on color, the fact is that in the visible range of light, the light simply exists in different frequencies, or wavelengths, much like the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping groups. These three bands of light as detected by light sensitive cells known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

            -

            We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively. Thus we have what are referred to as the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model, such as that used for the common sRGB monitor and the sRGB colorspace, which is the default standard colorspace for web content.

            +

            We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively. Thus we have what are referred to as the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, uses the RGB additive color model.

            RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L,M,S cones in the eye to create a particular color perception. For instance when you see the color yellow on your monitor, the monitor is only putting out red and green light, which stimulates the L and M cones similarly to how a "yellow" wavelength of light might — the red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

            From dcecfa442aebbb7ee1ceeb8ad3906876c212e010 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Wed, 10 Feb 2021 23:55:56 -0800 Subject: [PATCH 08/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Thank you Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 3f0f922540a2951..bc383fb963b07de 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -40,7 +40,7 @@

            Overview

            We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively. Thus we have what are referred to as the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, uses the RGB additive color model.

            -

            RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L,M,S cones in the eye to create a particular color perception. For instance when you see the color yellow on your monitor, the monitor is only putting out red and green light, which stimulates the L and M cones similarly to how a "yellow" wavelength of light might — the red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

            +

            RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color perception. For instance when you see the color yellow on your monitor, the monitor is only putting out red and green light. This stimulates the L and M cones similarly to how a "yellow" wavelength of light might. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

            CMYK is another form of color model, known as a subtractive model. Here, the cyan, magenta, yellow, black inks remove certain wavelengths of light, reflecting back only the narrow range each is associated with. In this article we will be focusing on displayed web content, and so we discuss mainly the RGB color model.

            From 8620e3dd1fa8475ad2bb8fd6ec74526b7f7ce533 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Wed, 10 Feb 2021 23:59:30 -0800 Subject: [PATCH 09/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html I can certainly do more UL if that's a key style here. Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index bc383fb963b07de..380f688479f2b09 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -49,7 +49,13 @@

            Overview

            Perception of Color and Contrast

            -

            The first thing to understand about our perception of color, light, and contrast is that it is not absolute, that it is a context sensitive perception, and that perception is mostly neurological in nature. Like color, contrast is not "real" it is a perception. And it takes the first 20 years of our life to develop peak contrast sensitivity. Age and many forms of health issues — even medicine you may be prescribed — can affect your contrast perception.

            +

            The first thing to understand about our perception of color, light, and contrast is that:

            +
              +
            • It is not absolute,
              • +
            • that it is a context-sensitive perception,
              • +
            • and that perception is mostly neurological in nature.
              • +
            +

            Like color, contrast is not "real," it is a perception. It takes the first 20 years of our life to develop peak contrast sensitivity. Age and many forms of health issues — even medicine you may be prescribed — can affect your contrast perception.

            In the image below both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

            From 5042e1cb6f64e7541cda58f529be831db35892a3 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:00:32 -0800 Subject: [PATCH 10/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html GOT IT, good point thank you Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 380f688479f2b09..8247089eb6dead1 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -57,7 +57,7 @@

            Perception of Color and Contrast

          Like color, contrast is not "real," it is a perception. It takes the first 20 years of our life to develop peak contrast sensitivity. Age and many forms of health issues — even medicine you may be prescribed — can affect your contrast perception.

          -

          In the image below both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

          +

          In the following image both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context-sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

          An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

          From a2d7bb0795838bec24209f57d39888124c0c9333 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:04:25 -0800 Subject: [PATCH 11/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Ooops... I think this has been a crutch for me if I feel I'm being pedantic. Didn't occur to me it would be taken that way but I see your point. Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 8247089eb6dead1..3eae15935fd26b3 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -72,7 +72,7 @@

          Readability Contrast

          Spatial Frequency

          -

          Our perception of contrast is not only affected by surrounding elements and the environment, but the "Spatial Frequency" of the stimulus itself. A higher spatial frequency means smaller, thinner, and more crowded. This obviously applies very much to text and the font size and design used.

          +

          Our perception of contrast is not only affected by surrounding elements and the environment, but the "Spatial Frequency" of the stimulus itself. A higher spatial frequency means smaller, thinner, and more crowded. This applies very much to text and the font size and design used.

          In a typical eye exam for acuity (ability to focus), legibility at a particular level means getting three out of five letters correct. This is wholly insufficient for fluent, easy reading.

          From 2edf578805089136a5b6c13de00bcaeb5f8dae51 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:11:02 -0800 Subject: [PATCH 12/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Got it, will do the full 2.0 or 3.0 in the future Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 3eae15935fd26b3..8a43d69e7dcb9cb 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -89,7 +89,7 @@

          Text Size Guidelines

          The current WCAG 2 contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

          -

          Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3 standard on visual contrast known as APCA takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

          +

          Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast known as APCA, takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

          Non text elements such as icons also need adaquate contrast for perceptionWCAG 2.1 technique G207

          From f2cac706510c2ecbb93c0e7cbaec390fbd7cb7b9 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:18:45 -0800 Subject: [PATCH 13/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html ! Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 8a43d69e7dcb9cb..1437e8ab33b4680 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -125,7 +125,7 @@

          CSS Color Level 3 provides for several different notations:

          -

          The first example is using one of the defined color names. The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Some have aliases, for instance, cyan and aqua are the same color, as it fuchsia and magenta, and grey and gray. There are over a hundred and fourty more names that came from the SVG specification that are supported by most browsers.

          +

          The first example is using one of the defined color names. The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Some color names have aliases, for instance, cyan and aqua are the same color, as is fuchsia and magenta, and grey and gray. There are over a hundred and forty more names that came from the SVG specification that are supported by most browsers.

          The next examples show "HSL" which stands for "Hue, Saturation, Lightness". The color produced from the settings are still in the sRGB colorspace, but HSL is intended as a more convenient way that some people prefer for selecting and setting a color. Because hue is adjusted as an angle, it is easy to create a user interface using a knob or circular control to adjust hue. And while in terms of real light, the range of visible wavelengths do not exist as such an angle, our perception of hue could be thought of as somewhat circular.

          From 552b2243ad95094802a6937a443589116bf7eac5 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:24:07 -0800 Subject: [PATCH 14/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html I was trying to indicate that it is a personal user preference... some do not like HSL. The future is a perceptual model like LChab or JzChazbz, but that is in progress/debates... Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 1437e8ab33b4680..aa2bc0e808d0038 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -127,7 +127,7 @@

          CSS Color Level 3 provides for several different notations:

          The first example is using one of the defined color names. The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Some color names have aliases, for instance, cyan and aqua are the same color, as is fuchsia and magenta, and grey and gray. There are over a hundred and forty more names that came from the SVG specification that are supported by most browsers.

          -

          The next examples show "HSL" which stands for "Hue, Saturation, Lightness". The color produced from the settings are still in the sRGB colorspace, but HSL is intended as a more convenient way that some people prefer for selecting and setting a color. Because hue is adjusted as an angle, it is easy to create a user interface using a knob or circular control to adjust hue. And while in terms of real light, the range of visible wavelengths do not exist as such an angle, our perception of hue could be thought of as somewhat circular.

          +

          The next examples show "HSL" which stands for "Hue, Saturation, Lightness". The color produced from the settings are still in the sRGB colorspace, but HSL is intended as a more convenient way to select and work with color. Because hue is adjusted as an angle, it is easy to create a user interface using a knob or circular control to adjust hue. And while in terms of real light, the range of visible wavelengths do not exist as such an angle, our perception of hue could be thought of as somewhat circular.

          Next, we can set the sRGB values directly, as a percentage, 0% being off (black) and 100% being the full value for that color. The values are in the order of red, green, blue.

          From a3d21a961222218094a08431faa44feac7400696 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:45:35 -0800 Subject: [PATCH 15/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index aa2bc0e808d0038..c3ed45fea9e0ac2 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -156,7 +156,7 @@

          Light and Luminance

          Luminance

          -

          Once an RGB color value is converted to luminance, that luminance value can be used relative to another color to determine a contrast ratio, or used to predict a perceptual contrast. In WCAG 2, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.

          +

          Once an RGB color value is converted to luminance, that luminance value can be used relative to another color to determine a contrast ratio, or used to predict a perceptual contrast. In WCAG 2.x, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3.0, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.

          See also this article on luminance contrast

          From 55c80ad334be52e5c1b8fdcc07dd632aef015352 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:47:04 -0800 Subject: [PATCH 16/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index c3ed45fea9e0ac2..e17c27e91fa51c6 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -158,8 +158,7 @@

          Luminance

          Once an RGB color value is converted to luminance, that luminance value can be used relative to another color to determine a contrast ratio, or used to predict a perceptual contrast. In WCAG 2.x, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3.0, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.

          -

          See also this article on luminance contrast

          +

          See also this article on luminance contrast

          . From 15800c6f96843b308b98aa35d6fe2b66931f2506 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:52:33 -0800 Subject: [PATCH 17/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index e17c27e91fa51c6..f9d7c4ceec0beb0 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -172,7 +172,7 @@

          Adaptation

          When adapting to a dark condition, it can take thirty minutes to achieve full dark adaptation. Yet a brief exposure to a bright light can throw off that night vision, taking substantial time once again to adapt. In situations where it is important to maintain dark adaptation but something needs to be illuminate (such as a map or a control) a red light is often used, as that is less likely to interfere with the rods which are sensitive between green and blue.

          -

          Light adaptation, also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.

          +

          Light adaptation is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.

          The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.

          From 34c7de09bcddd96cbb5235a5d60c183bcc9e4f49 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 00:55:44 -0800 Subject: [PATCH 18/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index f9d7c4ceec0beb0..8c26d21a49514ad 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -174,7 +174,7 @@

          Adaptation

          Light adaptation is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.

          -

          The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.

          +

          The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.

          Here is a much deeper discussion of the nature of eye adaptation.

          From 9064ac6c02b7c90e8bad21f885e6b1a684298a7a Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 01:00:22 -0800 Subject: [PATCH 19/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 8c26d21a49514ad..9ceb5c38712bdc3 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -197,7 +197,7 @@

          Hue Chroma and Saturation

        • Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (17-139).
          • -
          • For normal day viewing conditions a color exhibits approximately constant chroma for all levels of illuminance except when the brightness is very high. In the same circumstances if the luminance is increased, the chroma usually increases.
            • +
            • A color exhibits approximately constant chroma for all levels of illuminance in normal day viewing conditions (except when the brightness is very high). If the luminance is increased, the chroma usually increases in the same circumstances.
          From 8bf5847a05814524f4f055b1541c33aa9761e118 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 01:06:43 -0800 Subject: [PATCH 20/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 9ceb5c38712bdc3..289fc07ec3ba0a3 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -217,7 +217,7 @@

          Color Combinations

          • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
          • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
          • The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other.
            • -
          • In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
            • +
          • In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
      From cdd9fa5a675490c62601f4011c90304c9a59437a Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 11 Feb 2021 01:12:20 -0800 Subject: [PATCH 21/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 289fc07ec3ba0a3..c4d3fe5948cff1c 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -248,7 +248,7 @@

      Color Combinations

    • Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors.
    -

    Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.

    +

    Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.

    Normal Vision
    BG #000 TEXT #F00
    From db78b3279838eb574e29155b4f68fba516bec478 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Thu, 11 Feb 2021 04:20:02 -0800 Subject: [PATCH 22/94] Post Review Fixes Still to complete: regarding the section of color combinations, this needs further work, and the creation of the SVG elements. I'm going to tackle that next, along with additions to the section on luminance.. --- .../index.html | 274 +++++++++--------- 1 file changed, 137 insertions(+), 137 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index c4d3fe5948cff1c..16ba49932cbf3dd 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -25,7 +25,15 @@ - photic seizure - seizure disorders --- -

    Understanding luminance which is a measure of light, and color, which means hue, chroma, and saturation, is important for designing visual and readable content that is accessible to all sighted users, and especially those with reduced vision and color deficient vision, but also for accessibility by those with certain neurological, cognitive, and other impairments.

    +

    When designing visual and readable content to be accessibly to all sighted users, it is important to have an understanding of light, color, and perception. This page specifically discusses:

    +
      +
    • luminance which is a linear measure of light
      • +
    • color, which is measured as hue, chroma, and saturation
      • +
    • lightness, brightness, and contrast which are measures of perception
      • +
    • how these interrelate and interact with design elements
      • +
    + +

    While understanding these is important for design and readability for all sighted users, it is especially true for those with reduced vision and color deficient vision, and also for those with certain neurological, cognitive, and other impairments.

    The W3.org's WAI publishes freely available guidelines, maintained by the AGWG (Accessibility Guidelines Working Group). Currently these are known as the WCAG 2.1 accessibility guidelines. The next generation, WCAG 3.0, is presently published as a public working draft, pending further development and approvals.

    @@ -36,9 +44,9 @@

    Overview

    Color and how it is used is a major part of accessibility. While at first color may seem simple as it is something most sighted users experience on a daily basis, the underlying science of color perception is complex and often not intuitive.

    -

    To begin with color is not "real," and while that may sound like an odd statement for an article on color, the fact is that in the visible range of light, the light simply exists in different frequencies, or wavelengths, much like the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping groups. These three bands of light as detected by light sensitive cells known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

    +

    To begin with color is not "real," which might sound like an odd statement for an article on color. The fact is that in the visible range, light simply exists at different frequencies, or wavelengths. Consider how the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping ranges. These three bands of light are detected by light sensitive cells in the eye known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

    -

    We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively. Thus we have what are referred to as the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, uses the RGB additive color model.

    +

    We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively. Thus we have what are referred to as the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, is an example of an additive RGB color model.

    RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color perception. For instance when you see the color yellow on your monitor, the monitor is only putting out red and green light. This stimulates the L and M cones similarly to how a "yellow" wavelength of light might. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

    @@ -59,13 +67,15 @@

    Perception of Color and Contrast

    In the following image both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context-sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

    -

    An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon

    +
    An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon +
    The yellow dots in this image are identical colors coming from your monitor, but tey appear different due to context. Image D.Lyon
    +

    Our contrast sensitivity is therefore affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging, and is clearly not as simple as the distance or ratio between two colors.

    Readability Contrast

    -

    For web content, readability is one very important goal. Readability is not the same as legibility. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

    +

    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the measure where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

    But the threshold of 1% to 3% is wholly insufficient for fluent, easy reading. The minimum critical contrast level is ten times the CS JND, and 20 times the JND is considered the better target to allow for "contrast reserve." (Visual requirements for reading, S G Whittaker, J Lovie-Kitchin).

    @@ -80,52 +90,52 @@

    Spatial Frequency

    But that is the minimum for "just making out" the letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.

    -

    This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability for to zoom up text.

    +

    This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability to zoom text larger.

    Interestingly, while text that is too small is hard to read, so is text that is too big. Above approximately 96px, reading speed decreases. Also, very large fonts make it difficult for a user to enlarge the smaller text on the page, as most browsers presently zoom all text regardless.

    Text Size Guidelines

    -

    The current WCAG 2 contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

    +

    The current WCAG 2.x contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

    -

    Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast known as APCA, takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

    +

    Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as APCA, and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

    -

    Non text elements such as icons also need adaquate contrast for perceptionWCAG 2.1 technique G207

    +

    Non text elements such as icons also need adaquate contrast for perception. One description is thisWCAG 2.1 guideline.

    CSS and the sRGB Colorspace

    -

    The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace." +

    The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace."

    CSS Color Level 3 provides for several different notations:

    - 
    
-      /* by name (from a defined set of names) */
-      em { color: 'magenta'; }
+
    +/* by name (from a defined set of names) */
+div { color: 'magenta'; }
 
-      /* by HSL representation of the sRGB value */
-      em { color: hsl(300, 100%, 50%); }
-      em { color: hsla(300, 100%, 50%, 50%); }
+/* by HSL representation of the sRGB value */
+div { color: hsl(300, 100%, 50%); }
+div { color: hsla(300, 100%, 50%, 50%); }
 
-      /* by sRGB value as a percentage */
-      em { color: rgb(100%, 0%, 100%); }
-      em { color: rgba(100%, 0%, 100%, 50%); }
+/* by sRGB value as a percentage */
+div { color: rgb(100%, 0%, 100%); }
+div { color: rgba(100%, 0%, 100%, 50%); }
 
-      /* by sRGB integer values */
-      em { color: rgb(255, 0, 255); }
-      em { color: rgba(255, 0, 255, 128); }
+/* by sRGB integer values */
+div { color: rgb(255, 0, 255); }
+div { color: rgba(255, 0, 255, 128); }
 
-      /* by sRGB value in hex */
-      em { color: #f0f; }            /* #rgb, a shorthand for #rrggbb */
-      em { color: #ff00ff; }         /* #rrggbb */
-      em { color: #ff00ff80; }       /* #rrggbbaa */
-      
    
+/* by sRGB value in hex */
+div { color: #f0f; }            /* #rgb, a shorthand for #rrggbb */
+div { color: #ff00ff; }         /* #rrggbb */
+div { color: #ff00ff80; }       /* #rrggbbaa */
+
    -

    The first example is using one of the defined color names. The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Some color names have aliases, for instance, cyan and aqua are the same color, as is fuchsia and magenta, and grey and gray. There are over a hundred and forty more names that came from the SVG specification that are supported by most browsers.

    +

    The first example is using one of the defined color names. The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Some color names have aliases, for instance, cyan and aqua are the same color, as is fuchsia and magenta, and grey and gray. There are over a hundred and forty more names that came from the SVG specification that are supported by most browsers.

    The next examples show "HSL" which stands for "Hue, Saturation, Lightness". The color produced from the settings are still in the sRGB colorspace, but HSL is intended as a more convenient way to select and work with color. Because hue is adjusted as an angle, it is easy to create a user interface using a knob or circular control to adjust hue. And while in terms of real light, the range of visible wavelengths do not exist as such an angle, our perception of hue could be thought of as somewhat circular.

    @@ -133,22 +143,21 @@

    CSS Color Level 3 provides for several different notations:

    We can also set the sRGB values directly by an 8bit integer number, which means a whole number from 0 to 255. This is the number of values available in an 8bit byte, which is how numbers are often stored in a computer.

    -

    Shown below that, we can use a hex value. Hex value means "hexadecimal," where the 0-255 integer is represented by two digits that each range from 0-15. As there are no Arabic numerals above 9, we use the letters a-f to represent 10-15. We add the '#' symbol to indicate the value is hex. Thus, #ff = 255. +

    Shown after that, we can use a hex value. Hex value means "hexadecimal," where the 0-255 integer is represented by two digits that each range from 0-15. As there are no Arabic numerals above 9, we use the letters a-f to represent 10-15. We add the '#' symbol to indicate the value is hex. Thus, #ff = 255. -

    In the examples above, you'll notice that some have a fourth value which is called “alpha”: RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.

    +

    In some of the examples above, you'll notice that some have a fourth value which is called “alpha”: RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.

    sRGB the Accessible Colorspace

    -

    For accessibility guidelines the sRGB colorspace is most commonly used. This is not only because sRGB is the current default standard for the the web, but also the sRGB color primaries are well suited for accessibility concerns. For instance, the "red" sRGB primary is actually a red-orange, with a dominant wavelength of 611nm which overlaps into the M cone (green) sensitivity.

    +

    For accessibility guidelines the sRGB colorspace is most commonly used. This is not only because sRGB is the current default standard for the the web, but also the sRGB color primaries are well suited for accessibility concerns. For instance, the "red" sRGB primary is actually a red-orange, with a dominant wavelength of 611nm which overlaps into the M cone (green) sensitivity.

    -

    Thus someone with protanopia (a form of CVD) where they have no red cones will still be able to perceive the sRGB red primary, though about 35% darker. But still, both a protan and deutan form of CVD will have difficulty distinguishing between red and green.

    +

    This is helpful for some impairments related to color vision deficiency (CVD). One form of CVD called protanopia means the eye has no red cones. But protanopia will still be able to perceive the sRGB red primary because the remaining green cones will still perceive it, though about 35% darker. Nevertheless, both a protan (red deficient) and deutan (green deficient) form of CVD will have difficulty distinguishing between red and green.

    -

    However, some other display colorspaces use different primary colors. For the new ultraHD Rec2020 colorspace, the red primary has a much longer wavelength of 630nm. This greatly improves color fidelity for normal vision, but it also means that someone with protanopia will not see this red at all, or very dimly at best.

    +

    However, some other display colorspaces use different primary colors. For the new ultraHD Rec2020 colorspace, the red primary has a longer wavelength of 630nm. This greatly improves color fidelity for normal vision, but it also means that someone with protanopia will not see this red at all, or very dimly at best. The Rec2020 green primary may cause a greater reduction in luminance for deuteranopia (green deficient vision).

    While some standards in development such as CSS Color Module Level 4 are adding additional colorspaces, sRGB will remain the default colorspace, and the preferred colorspace for accessibility for the foreseeable future.

    -

    Light and Luminance

    @@ -161,7 +170,6 @@

    Luminance

    See also this article on luminance contrast

    . -

    Adaptation

    The human vision system normally has a remarkably wide range of vision, from bright daylight down to a dark moonless night where the eye is so sensitive, one study found a mere 54 photons of light are enough to perceive "something". These researchers estimated under ideal dark conditions the eye could see a candle flame flicker at 30 miles away.

    @@ -174,8 +182,9 @@

    Adaptation

    Light adaptation is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.

    -

    The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.

    +

    The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.

    +

    Other Adaptations: we also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast causing a low contrast item to seem even lower in contrast. We will adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.

    Here is a much deeper discussion of the nature of eye adaptation.

    @@ -203,112 +212,105 @@

    Hue Chroma and Saturation

    Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."

    -0 to 100 Chroma Ramps +0 to 100 Chroma Ramps, an example of high chroma vs no chroma -

    A a good resource with many more detailed examples is at the Munsell color site.

    +

    A good resource with many more detailed examples is at the Munsell color site.

    Color Combinations

    -
      -
    • Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments.
      • -
      • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
        • -
      • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
        • -
      • Pure blues should typically be the darkest of two colors
        • -
        • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
          • -
        • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
          • -
        • The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other.
          • -
        • In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
          • -
        -
      -
    - -
    Normal Vision
    -
    BG #F00 TEXT #00D
    -
    BG #E0D TEXT #00D
    -
      -
    • Reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer.
      • -
    • However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia sees the above examples as:
      • -
    - -
    Protanopic Vision
    -
    BG #F00 TEXT #00D
    -
    BG #E0D TEXT #00D
    -
      -
    • Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast, which improves readability for everyone.
      • -
    - -
    Normal Vision
    -
    BG #F70 TEXT #00D
    -
    BG #D89 TEXT #00D
    -
    Protanopic Vision
    -
    BG #F70 TEXT #00D
    -
    BG #D89 TEXT #00D
    - -
      -
    • Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors.
      • -
    - -

    Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.

    - -
    Normal Vision -
    BG #000 TEXT #F00
    -
    -
    Protanopic Vision -
    BG #000 TEXT #F00
    -
    - + +

    The context of contrast

    Like color, contrast is not "real," it is a perception. It takes the first 20 years of our life to develop peak contrast sensitivity. Age and many forms of health issues — even medicine you may be prescribed — can affect your contrast perception.

    In the following image both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context-sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

    An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon -
    The yellow dots in this image are identical colors coming from your monitor, but tey appear different due to context. Image D.Lyon
    +
    The yellow dots in this image are identical colors coming from your monitor, but they appear different due to context. Image D.Lyon
    -

    Our contrast sensitivity is therefore affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging, and is clearly not as simple as the distance or ratio between two colors.

    +

    Our contrast, lightness, and color perception is affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging. It is clearly not as simple as the distance or ratio between two colors.

    Readability Contrast

    -

    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the measure where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

    +

    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the point where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

    -

    But the threshold of 1% to 3% is wholly insufficient for fluent, easy reading. The minimum critical contrast level is ten times the CS JND, and 20 times the JND is considered the better target to allow for "contrast reserve." (Visual requirements for reading, S G Whittaker, J Lovie-Kitchin).

    +

    But the threshold of 1% to 3% is wholly insufficient for fluent, easy reading. The minimum critical contrast level is ten times the CS JND, and 20 times the JND is considered the better target to allow for "contrast reserve." (Visual requirements for reading, S G Whittaker, J Lovie-Kitchin).

    Spatial Frequency

    @@ -86,32 +101,31 @@

    Spatial Frequency

    In a typical eye exam for acuity (ability to focus), legibility at a particular level means getting three out of five letters correct. This is wholly insufficient for fluent, easy reading.

    -

    "Normal" print is usually considered 11.5pt to 12pt, this is equivalent of 16px on screen. And this is for normal vision. To relate this to real world visual acuity, if you think of an eye doctor's chart, and focusing on a capital E. If that E is at the legibility or acuity limit for 20/20 vision, and that is at full contrast, it is equivalent to a Helvetica capital E that is 3.9px on screen, meaning a 5.5px CSS font-size. (In print, this is a 4pt font on coated paper).

    +

    "Normal" print is usually considered 11.5pt to 12pt, this is equivalent of 16px on screen. And this is for normal vision. To relate this to real world visual acuity, if you think of an eye doctor's chart, and focusing on a capital E. If that E is at the legibility or acuity limit for 20/20 vision, and that is at full contrast, it is equivalent to a Helvetica capital E that is 3.9px on screen, meaning a 5.5px CSS font-size. (In print, this is a 4pt font on coated paper).

    But that is the minimum for "just making out" the letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.

    This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability to zoom text larger.

    -

    Interestingly, while text that is too small is hard to read, so is text that is too big. Above approximately 96px, reading speed decreases. Also, very large fonts make it difficult for a user to enlarge the smaller text on the page, as most browsers presently zoom all text regardless.

    +

    While text that is too small is hard to read, so is text that is too big. Above approximately 96px, reading speed decreases. Also, very large fonts make it difficult for a user to enlarge the smaller text on the page, as most browsers presently zoom all text regardless.

    Text Size Guidelines

    The current WCAG 2.x contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

    -

    Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as APCA, and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

    +

    Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as APCA, and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

    Non text elements such as icons also need adaquate contrast for perception. One description is thisWCAG 2.1 guideline.

    - - -

    CSS and the sRGB Colorspace

    +

    CSS and the sRGB Colorspace

    The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace." -

    CSS Color Level 3 provides for several different notations:

    +

    CSS Color Level 3 notations:

    +

    These are examples of the CSS notations used to define a color. Here the example color for each is magenta

     /* by name (from a defined set of names) */
 div { color: 'magenta'; }
@@ -145,16 +159,16 @@ 
    CSS Color Level 3 provides for several different notations:
    
 
 
    Shown after that, we can use a hex value. Hex value means "hexadecimal," where the 0-255 integer is represented by two digits that each range from 0-15. As there are no Arabic numerals above 9, we use the letters a-f to represent 10-15. We add the '#' symbol to indicate the value is hex. Thus, #ff = 255.
 
-
    In some of the examples above, you'll notice that some have a fourth value which is called “alpha”: RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.
    
+
    In some of the examples above, you'll notice that some have a fourth value which is called “alpha”, the A in RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.
    
 
 
-
    sRGB the Accessible Colorspace 
    
+
    sRGB: the accessible colorspace 
    
 
 
    For accessibility guidelines the sRGB colorspace is most commonly used. This is not only because sRGB is the current default standard for the the web, but also the sRGB color primaries are well suited for accessibility concerns. For instance, the "red" sRGB primary is actually a red-orange, with a dominant wavelength of 611nm which overlaps into the M cone (green) sensitivity.
    
 
-
    This is helpful for some impairments related to color vision deficiency (CVD). One form of CVD called protanopia means the eye has no red cones. But protanopia will still be able to perceive the sRGB red primary because the remaining green cones will still perceive it, though about 35% darker. Nevertheless, both a protan (red deficient) and deutan (green deficient) form of CVD will have difficulty distinguishing between red and green.
    
+
    This is helpful for some impairments related to color vision deficiency (CVD). One form of CVD called protanopia means the eye has no red cones. But protanopia will still be able to perceive the sRGB red primary because the remaining green cones perceive it, though about 35% darker than normal vision. Nevertheless, both a protan (red deficient) and deutan (green deficient) type of CVD  have difficulty distinguishing between red and green.
    
 
-
    However, some other display colorspaces use different primary colors. For the new ultraHD Rec2020 colorspace, the red primary has a longer wavelength of 630nm. This greatly improves color fidelity for normal vision, but it also means that someone with protanopia will not see this red at all, or very dimly at best. The Rec2020 green primary may cause a greater reduction in luminance for deuteranopia (green deficient vision).
    
+
    Some other display colorspaces use different primary colors. For the new ultraHD Rec2020 colorspace, the red primary has a longer wavelength of 630nm. This greatly improves color fidelity for normal vision, but it also means that someone with protanopia will not see this red at all, or very dimly at best. The Rec2020 green primary may cause a greater reduction in luminance for deuteranopia (green deficient vision).
    
 
 
    While some standards in development such as CSS Color Module Level 4 are adding additional colorspaces, sRGB will remain the default colorspace, and the preferred colorspace for accessibility for the foreseeable future.
    
 
@@ -162,9 +176,6 @@ 
    sRGB the Accessible Colorspace 
    
 
 
    Light and Luminance
    
 
-
-
    Luminance
    
-
 
    Luminance is a linear measure of light, which is spectrally weighted for human vision, but not perceptually weighted in terms of lightness to darkness. The spectral weighting takes into account the different sensitivity of the L, M, S cones. By far our eye is tuned to green, which makes up the majority of luminance. Relative to sRGB, green is 71% of the total luminance measure. Red is second at 21%, and blue is a distant third making up a mere 7% of luminance. This is based on a narrow 2° of our central vision.
    
 
 
    Once an RGB color value is converted to luminance, that luminance value can be used relative to another color to determine a contrast ratio, or used to predict a perceptual contrast. In WCAG 2.x, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3.0, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.
    
@@ -178,22 +189,26 @@ 
    Adaptation
    
 
 
    This incredibly wide range is possible due to a mechanism known as light and dark adaptation, where the eye adjusts to the current overall light level.
    
 
-
    Dark adaptation, also known as scotopic or "night vision." Here the eye is adapted to a very dark level. Instead of the "color" sensitive cones, another type of cell called rods becomes active. Rods are sensitive to very low light levels and don't sense color. Despite being very sensitive to light, with night vision the resolution is very poor, and details can be hard to see.
    
+
    Dark adaptation
    
+
    Also known as scotopic or "night vision." Here the eye is adapted to a very dark level. Instead of the "color" sensitive cones, another type of cell called rods becomes active. Rods are sensitive to very low light levels and don't sense color. Despite being very sensitive to light, with night vision the resolution is very poor, and details can be hard to see.
    
 
 
    When adapting to a dark condition, it can take thirty minutes to achieve full dark adaptation. Yet a brief exposure to a bright light can throw off that night vision, taking substantial time once again to adapt. In situations where it is important to maintain dark adaptation but something needs to be illuminate (such as a map or a control) a red light is often used, as that is less likely to interfere with the rods which are sensitive between green and blue.
    
 
-
    Light adaptation is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.
    
+
    Light adaptation
    
+
    This is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.
    
 
-
    The twilight zone: there is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.
    
+
    The twilight zone
    
+
    There is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.
    
 
-
    Other Adaptations: we also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast causing a low contrast item to seem even lower in contrast. We will adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.
    
+
    Other adaptations
    
+
    We also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast causing a low contrast item to seem even lower in contrast. We will adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.
    
 
 
    Here is a much deeper discussion of the nature of eye adaptation.
    
 
 
 
    Hue Chroma and Saturation
    
 
-
    The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information. When searching they use the UK spelling of "colour."
    
+
    The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information. TIP: when searching use the UK spelling of "colour."
    
 
 
      
   
    • Colourfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (17-233).
      • 
@@ -227,7 +242,7 @@ 
      Color Combinations
      
 
 
      • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
      
 
-
      Working with Blue
      
+
      Working with Blue
      
 
      • Pure blues should typically be the darkest of two colors
      
 
 
      • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
      
@@ -250,7 +265,7 @@ 
      Working with Blue
      
 
 
      Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors.
      
 
-
      Working with Red
      
+
      Working with Red
      
 
      Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.
      
 
 pure red on black, and how someone with protanopia sees it, which is reduced to being illegible.
@@ -259,13 +274,18 @@ 
      Working with Red
      
 
 the previous example, but adding a small amount of green to increase the luminance contrast of the text against black.
 
-There are color vision simulators, that allow you to process a screenshot of your design to demonstrate how your design might look to someone with a color vision deficiency.
+
      There are color vision simulators, that allow you to process a screenshot of your design to demonstrate how your design might look to someone with a color vision deficiency.
      
 
 
-
      Psychophysical Aspects of Color
      
+
+
+
      Psychophysical aspects of color
      
 
 
      Color as in hues and saturation can affect our mood, and enhance — or de-enhance — our interactive experiences.
      
 
+
      Examples of color's effect beyond vision
      
+
+
 
      Color can be culturally dependent
      
 
      A Cross-Cultural Study of the Affective Meanings of Color
      
 
@@ -291,7 +311,7 @@ 
      Red Environment
      
 
      Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according to this study.
      
 
 
-
      Flashing and Seizures
      
+
      Flashing and Seizures
      
 
      Flashing at rates higher than 3 per second over a screen area greater than about 300px square has been shown to induce photic seizures in some people, most likely in children and adolescents. It has also been found that certain very regular, high contrast patterns such as parallel white and black stripes, can also induce seizures. Some studies have indicated that very deep saturated red (with wavelengths of 660nm-700nm+) may exacerbate the problem, if these deep reds flash between a saturated and unsaturated state, no matter the luminance.
      
 
 
      DEEP DIVE: The Epilepsy Foundation of America researched photic- related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review
      
@@ -312,11 +332,16 @@ 
      Flashing and Seizures
      
 
 
      The consensus recommendations are in this brief paper, Photic- and Pattern-induced Seizures: Expert Consensus of the Epilepsy Foundation of America 
      
 
-
 
      And some additional insights are available in this UK paper covering guidelines for preventing seizures..
      
 
 
      
 
+
      Modeling Light Color and Vision
      
+
+
      To help us in our work, be it content design or determining accessibility, or calibrating a monitor, we need a way to model and predict the behavior and perception of light and color. These models are built with basic math, and are specific to the given task. A colorimetric model is one that is involved in measuring light, an appearance model is designed to predict how we will perceive the light as measured.
      
+
+
+
 
      Calculating Relative Luminance
      
 
 
      The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:
      
@@ -341,8 +366,9 @@ 
      STEP TWO (Linearize)
      
 		}
 	}
    +

    IMPORTANT NOTE

    -

    Those familiar with the WCAG 2.x contrast math may notice that the above code uses the threshold value of 0.04045. This is from the official IEC standard. The WCAG 2.x guidelines were drafted citing an obsolete value. While the WCAG 2.x version is incorrect, with 8-bit color there is no functional difference. For the record, the WCAG 2.x value is 0.03928

    +

    Those familiar with the WCAG 2.x contrast math may notice that the above code uses the threshold value of 0.04045. This is the official IEC standard. The WCAG 2.x guidelines were drafted citing an obsolete value. While the WCAG 2.x version is technically incorrect, with 8-bit color there is no functional difference for the purpose of WCAG 2.x contrast. For the record, the WCAG 2.x value is 0.03928

    STEP THREE (Spectrally Weighted Luminance)

    @@ -352,8 +378,8 @@

    STEP THREE (Spectrally Weighted Luminance)

    Multiply each linearized color channel by their coefficient and sum them all together to find L, Luminance.

    - -

    STEP TWO ALT (Linearize, Simple Alternate Version)

    +
    +

    STEP TWO ALTERNATE (Linearize, simple alternate)

    Use this version instead of the piecewise version above if you are less concerned with accuracy and more concerned with performance.

    @@ -368,15 +394,15 @@

    Math and Methods

    Within the W3 AGWG there is active discussion and investigation regarding the WCAG 2.x contrast method, math, and future proposals. The main discussion thread is on GitHub as W3C/WCAG issue #695.

      -
    • WCAG 2.x Contrast Checkerat WebAim.org. This popular and easy to use contrast check is for the WCAG 2.x guidelines 1.4.3 and 1.4.6
      • -
    • APCA Contrast CalculatorThe new method for assessing contrast and more.
      • -
    • brucelindbloom.com Bruce Lindbloom's site on colorspaces and the related math and transformation. It includes a very helpful calculator that converters between many color models, including the key CIE models.
      • +
    • WCAG 2.x Contrast Checkerat WebAim.org. This popular and easy to use contrast check is for the WCAG 2.x guidelines 1.4.3 and 1.4.6
      • +
    • APCA Contrast CalculatorThe new method for assessing contrast and more.
      • +
    • brucelindbloom.com Bruce Lindbloom's site on colorspaces and the related math and transformations. It includes a very helpful calculator that converters between many color models, including the key CIE models.

    Additional Resources

    -

    MDN

    +

    MDN

    -

    W3C Issues and Discussions

    +

    W3C Issues and Discussions

    W3C Standards and Guidelines

    From e9d6941c3e8d8968d165c84961fb0b7488287587 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Sat, 13 Feb 2021 02:52:17 -0800 Subject: [PATCH 25/94] Adds & clarifications Fleshed out the luminance section, and also added and clarified other areas, fixed a code area for proper highlighting, assitional removal of nexted lists, moving to h4 etc. --- .../index.html | 95 ++++++++++++------- 1 file changed, 63 insertions(+), 32 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 717a8e171c9e979..1121f85d3db8a6d 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -176,11 +176,36 @@

    sRGB: the accessible colorspace

    Light and Luminance

    -

    Luminance is a linear measure of light, which is spectrally weighted for human vision, but not perceptually weighted in terms of lightness to darkness. The spectral weighting takes into account the different sensitivity of the L, M, S cones. By far our eye is tuned to green, which makes up the majority of luminance. Relative to sRGB, green is 71% of the total luminance measure. Red is second at 21%, and blue is a distant third making up a mere 7% of luminance. This is based on a narrow 2° of our central vision.

    -

    Once an RGB color value is converted to luminance, that luminance value can be used relative to another color to determine a contrast ratio, or used to predict a perceptual contrast. In WCAG 2.x, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3.0, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.

    +

    Luminance is a linear measure of light, which is spectrally weighted for human vision, but not perceptually weighted in terms of lightness to darkness. It is symbolized by Y for relative luminance, or L cd/m² for absolute. We will use Y for most of our discussions. The spectral weighting takes into account the different sensitivity of the L, M, S cones (sometimes thought of as the red, green, blue sensitive cells in the eye).

    + +

    By far our eye is tuned to green, which makes up the majority of luminance. Relative to the total sRGB white (#fff), green is 71% of the total luminance measure. Red is second at 21%, and blue is a distant third as a mere 7% of luminance.

    + +

    Deeper dive into spectral sensitivity

    + +

    The relative density of the three cone cell types is 63% L cones, 31% M cones, and 6% S cones, and is quite variable for each individual. Now if we look at these numbers for a moment, we might be puzzled as to why the majority of cones are the longwave, L type, yet the "red" in an sRGB monitor makes up only 21% of luminance.

    + +

    This is because the peak sensitivity of the L cone is actually a green/yellow, and the L cone response almost entirely overlaps the M cone response. The reason we often refer to the L cone as the "red" cone is that it responds more to long wave red light than the M cone. It is this differential between M and L cones that results in the sensation of red.

    + +

    At 611nm, the red primary in an sRGB monitor is spectrally distant from the L cone's peak sensitivity at 565nm. But the sRGB green primary is 549nm, in between the L cont peak and the M cone's peak at 540nm. This explains why the green primary makes up such a large portion of total luminance on a monitor.

    + +

    For a really deep dive into the nuances of spectral response, luminance, and color perception, see this excellent article at Handprint.com

    + + +

    The value of luminance values

    + +

    Once an sRGB color value is converted to the linear light value of luminance (Y), that luminance value can be used relative to another color's luminance to determine a contrast ratio, or used to predict a perceptual contrast. This is an important part of determining the readability of text on the page.

    + +

    In WCAG 2.x, the contrast math is not perceptually uniform, so it does not predict the contrast appearance over the full range of light to dark. For WCAG 3.0, a new method known as the Advanced Perceptual Contrast Algorithm provides a numeric contrast value that is relative to perception.

    + +

    See also this article on luminance contrast which discusses various math methods relating to luminance and contrast

    . + +

    Perceptual lightness

    + +

    While luminance is a linear measure of light, as light exists in the real world, it does not predict our perception of light. When we say light is linear, we don't mean that it travels in a straight line, we mean as an additive quantity. If we have 100 photons of light and triple it, we then have 300 photons of light. But in that example, we don't perceive a tripling. The human visual system sees a relatively modest increase, because our perception of light is non-linear.

    + +

    A simple way to describe this is that our perception roughly follows a power curve with an exponent of ~0.425, so perceptual lightness is approximately L* = Y0.425, though this depends on adaptation.

    -

    See also this article on luminance contrast

    .

    Adaptation

    @@ -206,26 +231,25 @@

    Other adaptations

    Here is a much deeper discussion of the nature of eye adaptation.

    +

    Hue Chroma and Saturation

    -

    The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information. TIP: when searching use the UK spelling of "colour."

    +

    Where luminance is a measure of light, and L* (Lstar) is a measure of our perception of lightness, hue, chroma, saturation refer to our perception of the color of that light.

    -
      -
    • Colourfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (17-233).
      • +

      Color terms

      -
      • For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.
        • -
      +

      The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information.

      -
    • Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (17-1136).
      • +

      TIP: when searching the CIE glossary use the UK spelling of "colour."

      -
      • For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high.
        • -
      +

      Colourfulness

      +

      Colorfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (CIE 17-233). For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.

      -
    • Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (17-139).
      • +

      Saturation

      +

      Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (CIE 17-1136). For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high.

      -
      • A color exhibits approximately constant chroma for all levels of illuminance in normal day viewing conditions (except when the brightness is very high). If the luminance is increased, the chroma usually increases in the same circumstances.
        • -
      -
    +

    Chroma

    +

    Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (CIE 17-139). A color exhibits approximately constant chroma for all levels of illuminance in normal day viewing conditions (except when the brightness is very high). If the luminance is increased, the chroma usually increases in the same circumstances.

    Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."

    @@ -236,7 +260,7 @@

    Hue Chroma and Saturation

    Color Combinations

    -

    Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. Pure blue and red is one such example, shown below. But in addition, some impairments are deficient and can not differentiate all colors. And some colors, such as pure blue, as so low in luminance they must be the darkest of two colors. Blue is also very low in resolution as there are far fewer blue cones, and they are scattered in our peripheral vision, and not present in our central vision. This leads up to some guidelines:

    +

    Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. Pure blue and red is one such example, shown below. But in addition, some impairments are deficient and can not differentiate all colors. And some colors, such as pure blue, are so low in luminance they need to be the darkest of two colors. Blue is also very low in resolution as there are far fewer blue cones, and they are scattered in our peripheral vision, and not present in our central vision. This leads to some color use guidelines:

    • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.

    @@ -283,9 +307,11 @@

    Psychophysical aspects of color

    Color as in hues and saturation can affect our mood, and enhance — or de-enhance — our interactive experiences.

    -

    Examples of color's effect beyond vision

    + +

    Examples of color's effect beyond vision

    +

    Color can be culturally dependent

    A Cross-Cultural Study of the Affective Meanings of Color

    @@ -355,16 +381,21 @@

    STEP ONE (8 bit integer to float)

    If your sRGB values are 16 bit then convert to decimal by dividing by 65535.

    STEP TWO (Linearize)

    +

    Linearize the data to remove the encoded transfer curve.

    + +

       Rlin = sRGBtoLin(R´float)    Glin = sRGBtoLin(G´float)    Blin = sRGBtoLin(B´float)

    + +

    Using the function shown below:

    -
    function sRGBtoLin(colorChannel) {
-		// Send this function a decimal sRGB gamma encoded color channel
-		// between 0.0 and 1.0, and it returns a linearized value.
-		if ( colorChannel <= 0.04045 ) {
-			return colorChannel / 12.92;
-		} else {
-			return Math.pow((( colorChannel + 0.055)/1.055),2.4);
-		}
-	}
    +
    function sRGBtoLin(colorChannel) {
+		  // Send this function a decimal sRGB gamma encoded color channel
+		  // between 0.0 and 1.0, and it returns a linearized value.
+		if ( colorChannel <= 0.04045 ) {
+			return colorChannel / 12.92;
+		} else {
+			return Math.pow((( colorChannel + 0.055)/1.055),2.4);
+		}
+	}

    IMPORTANT NOTE

    @@ -374,18 +405,18 @@

    STEP THREE (Spectrally Weighted Luminance)

    The normal human eye has three types of cones that are sensitive to red, green, and blue light. But our spectral sensitivity is not uniform, as we are most sensitive to green (555 nm), and blue is a distant last place. Luminance is spectrally weighted to reflect this using the following coefficients for sRGB:

    -

       Rlin * 0.2126 + Glin * 0.7152 + Blin * 0.0722 = Y

    +

       Y = Rlin * 0.2126 + Glin * 0.7152 + Blin * 0.0722

    -

    Multiply each linearized color channel by their coefficient and sum them all together to find L, Luminance.

    +

    Multiply each linearized color channel by their coefficient and sum them all together to find Y, Luminance.

    -

    STEP TWO ALTERNATE (Linearize, simple alternate)

    +

    ALTERNATE (sRGB to Y, simple)

    Use this version instead of the piecewise version above if you are less concerned with accuracy and more concerned with performance.

    Raise each color channel to the power of 2.2, the same as an sRGB display. This is fine for most applications. But if you need to make multiple round trips into and out of sRGB encoded space, then use the more accurate version above.

    -

       R´2.2 = Rlin    G´2.2 = Glin    B´2.2 = Blin

    +

    Y = 0.2126 * (R´/255.0)2.2 + 0.7152 * (G´/255.0)2.2 + 0.0722 * (B´/255.0)2.2

    @@ -414,9 +445,9 @@

    MDN

    W3C Issues and Discussions

    From 4e2da47592bb4d17eec5bd47a861dcaf835a77cd Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Sat, 13 Feb 2021 14:15:20 -0800 Subject: [PATCH 26/94] Added color refs and info added some links to references and additional color (hue) related info --- .../understanding_colors_and_luminance/index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 1121f85d3db8a6d..3040a7deda8582f 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -236,6 +236,12 @@

    Hue Chroma and Saturation

    Where luminance is a measure of light, and L* (Lstar) is a measure of our perception of lightness, hue, chroma, saturation refer to our perception of the color of that light.

    +

    Used properly, color can help to organize information, aide navigation, and add distinction for elements such as indicating focus or activity states.

    + +

    Color theory

    +

    A complete color theory and color design guide is beyond the scope of this document, but many classical design guidelines apply to web based content as they have to print for centuries. One classic resource is Johannes Itten's "The Art of Color", and the trimmed-down version "Elements of Color" can be read online at various archive libraries.

    + +

    Color terms

    The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information.

    @@ -301,6 +307,7 @@

    Working with Red

    There are color vision simulators, that allow you to process a screenshot of your design to demonstrate how your design might look to someone with a color vision deficiency.

    +

    An excellent guide regarding designing with color for accessibility is Maureen Stone's Guidelines for Using Color a free download published by NIST.

    Psychophysical aspects of color

    @@ -308,8 +315,6 @@

    Psychophysical aspects of color

    Color as in hues and saturation can affect our mood, and enhance — or de-enhance — our interactive experiences.

    - -

    Examples of color's effect beyond vision

    Color can be culturally dependent

    From dd97a8007a3fd4c4a2ddd45341834d70a091d064 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Sun, 14 Feb 2021 19:15:36 -0800 Subject: [PATCH 27/94] Small updates to intro fixed some awkwardness and clarity of some opening statements --- .../understanding_colors_and_luminance/index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 3040a7deda8582f..68f17866e78cc08 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -28,7 +28,7 @@

    Introduction to Color and Accessibility

    -

    When designing visual and readable content to be accessible to all sighted users, it is important to have an understanding of light, color, and perception. This page specifically discusses:

    +

    When designing visual and readable content with the aim of accessibility for all sighted users, it is important to have an understanding of light, color, and perception. This page specifically discusses:

    • luminance which is a linear measure of light
      • @@ -37,7 +37,7 @@

      Introduction to Color and Acces
    • how these interrelate and interact with design elements

    -

    While understanding these is important for design and readability for all sighted users, it is especially true for those with reduced vision and color deficient vision, and also for those with certain neurological, cognitive, and other impairments.

    +

    While understanding these concepts are important for design and readability for all sighted users, they are especially important for those with reduced vision and color deficient vision, and also for those with certain neurological, cognitive, and other impairments.

    Standards and Guidelines

    @@ -55,7 +55,8 @@

    Color basics

    We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively, the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, is an example of an additive RGB color model.

    RGB additive model

    -

    RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color perception. For instance when you see the color yellow on your monitor, the monitor is still only putting out red and green light. This stimulates the L and M cones similarly to how a "yellow" wavelength of light might. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

    +

    RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color sensation. For instance when you see the color yellow on your monitor, the monitor is still only emitting red and green light. The separate red and green stimulate the L and M cones similarly to how a "yellow" wavelength of light might, as yellow is "in between" red and green. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

    +
    An image of a block of red and of green, with a plus, over a bar of yellow with an equals sign From 967c374553ceac2e056ee3bd8f717c6080d07b2e Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 08:51:36 -0800 Subject: [PATCH 28/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 68f17866e78cc08..96b79679d0067f1 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -45,7 +45,6 @@

    Standards and Guidelines

    The WCAG 2.x guidelines attempt to define adequateluminance contrast for sighted users with deficient color vision (inaccurately called "color blindness") or reduced vision, and further WCAG 2.x guidelines are intended to prevent seizures and other physical reactions in people with vestibular or neurological disorders.

    -

    Color basics

    Color and how it is used is a major part of accessibility. While at first color may seem simple as it is something most sighted users experience on a daily basis, the underlying science of color perception is complex and often not intuitive.

    From fce4b7793dcbc50bd8294f8f5648377896c614d5 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 08:53:15 -0800 Subject: [PATCH 29/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 96b79679d0067f1..a9554f18838a196 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -49,7 +49,7 @@

    Color basics

    Color and how it is used is a major part of accessibility. While at first color may seem simple as it is something most sighted users experience on a daily basis, the underlying science of color perception is complex and often not intuitive.

    -

    To begin with color is not "real," which might sound like an odd statement for an article on color. The fact is that in the visible range, light simply exists at different frequencies, or wavelengths. Consider how the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping ranges. These three bands of light are detected by light sensitive cells in the eye known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

    +

    To begin with, color is not "real," which might sound like an odd statement for an article on color. The fact is that in the visible range, light simply exists at different frequencies, or wavelengths. Consider how the keys on a piano create sounds at different frequencies. But while our ear and aural perception may "hear" sound as a range of notes, the normal human eye divides the visible light into three overlapping ranges. These three bands of light are detected by light sensitive cells in the eye known as cones, and the three cone types are called L, M, or S for long, medium, and short wavelengths.

    We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively, the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, is an example of an additive RGB color model.

    From 827bef63799c73e5b4ac00caed3ea38416b71e0b Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 08:56:06 -0800 Subject: [PATCH 30/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index a9554f18838a196..d3ef60de81e6599 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -58,7 +58,7 @@

    RGB additive model

    - An image of a block of red and of green, with a plus, over a bar of yellow with an equals sign + An image of a block of red and of green, with a plus, over a bar of yellow with an equals sign.
    The monitor is only emitting the red and green light shown on top to create the yellow bar underneath.
    From a22b4d9e3a4c36f522a3d39890afeae7d3dfbfcf Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 08:57:21 -0800 Subject: [PATCH 31/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index d3ef60de81e6599..32ad493c73f42bb 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -59,7 +59,7 @@

    RGB additive model

    An image of a block of red and of green, with a plus, over a bar of yellow with an equals sign. -
    The monitor is only emitting the red and green light shown on top to create the yellow bar underneath.
    +
    The monitor is only emitting the red and green light shown on top to create the yellow bar underneath.

    CMYK subtractive model

    From 0dab5f2f8520dc2badb0fd1e4a9dadfb710057ad Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 08:58:29 -0800 Subject: [PATCH 32/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 32ad493c73f42bb..9191030bb9b1ecc 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -63,6 +63,7 @@

    RGB additive model

    CMYK subtractive model

    +

    CMYK is another form of color model, known as a subtractive model. Here, the cyan, magenta, yellow, black inks remove certain wavelengths of light, reflecting back only the narrow range each is associated with. In this article we will be focusing on displayed web content, and so we discuss mainly the RGB color model.

    For a deeper dive into how the eye and vision system functions, Perception of Color and Contrast

    The first thing to understand about our perception of color, light, and contrast is that:

    +
    • It is not absolute,
    • that it is a context-sensitive perception,
      • From 057e24f4142b3f9d9353dc0c5aef42923ad74bc8 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 08:59:39 -0800 Subject: [PATCH 34/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 0b0b8f74d776a3c..58bd201f09ef8b6 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -79,7 +79,8 @@

      Perception of Color and Contrast

    • and that perception is mostly neurological in nature.
    -

    The context of contrast

    +

    The context of contrast

    +

    Like color, contrast is not "real," it is a perception. It takes the first 20 years of our life to develop peak contrast sensitivity. Age and many forms of health issues — even medicine you may be prescribed — can affect your contrast perception.

    In the following image both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context-sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

    From f38a3274d676ca09865e97870ef28f4f181f44d9 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:01:11 -0800 Subject: [PATCH 35/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 58bd201f09ef8b6..33d232e75845868 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -53,7 +53,8 @@

    Color basics

    We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively, the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, is an example of an additive RGB color model.

    -

    RGB additive model

    +

    RGB additive model

    +

    RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color sensation. For instance when you see the color yellow on your monitor, the monitor is still only emitting red and green light. The separate red and green stimulate the L and M cones similarly to how a "yellow" wavelength of light might, as yellow is "in between" red and green. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

    From ad56d19a47a6a3f598325614ef457274be0f7bde Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:02:22 -0800 Subject: [PATCH 36/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 33d232e75845868..ad69076b607f08a 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -86,7 +86,8 @@

    The context of contrast

    In the following image both of the yellow dots, and the grey of the square they are on, are identical in terms of the sRGB color value that is being displayed on your monitor. It is your context-sensitive perception of these colors that makes them appear so different, as your brain's image processing adjusts the perception based on what it thinks is in shadow or not.

    -
    An image of a checkerboard, where identical colors look different if they are in shadow - image D.Lyon +
    + An image of a checkerboard, where identical colors look different if they are in shadow.
    The yellow dots in this image are identical colors coming from your monitor, but they appear different due to context. Image D.Lyon
    From 887c8a3554ca6fd261f7dd30915c11f63751f738 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:02:42 -0800 Subject: [PATCH 37/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index ad69076b607f08a..41c1ae891b7cc22 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -88,7 +88,7 @@

    The context of contrast

    An image of a checkerboard, where identical colors look different if they are in shadow. -
    The yellow dots in this image are identical colors coming from your monitor, but they appear different due to context. Image D.Lyon
    +
    The yellow dots in this image are identical colors coming from your monitor, but they appear different due to context. Image D.Lyon

    Our contrast, lightness, and color perception is affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging. It is clearly not as simple as the distance or ratio between two colors.

    From 8a1745cdc18260f0b71c7dd5cda18f143fd8add4 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:05:26 -0800 Subject: [PATCH 38/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 41c1ae891b7cc22..8b988f7900d2e48 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -106,7 +106,7 @@

    Spatial Frequency

    In a typical eye exam for acuity (ability to focus), legibility at a particular level means getting three out of five letters correct. This is wholly insufficient for fluent, easy reading.

    -

    "Normal" print is usually considered 11.5pt to 12pt, this is equivalent of 16px on screen. And this is for normal vision. To relate this to real world visual acuity, if you think of an eye doctor's chart, and focusing on a capital E. If that E is at the legibility or acuity limit for 20/20 vision, and that is at full contrast, it is equivalent to a Helvetica capital E that is 3.9px on screen, meaning a 5.5px CSS font-size. (In print, this is a 4pt font on coated paper).

    +

    "Normal" print is usually considered 11.5pt to 12pt, this is equivalent of 16px on screen. And this is for normal vision. To relate this to real world visual acuity, if you think of an eye doctor's chart, and focusing on a capital E. If that E is at the legibility or acuity limit for 20/20 vision, and that is at full contrast, it is equivalent to a Helvetica capital E that is 3.9px on screen, meaning a 5.5px CSS font-size. (In print, this is a 4pt font on coated paper).

    But that is the minimum for "just making out" the letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.

    From ab4389f2adfaaf5999c2c032e59a6065a23be5ff Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:05:56 -0800 Subject: [PATCH 39/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 8b988f7900d2e48..cced80863ea529d 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -57,7 +57,6 @@

    RGB additive model

    RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color sensation. For instance when you see the color yellow on your monitor, the monitor is still only emitting red and green light. The separate red and green stimulate the L and M cones similarly to how a "yellow" wavelength of light might, as yellow is "in between" red and green. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.

    -
    An image of a block of red and of green, with a plus, over a bar of yellow with an equals sign.
    The monitor is only emitting the red and green light shown on top to create the yellow bar underneath.
    From 7e7a5494aabf9a3650e92acb1779aa08f9510e06 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:06:24 -0800 Subject: [PATCH 40/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index cced80863ea529d..defa0d161a0e7e9 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -94,7 +94,7 @@

    The context of contrast

    Readability Contrast

    -

    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the point where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

    +

    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the point where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.

    But the threshold of 1% to 3% is wholly insufficient for fluent, easy reading. The minimum critical contrast level is ten times the CS JND, and 20 times the JND is considered the better target to allow for "contrast reserve." (Visual requirements for reading, S G Whittaker, J Lovie-Kitchin).

    From 0936abe6b2a62dd7439ed2a3550bd26bfcc2d731 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:11:09 -0800 Subject: [PATCH 41/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index defa0d161a0e7e9..3c3fcdb0be84259 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -109,7 +109,7 @@

    Spatial Frequency

    But that is the minimum for "just making out" the letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.

    -

    This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability to zoom text larger.

    +

    This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability to zoom text larger.

    While text that is too small is hard to read, so is text that is too big. Above approximately 96px, reading speed decreases. Also, very large fonts make it difficult for a user to enlarge the smaller text on the page, as most browsers presently zoom all text regardless.

    From 303454693345ea54ab5823c23d5591def447ee02 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:11:30 -0800 Subject: [PATCH 42/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 3c3fcdb0be84259..739f0ef698ce9bb 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -435,7 +435,7 @@

    Math and Methods

    • WCAG 2.x Contrast Checkerat WebAim.org. This popular and easy to use contrast check is for the WCAG 2.x guidelines 1.4.3 and 1.4.6
      • -
    • APCA Contrast CalculatorThe new method for assessing contrast and more.
      • +
    • APCA Contrast CalculatorThe proposed method for assessing contrast and more.
    • brucelindbloom.com Bruce Lindbloom's site on colorspaces and the related math and transformations. It includes a very helpful calculator that converters between many color models, including the key CIE models.
    From ed884d7d2ddb799a8e0fd8a0627156340315c119 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:11:47 -0800 Subject: [PATCH 43/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 739f0ef698ce9bb..38c76e41afd0070 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -443,6 +443,7 @@

    Math and Methods

    Additional Resources

    MDN

    +
    • Accessibility
    • Accessibility learning path
      • From 5ce511c9754a1247bd21f948040603f45b30ebcc Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:12:35 -0800 Subject: [PATCH 44/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 38c76e41afd0070..c1e3746737815a5 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -453,6 +453,7 @@

      MDN

    W3C Issues and Discussions

    +
    • The Visual Contrast Research Group for WCAG 3.
    • Light and dark text & WCAG 2.x vs WCAG 3.0 contrast (Silver thread #261)
      • From b3b2d0d7dfa79a494a815b0c00f85a12cfdadb97 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:14:25 -0800 Subject: [PATCH 45/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index c1e3746737815a5..2fab61cdd1a2352 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -118,7 +118,7 @@

      Text Size Guidelines

      The current WCAG 2.x contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

      -

      Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as APCA, and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

      +

      Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as the Advances Perceptual Contrast Algorithm (APCA), and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

      Non text elements such as icons also need adaquate contrast for perception. One description is thisWCAG 2.1 guideline.

      From 85b1979b56ec9420cfe166b76545f85dfa500bea Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:15:04 -0800 Subject: [PATCH 46/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 2fab61cdd1a2352..42962ec88e5a0f0 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -120,7 +120,7 @@

      Text Size Guidelines

      Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as the Advances Perceptual Contrast Algorithm (APCA), and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

      -

      Non text elements such as icons also need adaquate contrast for perception. One description is thisWCAG 2.1 guideline.

      +

      Non text elements such as icons also need adequate contrast for perception.

      CSS and the sRGB Colorspace

      From 77a4833792abdf44fe7b1cb7b9affb8cb77a2280 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:15:32 -0800 Subject: [PATCH 47/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 42962ec88e5a0f0..329cf031c4252e8 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -124,7 +124,7 @@

      Text Size Guidelines

      CSS and the sRGB Colorspace

      -

      The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace." +

      The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace."

      CSS Color Level 3 notations:

      From fe8bab345b89d355e793b62d19ba657f180240f0 Mon Sep 17 00:00:00 2001 From: Andrew Somers <42009457+Myndex@users.noreply.github.com> Date: Thu, 18 Feb 2021 09:16:15 -0800 Subject: [PATCH 48/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html Co-authored-by: Eric Bailey --- .../understanding_colors_and_luminance/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 329cf031c4252e8..e93807d123026fa 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -126,8 +126,7 @@

      CSS and the sRGB Colorspace

      The W3.org defines the sRGB colorspace as the default for web content. The MDN page on <color> says "The CSS color data type represents a color in the sRGB colorspace." - -

      CSS Color Level 3 notations:

      +

      CSS Color Level 3 notations:

      These are examples of the CSS notations used to define a color. Here the example color for each is magenta

      
From 1d6f6b95068b0eb71fa58b1a6a7e4087c571478f Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:17:22 -0800
Subject: [PATCH 49/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index e93807d123026fa..81a081334d2acbf 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -129,6 +129,7 @@ 
      CSS and the sRGB Colorspace 
      
 
      CSS Color Level 3 notations:
      
 
 
      These are examples of the CSS notations used to define a color. Here the example color for each is magenta
      
+
 
       /* by name (from a defined set of names) */
 div { color: 'magenta'; }

From b1612e550416ffb27bb3c683bc28412e17189b8b Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:17:36 -0800
Subject: [PATCH 50/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 81a081334d2acbf..5270119935cdc6f 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -427,8 +427,6 @@ 
      ALTERNATE (sRGB to Y, simple)
      
 
 
      Y = 0.2126 * (R´/255.0)2.2 + 0.7152 * (G´/255.0)2.2 + 0.0722 * (B´/255.0)2.2 
      
 
-
      
-
 
      Math and Methods
      
 
 
      Within the W3 AGWG there is active discussion and investigation regarding the WCAG 2.x contrast method, math, and future proposals. The main discussion thread is on GitHub as W3C/WCAG issue #695.
      

From 0d1be566da905ba42c5c5e01698a0e10f53e0274 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:18:02 -0800
Subject: [PATCH 51/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 5270119935cdc6f..14502c906520078 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -418,8 +418,7 @@ 
      STEP THREE (Spectrally Weighted Luminance)
      
 
 
      Multiply each linearized color channel by their coefficient and sum them all together to find Y, Luminance.
      
 
-
      
-
      ALTERNATE (sRGB to Y, simple)
      
+
      Alternate: sRGB to Y, simple
      
 
 
      Use this version instead of the piecewise version above if you are less concerned with accuracy and more concerned with performance.
      
 

From dc5c38e13afb5a0585377de205a7c1455bfcc7bc Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:18:52 -0800
Subject: [PATCH 52/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 14502c906520078..8573109acf1159a 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -163,7 +163,7 @@ 
      CSS Color Level 3 notations:
      
 
 
      Shown after that, we can use a hex value. Hex value means "hexadecimal," where the 0-255 integer is represented by two digits that each range from 0-15. As there are no Arabic numerals above 9, we use the letters a-f to represent 10-15. We add the '#' symbol to indicate the value is hex. Thus, #ff = 255.
 
-
      In some of the examples above, you'll notice that some have a fourth value which is called “alpha”, the A in RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.
      
+
      In some of the previous examples, you'll notice that some have a fourth value which is called “alpha”, the A in RGBA. The alpha channel is not a color channel, but defines transparency in terms of the opacity value of the color. A higher value means the color is more opaque therefore less transparent. In the examples above, the alpha value is set to half or 50% opaque.
      
 
 
 
      sRGB: the accessible colorspace 
      

From 774a86c5865f81e2db1793466bc3b959cf4544f4 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:19:09 -0800
Subject: [PATCH 53/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 8573109acf1159a..6789f00407aec1c 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -170,7 +170,7 @@ 
      sRGB: the accessible colorspace 
      
 
 
      For accessibility guidelines the sRGB colorspace is most commonly used. This is not only because sRGB is the current default standard for the the web, but also the sRGB color primaries are well suited for accessibility concerns. For instance, the "red" sRGB primary is actually a red-orange, with a dominant wavelength of 611nm which overlaps into the M cone (green) sensitivity.
      
 
-
      This is helpful for some impairments related to color vision deficiency (CVD). One form of CVD called protanopia means the eye has no red cones. But protanopia will still be able to perceive the sRGB red primary because the remaining green cones perceive it, though about 35% darker than normal vision. Nevertheless, both a protan (red deficient) and deutan (green deficient) type of CVD  have difficulty distinguishing between red and green.
      
+
      This is helpful for some impairments related to color vision deficiency (CVD). One form of CVD called protanopia means the eye has no red cones. But protanopia will still be able to perceive the sRGB red primary because the remaining green cones perceive it, though about 35% darker than normal vision. Nevertheless, both a protan (red deficient) and deutan (green deficient) type of CVD  have difficulty distinguishing between red and green.
      
 
 
      Some other display colorspaces use different primary colors. For the new ultraHD Rec2020 colorspace, the red primary has a longer wavelength of 630nm. This greatly improves color fidelity for normal vision, but it also means that someone with protanopia will not see this red at all, or very dimly at best. The Rec2020 green primary may cause a greater reduction in luminance for deuteranopia (green deficient vision).
      
 

From b11fcd6442526ab2f1eb8a81bbf030c221670ff3 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:21:10 -0800
Subject: [PATCH 54/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 6789f00407aec1c..e57fd2bc074df78 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -185,7 +185,7 @@ 
      Light and Luminance
      
 
 
      By far our eye is tuned to green, which makes up the majority of luminance. Relative to the total sRGB white (#fff), green is 71% of the total luminance measure. Red is second at 21%, and blue is a distant third as a mere 7% of luminance.
      
 
-
      Deeper dive into spectral sensitivity
      
+
      Deeper dive into spectral sensitivity
      
 
 
      The relative density of the three cone cell types is 63% L cones, 31% M cones, and 6% S cones, and is quite variable for each individual. Now if we look at these numbers for a moment, we might be puzzled as to why the majority of cones are the longwave, L type, yet the "red" in an sRGB monitor makes up only 21% of luminance.
      
 

From 80e1c407a167b1427783920d94fdc46642cd4184 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:21:52 -0800
Subject: [PATCH 55/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index e57fd2bc074df78..1f25620ae76aa3f 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -193,7 +193,7 @@ 
      Deeper dive into spectral sensiti
 
 
      At 611nm, the red primary in an sRGB monitor is spectrally distant from the L cone's peak sensitivity at 565nm. But the sRGB green primary is 549nm, in between the L cont peak and the M cone's peak at 540nm. This explains why the green primary makes up such a large portion of total luminance on a monitor.
      
 
-
      For a really deep dive into the nuances of spectral response, luminance, and color perception, see this excellent article at Handprint.com
      
+
      Handprint.com has  an excellent deep dive into the nuances of spectral response, luminance, and color perception.
      
 
 
 
      The value of luminance values
      

From 803ae166e31ecf1cd462e9c11fb34dabd70506ee Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:22:33 -0800
Subject: [PATCH 56/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 1f25620ae76aa3f..fa116f03bae04e3 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -196,7 +196,7 @@ 
      Deeper dive into spectral sensiti
 
      Handprint.com has  an excellent deep dive into the nuances of spectral response, luminance, and color perception.
      
 
 
-
      The value of luminance values
      
+
      The value of luminance values
      
 
 
      Once an sRGB color value is converted to the linear light value of luminance (Y), that luminance value can be used relative to another color's luminance to determine a contrast ratio, or used to predict a perceptual contrast. This is an important part of determining the readability of text on the page.
      
 

From e868d615c09989bc096ce1d19e669891c79b1004 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:26:59 -0800
Subject: [PATCH 57/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index fa116f03bae04e3..0287cf924502731 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -204,7 +204,7 @@ 
      The value of luminance values
      
 
 
      See also this article on luminance contrast which discusses various math methods relating to luminance and contrast
      .
 
-
      Perceptual lightness
      
+
      Perceptual lightness
      
 
 
      While luminance is a linear measure of light, as light exists in the real world, it does not predict our perception of light. When we say light is linear, we don't mean that it travels in a straight line, we mean as an additive quantity. If we have 100 photons of light and triple it, we then have 300 photons of light. But in that example, we don't perceive a tripling. The human visual system sees a relatively modest increase, because our perception of light is non-linear.
      
 

From c317945166e7ce2998ffa7743042ff799f2cee07 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:27:44 -0800
Subject: [PATCH 58/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 0287cf924502731..0e680bf52cfc776 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -208,7 +208,7 @@ 
      Perceptual lightness
      
 
 
      While luminance is a linear measure of light, as light exists in the real world, it does not predict our perception of light. When we say light is linear, we don't mean that it travels in a straight line, we mean as an additive quantity. If we have 100 photons of light and triple it, we then have 300 photons of light. But in that example, we don't perceive a tripling. The human visual system sees a relatively modest increase, because our perception of light is non-linear.
      
 
-
      A simple way to describe this is that our perception roughly follows a power curve with an exponent of ~0.425, so perceptual lightness is approximately L* = Y0.425, though this depends on adaptation.
      
+
      Another way to describe this is that our perception roughly follows a power curve with an exponent of ~0.425, so perceptual lightness is approximately L* = Y0.425, though this depends on adaptation.
      
 
 
 

From ca49326c8aed0f130ee06d3f21fb916ba7e19773 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:34:07 -0800
Subject: [PATCH 59/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 0e680bf52cfc776..c02a21d6f16b4cd 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -219,6 +219,7 @@ 
      Adaptation
      
 
      This incredibly wide range is possible due to a mechanism known as light and dark adaptation, where the eye adjusts to the current overall light level.
      
 
 
      Dark adaptation
      
+
 
      Also known as scotopic or "night vision." Here the eye is adapted to a very dark level. Instead of the "color" sensitive cones, another type of cell called rods becomes active. Rods are sensitive to very low light levels and don't sense color. Despite being very sensitive to light, with night vision the resolution is very poor, and details can be hard to see.
      
 
 
      When adapting to a dark condition, it can take thirty minutes to achieve full dark adaptation. Yet a brief exposure to a bright light can throw off that night vision, taking substantial time once again to adapt. In situations where it is important to maintain dark adaptation but something needs to be illuminate (such as a map or a control) a red light is often used, as that is less likely to interfere with the rods which are sensitive between green and blue.
      

From 09b876509295de91e4e6a54c7840f16c91c6d0cb Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:34:52 -0800
Subject: [PATCH 60/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index c02a21d6f16b4cd..6f726935182df2d 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -225,6 +225,7 @@ 
      Dark adaptation
      
 
      When adapting to a dark condition, it can take thirty minutes to achieve full dark adaptation. Yet a brief exposure to a bright light can throw off that night vision, taking substantial time once again to adapt. In situations where it is important to maintain dark adaptation but something needs to be illuminate (such as a map or a control) a red light is often used, as that is less likely to interfere with the rods which are sensitive between green and blue.
      
 
 
      Light adaptation
      
+
 
      This is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.
      
 
 
      The twilight zone
      

From e2f6056f3ca3bd1b4a22e4b5c49ae1fe13f8ee7d Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:35:31 -0800
Subject: [PATCH 61/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 6f726935182df2d..61389490d7c647f 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -229,6 +229,7 @@ 
      Light adaptation
      
 
      This is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.
      
 
 
      The twilight zone
      
+
 
      There is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.
      
 
 
      Other adaptations
      

From c6e9c1a4e0604cf27b8af934822b695efa98c48e Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 09:36:03 -0800
Subject: [PATCH 62/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 61389490d7c647f..615df59522304c5 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -233,6 +233,7 @@ 
      The twilight zone
      
 
      There is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.
      
 
 
      Other adaptations
      
+
 
      We also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast causing a low contrast item to seem even lower in contrast. We will adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.
      
 
 
      Here is a much deeper discussion of the nature of eye adaptation.
      

From 99c5de5c6419d7bbd2f24fdfb544d57d3599bcab Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:00:50 -0800
Subject: [PATCH 63/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 615df59522304c5..7a10a13e7d30bc8 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -236,7 +236,7 @@ 
      Other adaptations
      
 
 
      We also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast causing a low contrast item to seem even lower in contrast. We will adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.
      
 
-
      Here is a much deeper discussion of the nature of eye adaptation.
      
+
      Here is a much deeper discussion of the nature of eye adaptation.
      
 
 
 

From 7583b8ff6fb85bf44f476aa0454e82627b0b8a62 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:01:58 -0800
Subject: [PATCH 64/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 7a10a13e7d30bc8..2576e1229460cb1 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -246,7 +246,8 @@ 
      Hue Chroma and Saturation
      
 
 
      Used properly, color can help to organize information, aide navigation, and add distinction for elements such as indicating focus or activity states.
      
 
-
      Color theory
      
+
      Color theory
      
+
 
      A complete color theory and color design guide is beyond the scope of this document, but many classical design guidelines apply to web based content as they have to print for centuries. One classic resource is Johannes Itten's "The Art of Color", and the trimmed-down version "Elements of Color" can be read online at various archive libraries.
      
 
 

From fd073f783a0a69bf1ef92ffe92ee0ef422c9546e Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:02:43 -0800
Subject: [PATCH 65/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 2576e1229460cb1..b20c3c57606ffb5 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -248,7 +248,7 @@ 
      Hue Chroma and Saturation
      
 
 
      Color theory
      
 
-
      A complete color theory and color design guide is beyond the scope of this document, but many classical design guidelines apply to web based content as they have to print for centuries. One classic resource is Johannes Itten's "The Art of Color", and the trimmed-down version "Elements of Color" can be read online at various archive libraries.
      
+
      A complete color theory and color design guide is beyond the scope of this document, but many classical design guidelines apply to web based content as they have to print for centuries. One classic resource is Johannes Itten's "The Art of Color", and the trimmed-down version "Elements of Color" can be read online at various archive libraries.
      
 
 
 
      Color terms
      

From 44ed75c6f5fc15ef44e020029dab5b32448b5a14 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:03:18 -0800
Subject: [PATCH 66/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index b20c3c57606ffb5..c21bb6adca06494 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -251,7 +251,7 @@ 
      Color theory
      
 
      A complete color theory and color design guide is beyond the scope of this document, but many classical design guidelines apply to web based content as they have to print for centuries. One classic resource is Johannes Itten's "The Art of Color", and the trimmed-down version "Elements of Color" can be read online at various archive libraries.
      
 
 
-
      Color terms
      
+
      Color terms
      
 
 
      The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information.
      
 

From 92aba4ea79cd4f568468920d56802b2288a19a43 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:04:02 -0800
Subject: [PATCH 67/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index c21bb6adca06494..e2d0b48528547eb 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -258,6 +258,7 @@ 
      Color terms
      
 
      TIP: when searching the CIE glossary use the UK spelling of "colour."
      
 
 
      Colourfulness
      
+
 
      Colorfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (CIE 17-233). For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.
      
 
 
      Saturation
      

From 5cd7bcbadb7b29f8ed352b9f9e1c2c59392d711e Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:04:42 -0800
Subject: [PATCH 68/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index e2d0b48528547eb..13bdf696d77cc31 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -262,6 +262,7 @@ 
      Colourfulness
      
 
      Colorfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (CIE 17-233). For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.
      
 
 
      Saturation
      
+
 
      Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (CIE 17-1136). For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high. 
      
 
 
      Chroma
      

From 4180626af04dfe9cf1fcebb402082b2f0f537eb7 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:05:16 -0800
Subject: [PATCH 69/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 13bdf696d77cc31..0acc29f7f100930 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -266,6 +266,7 @@ 
      Saturation
      
 
      Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (CIE 17-1136). For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high. 
      
 
 
      Chroma
      
+
 
      Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (CIE 17-139). A color exhibits approximately constant chroma for all levels of illuminance in normal day viewing conditions (except when the brightness is very high). If the luminance is increased, the chroma usually increases in the same circumstances.
      
 
 
      Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."
      

From 2237cebdbeb7c0696ac0e63a479b5bafdb0361d3 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:06:19 -0800
Subject: [PATCH 70/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 0acc29f7f100930..1186420ec526ebc 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -271,7 +271,7 @@ 
      Chroma
      
 
 
      Here is an example of high chroma vs no chroma. On the right, each of the three sRGB primaries are at maximum. On the left, there is no chroma, also known as "achromatic."
      
 
-0 to 100 Chroma Ramps, an example of high chroma vs no chroma
+0 to 100 Chroma Ramps, an example of high chroma vs no chroma.
 
 
      A good resource with many more detailed examples is at  the Munsell color site.
      
 

From abb600be04e6c50b1149158019856b91f39acab3 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:07:22 -0800
Subject: [PATCH 71/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 1186420ec526ebc..0b5c8c47c4c120e 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -278,7 +278,7 @@ 
      Chroma
      
 
 
      Color Combinations
      
 
-
      Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. Pure blue and red is one such example, shown below. But in addition, some impairments are deficient and can not differentiate all colors. And some colors, such as pure blue, are so low in luminance they need to be the darkest of two colors. Blue is also very low in resolution as there are far fewer blue cones, and they are scattered in our peripheral vision, and not present in our central vision. This leads to some color use guidelines:
      
+
      Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. Pure blue and red is one such example. But in addition, some impairments are deficient and can not differentiate all colors. And some colors, such as pure blue, are so low in luminance they need to be the darkest of two colors. Blue is also very low in resolution as there are far fewer blue cones, and they are scattered in our peripheral vision, and not present in our central vision. This leads to some color use guidelines:
      
 
 
      • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
      
 

From 65e321b9173b2e7a4bdc014f6e88065290e01ab9 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:08:22 -0800
Subject: [PATCH 72/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 0b5c8c47c4c120e..58a1673bc4809d9 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -280,8 +280,8 @@ 
      Color Combinations
      
 
 
      Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. Pure blue and red is one such example. But in addition, some impairments are deficient and can not differentiate all colors. And some colors, such as pure blue, are so low in luminance they need to be the darkest of two colors. Blue is also very low in resolution as there are far fewer blue cones, and they are scattered in our peripheral vision, and not present in our central vision. This leads to some color use guidelines:
      
 
-
      • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
      
-
+
        
+  
      • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
        • 
 
        • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
        
 
 
        Working with Blue
        

From 1faf0a20bda8b90bd245def8f5d6c9b3fadfeb41 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:09:10 -0800
Subject: [PATCH 73/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 58a1673bc4809d9..40f6aca311d344a 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -282,7 +282,8 @@ 
        Color Combinations
        
 
 
          
   
        • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
          • 
-
          • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
          
+  
        • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
          • 
+
        
 
 
        Working with Blue
        
 
        • Pure blues should typically be the darkest of two colors
        

From 56803fbc9455b8b066c68263c3553206f436534d Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:09:37 -0800
Subject: [PATCH 74/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 40f6aca311d344a..163ed02eb3d4e54 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -285,7 +285,8 @@ 
        Color Combinations
        
   
      • The green in a monitor makes up the vast majority of luminance (light), so it will usually be a significant part of the lighter colors.
        • 
 
      
 
-
      Working with Blue
      
+
      Working with Blue
      
+
 
      • Pure blues should typically be the darkest of two colors
      
 
 
      • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
      

From bfa796e132c6ac78e6ce6fca08717be18ff5f670 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:12:07 -0800
Subject: [PATCH 75/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 163ed02eb3d4e54..f0b7df52c5a0d14 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -296,7 +296,7 @@ 
      Working with Blue
      
 
      The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other. In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.
      
 
 
-an example of blue against red, versus an example where the red has blue added to it
+An example of blue against red, versus an example where the red has blue added to it.
 
 
      As can be seen, reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer. However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia (red deficient vision) sees the above examples as:
      
 

From 7d8024d9476a4fbb595887f4c958a08a210fcf17 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:13:23 -0800
Subject: [PATCH 76/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index f0b7df52c5a0d14..0d878a806348649 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -298,7 +298,7 @@ 
      Working with Blue
      
 
 An example of blue against red, versus an example where the red has blue added to it.
 
-
      As can be seen, reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer. However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia (red deficient vision) sees the above examples as:
      
+
      Reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer. However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia (red deficient vision) sees the above examples as:
      
 
 
 an example of blue against red, and blue and purple, as seen by protanopia

From 8739cf7c6d32d22b2d9491b2d4671a2f31f161c2 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:15:19 -0800
Subject: [PATCH 77/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 0d878a806348649..c346b228319e940 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -309,7 +309,8 @@ 
      Working with Blue
      
 
 
      Thus it is always important to ensure ample luminance contrast. This is most easily regulated by adding green to the brightest of the two colors.
      
 
-
      Working with Red
      
+
      Working with Red
      
+
 
      Pure red (#F00) text on a pure black (#000) background is a bare minimum contrast for a 24px 700 weight bold font for normal vision. Someone with protanopia would have a difficult time reading this on an sRGB monitor, and it would be literally invisible on a next-generation Rec2020 display.
      
 
 pure red on black, and how someone with protanopia sees it, which is reduced to being illegible.

From 935c124ff5b575a7fce15c8a9ab45754abe62b68 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:16:06 -0800
Subject: [PATCH 78/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index c346b228319e940..7a27f4632f78853 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -301,7 +301,7 @@ 
      Working with Blue
      
 
      Reducing or avoiding details in the blue channel can help prevent chromatic aberration, glare, or shimmer. However, both of these color combinations are still a significant problem for some forms of color vision deficiency. For instance, someone with protanopia (red deficient vision) sees the above examples as:
      
 
 
-an example of blue against red, and blue and purple, as seen by protanopia
+An example of blue against red, and blue and purple, as seen by protanopia.
 
 
      Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast, which improves readability for everyone.
      
 

From cd75fa56d0772a79b742c099a44ad9ed875012e6 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:17:04 -0800
Subject: [PATCH 79/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 7a27f4632f78853..3445183a36b1d87 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -330,7 +330,7 @@ 
      Psychophysical aspects of color
      
 
      Color as in hues and saturation can affect our mood, and enhance — or de-enhance — our interactive experiences.
      
 
 
-
      Examples of color's effect beyond vision
      
+
      Examples of color's effect beyond vision
      
 
 
      Color can be culturally dependent
      
 
      A Cross-Cultural Study of the Affective Meanings of Color
      

From 6c48d6bf6b8f85764919f02cad4bafbd4088274b Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:19:41 -0800
Subject: [PATCH 80/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 3445183a36b1d87..0738389850b9b77 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -354,6 +354,7 @@ 
      Red is well known to have significant effects on our behavior
      
 
      How the Color Red Influences Our Behavior Scientific American, S. Martinez-Conde, S,Macknik
      
 
 
      Red Environment
      
+
 
      Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according to this study.
      
 
 

From f99f9c92ad0a60192df65b7750b713ba49ef2925 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:21:05 -0800
Subject: [PATCH 81/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 0738389850b9b77..45d64256c71f052 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -355,7 +355,7 @@ 
      Red is well known to have significant effects on our behavior
      
 
 
      Red Environment
      
 
-
      Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according to this study.
      
+
      Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according.
      
 
 
 
      Flashing and Seizures
      

From 037600a98bdadc21b21668f81e5a6c84ad7f319f Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:22:01 -0800
Subject: [PATCH 82/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../accessibility/understanding_colors_and_luminance/index.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 45d64256c71f052..69500b5dbf52a38 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -359,6 +359,7 @@ 
      Red Environment
      
 
 
 
      Flashing and Seizures
      
+
 
      Flashing at rates higher than 3 per second over a screen area greater than about 300px square has been shown to induce photic seizures in some people, most likely in children and adolescents. It has also been found that certain very regular, high contrast patterns such as parallel white and black stripes, can also induce seizures. Some studies have indicated that very deep saturated red (with wavelengths of 660nm-700nm+) may exacerbate the problem, if these deep reds flash between a saturated and unsaturated state, no matter the luminance.
      
 
 
      DEEP DIVE: The Epilepsy Foundation of America researched photic- related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review
      

From fd58adf934d60ab4a266fbded33f6316d4f4a94a Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:23:14 -0800
Subject: [PATCH 83/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html             | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 69500b5dbf52a38..bbf6d7cfe6be7b8 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -362,9 +362,7 @@ 
      Flashing and Seizures
      
 
 
      Flashing at rates higher than 3 per second over a screen area greater than about 300px square has been shown to induce photic seizures in some people, most likely in children and adolescents. It has also been found that certain very regular, high contrast patterns such as parallel white and black stripes, can also induce seizures. Some studies have indicated that very deep saturated red (with wavelengths of 660nm-700nm+) may exacerbate the problem, if these deep reds flash between a saturated and unsaturated state, no matter the luminance.
      
 
-
      DEEP DIVE: The Epilepsy Foundation of America researched photic- related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review
      
-
-
      The study resulted in several important guidelines, a few key guidelines are:
      
+
      The Epilepsy Foundation of America researched photic-related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review. The study resulted in several important guidelines, a few key guidelines are:
      
 
 
      Single, double, or triple flashes in one second are acceptable, but a sequence of flashes is not recommended when both of the following occur:
      
 
        

From 740d5e7df9143f4290107ccb7069e4d2516e92bf Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:24:11 -0800
Subject: [PATCH 84/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index bbf6d7cfe6be7b8..05ef526fac67c39 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -365,9 +365,10 @@ 
        Flashing and Seizures
        
 
        The Epilepsy Foundation of America researched photic-related seizures thoroughly in this publication Photic- and Pattern-induced Seizures A Review. The study resulted in several important guidelines, a few key guidelines are:
        
 
 
        Single, double, or triple flashes in one second are acceptable, but a sequence of flashes is not recommended when both of the following occur:
        
+
 
          
-
        1. More than three flashes within any one second period.
          2. 
-
        2. From the minimal expected viewing distance, the total area of concurrent flashes subtends at the eye a solid angle of >0.006 steradians (approximately 300px square).
          3. 
+  
        3. More than three flashes within any one second period.
          4. 
+  
        4. From the minimal expected viewing distance, the total area of concurrent flashes subtends at the eye a solid angle of >0.006 steradians (approximately 300px square).
          5. 
 
        
 
 
        When the light–dark stripes of any pattern are larger than 300px square (approximately) and the luminance of the lightest stripe is more than 50 cd/m², the pattern should display no more than:
        

From 83ecf3f59e5b1f897152f880aadc44b5f77c26bc Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:25:04 -0800
Subject: [PATCH 85/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 05ef526fac67c39..aeb2c902d966aa3 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -372,9 +372,10 @@ 
        Flashing and Seizures
        
 
      
 
 
      When the light–dark stripes of any pattern are larger than 300px square (approximately) and the luminance of the lightest stripe is more than 50 cd/m², the pattern should display no more than:
      
+
 
        
-
      1. Five light–dark pairs of stripes, if the stripes change direction, oscillate, flash, or reverse in contrast.
        2. 
-
      2. Eight light–dark pairs of stripes, if the pattern is unchanging or continuously and smoothly drifting in one direction.
        3. 
+  
      3. Five light–dark pairs of stripes, if the stripes change direction, oscillate, flash, or reverse in contrast.
        4. 
+  
      4. Eight light–dark pairs of stripes, if the pattern is unchanging or continuously and smoothly drifting in one direction.
        5. 
 
      
 
 
      The consensus recommendations are in this brief paper, Photic- and Pattern-induced Seizures: Expert Consensus of the Epilepsy Foundation of America 
      

From 7ec98fade11b23b9fff9c854737823574e545fdd Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:28:46 -0800
Subject: [PATCH 86/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html             | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index aeb2c902d966aa3..f51998e1fb82b1c 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -378,9 +378,7 @@ 
      Flashing and Seizures
      
   
    • Eight light–dark pairs of stripes, if the pattern is unchanging or continuously and smoothly drifting in one direction.
      • 
 
 
-
      The consensus recommendations are in this brief paper, Photic- and Pattern-induced Seizures: Expert Consensus of the Epilepsy Foundation of America 
      
-
-
      And some additional insights are available in this UK paper covering guidelines for preventing seizures..
      
+
      The consensus recommendations are in this brief paper, Photic- and Pattern-induced Seizures: Expert Consensus of the Epilepsy Foundation of America. Some additional insights are available in this UK paper covering guidelines for preventing seizures..
      
 
 
      
 

From 545bccf6c99f626eb6e4c52b7c53a38309ff8598 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:29:41 -0800
Subject: [PATCH 87/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index f51998e1fb82b1c..3b23184188921e0 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -385,9 +385,6 @@ 
      Flashing and Seizures
      
 
      Modeling Light Color and Vision
      
 
 
      To help us in our work, be it content design or determining accessibility, or calibrating a monitor, we need a way to model and predict the behavior and perception of light and color. These models are built with basic math, and are specific to the given task. A colorimetric model is one that is involved in measuring light, an appearance model is designed to predict how we will perceive the light as measured.
      
-
-
-
 
      Calculating Relative Luminance
      
 
 
      The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:
      

From 5a895278eef09e0b9790601cddfc774cc50ca660 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:30:40 -0800
Subject: [PATCH 88/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 3b23184188921e0..363aa58ff1bd0a3 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -397,7 +397,8 @@ 
      STEP ONE (8 bit integer to float)
      
 
 
      If your sRGB values are 16 bit then convert to decimal by dividing by 65535.
      
 
-
      STEP TWO (Linearize)
      
+
      Step two: Linearize
      
+
 
      Linearize the data to remove the encoded transfer curve.
      
 
 
         Rlin = sRGBtoLin(R´float)      Glin = sRGBtoLin(G´float)      Blin = sRGBtoLin(B´float) 
      

From c07b9599c6eac58d04aefb1cd834ee4e976855df Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:32:08 -0800
Subject: [PATCH 89/94] Update
 files/en-us/web/accessibility/understanding_colors_and_luminance/index.html

Co-authored-by: Eric Bailey 
---
 .../index.html                                 | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 363aa58ff1bd0a3..cd9bfbd85f86d27 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -405,15 +405,15 @@ 
      Step two: Linearize
      
 
 
      Using the function shown below:
      
 
-
      function sRGBtoLin(colorChannel) {
-		  // Send this function a decimal sRGB gamma encoded color channel
-		  // between 0.0 and 1.0, and it returns a linearized value.
-		if ( colorChannel <= 0.04045 ) {
-			return colorChannel / 12.92;
-		} else {
-			return Math.pow((( colorChannel + 0.055)/1.055),2.4);
-		}
-	}
      
+
      function sRGBtoLin(colorChannel) {   
+  // Send this function a decimal sRGB gamma encoded color channel
+  // between 0.0 and 1.0, and it returns a linearized value.
+  if ( colorChannel <= 0.04045 ) {
+    return colorChannel / 12.92;
+  } else {
+      return Math.pow((( colorChannel + 0.055)/1.055),2.4);
+  }
+}
      
 
 
      
 
      IMPORTANT NOTE
      

From 38f7058dcd9ae799d9046416cd33b2e8c2e699ca Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Thu, 18 Feb 2021 10:35:16 -0800
Subject: [PATCH 90/94] Apply suggestions from code review

Co-authored-by: Eric Bailey 
---
 .../understanding_colors_and_luminance/index.html        | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index cd9bfbd85f86d27..d11e888dff1c6f6 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -389,7 +389,7 @@ 
      Calculating Relative Luminance
      
 
 
      The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:
      
 
-
      STEP ONE (8 bit integer to float)
      
+
      Step one: 8 bit integer to float
      
 
 
      Convert 8 bit sRGB values to float (0.0 to 1.0) by dividing by 255.0:
      
 
@@ -416,10 +416,11 @@ 
      Step two: Linearize
      
 }
      
 
 
      
-
      IMPORTANT NOTE
      
-
      Those familiar with the WCAG 2.x contrast math may notice that the above code uses the threshold value of 0.04045. This is the official IEC standard. The WCAG 2.x guidelines were drafted citing an obsolete value. While the WCAG 2.x version is technically incorrect, with 8-bit color there is no functional difference for the purpose of WCAG 2.x contrast. For the record, the WCAG 2.x value is 0.03928 
      
+  
      Important Note
      
+  
      Those familiar with the WCAG 2.x contrast math may notice that the above code uses the threshold value of 0.04045. This is the official IEC standard. The WCAG 2.x guidelines were drafted citing an obsolete value. While the WCAG 2.x version is technically incorrect, with 8-bit color there is no functional difference for the purpose of WCAG 2.x contrast. For the record, the WCAG 2.x value is 0.03928.
      
+
    -

    STEP THREE (Spectrally Weighted Luminance)

    +

    Step three: Spectrally Weighted Luminance

    The normal human eye has three types of cones that are sensitive to red, green, and blue light. But our spectral sensitivity is not uniform, as we are most sensitive to green (555 nm), and blue is a distant last place. Luminance is spectrally weighted to reflect this using the following coefficients for sRGB:

    From 54cf5e7b5514ca49f9ff914be971673e3c1bee35 Mon Sep 17 00:00:00 2001 From: Andrew Somers Date: Thu, 18 Feb 2021 15:50:04 -0800 Subject: [PATCH 91/94] Final fixes Fixed the lists and some spelling --- .../index.html | 80 ++++++++++++------- 1 file changed, 50 insertions(+), 30 deletions(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index d11e888dff1c6f6..6a386b0b0ded7ae 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -118,7 +118,7 @@

    Text Size Guidelines

    The current WCAG 2.x contrast guidelines 1.4.3 and 1.4.6 define "large" text as text that is 18pt (24px) or larger at a normal weight (400), or text that is 14pt (18.7px) at a bold weight (700). This may have been sufficient in 2008 when the standard was created. At that time, most "web fonts" such as Verdana were only available in a normal and bold weight.

    -

    Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as the Advances Perceptual Contrast Algorithm (APCA), and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

    +

    Today, the proliferation of easily available web fonts of all sizes and weights has complicated the issue. The emerging WCAG 3.0 standard on visual contrast is known as the Advanced Perceptual Contrast Algorithm (APCA), and takes into account font weights and sizes in a variable manner, relative to the predicted contrast value.

    Non text elements such as icons also need adequate contrast for perception.

    @@ -287,11 +287,14 @@

    Color Combinations

    Working with Blue

    -

    • Pure blues should typically be the darkest of two colors

    +
      +
    • Pure blues should typically be the darkest of two colors
      • + +
    • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
      • -

      • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.

      +
    • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
      • +
    -

    • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.

    The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other. In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.

    @@ -332,31 +335,48 @@

    Psychophysical aspects of color

    Examples of color's effect beyond vision

    -

    Color can be culturally dependent

    -

    A Cross-Cultural Study of the Affective Meanings of Color

    - -

    Color affects our emotions

    -

    Color and emotion: effects of hue, saturation, and brightness

    - -

    Higher contrasts can also have a positive affect on our emotions

    -

    Emotion Variation from Controlling Contrast of Visual Contents through EEG-Based Deep Emotion Recognition

    - -

    Some colors can affect our perception of time

    -

    Color and time perception: Evidence for temporal overestimation of blue stimuli

    - -

    Blue also has a significant effect on brightness and glare

    -

    Blue and glare & brightness

    - -

    Red tinted glasses can provide increased happiness or joy

    -

    Looking Through "Rose-Tinted" Glasses: The Influence of Tint on Visual Affective Processing

    - -

    Red is well known to have significant effects on our behavior

    -

    How the Color Red Influences Our Behavior Scientific American, S. Martinez-Conde, S,Macknik

    - -

    Red Environment

    - -

    Studies have shown that a red environment stimulates cognition, but for those who suffer Traumatic Brain Injury cognitive function may be reduced in a red environment, while a green environment had no measurable effect according.

    - +

    Flashing and Seizures

    @@ -405,7 +425,7 @@

    Step two: Linearize

    Using the function shown below:

    -
    function sRGBtoLin(colorChannel) {   
+
    function sRGBtoLin(colorChannel) {
   // Send this function a decimal sRGB gamma encoded color channel
   // between 0.0 and 1.0, and it returns a linearized value.
   if ( colorChannel <= 0.04045 ) {

From 9f57b9d0f268d8f0ec9ed2bef968ff8e8287a696 Mon Sep 17 00:00:00 2001
From: Andrew Somers <42009457+Myndex@users.noreply.github.com>
Date: Tue, 23 Feb 2021 21:03:04 -0800
Subject: [PATCH 92/94] Apply suggestions from code review

Co-authored-by: Eric Bailey 
---
 .../index.html                                | 121 +++++++-----------
 1 file changed, 49 insertions(+), 72 deletions(-)

diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
index 6a386b0b0ded7ae..cecbf5ad9309a74 100644
--- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
+++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html
@@ -31,10 +31,10 @@ 
    Introduction to Color and Acces
 
    When designing visual and readable content with the aim of accessibility for all sighted users, it is important to have an understanding of light, color, and perception. This page specifically discusses:
    
 
 
      
-  
    • luminance which is a linear measure of light
      • 
-  
    • color, which is measured as hue, chroma, and saturation
      • 
-  
    • lightness, brightness, and contrast which are measures of perception
      • 
-  
    • how these interrelate and interact with design elements
      • 
+  
    • luminance, which is a linear measure of light,
      • 
+  
    • Color, which is measured as hue, chroma, and saturation,
      • 
+  
    • lightness, brightness, and contrast which are measures of perception, and
      • 
+  
    • how these interrelate and interact with design elements.
      • 
 
    
 
 
    While understanding these concepts are important for design and readability for all sighted users, they are especially important for those with reduced vision and color deficient vision, and also for those with certain neurological, cognitive, and other impairments.
    
@@ -53,7 +53,7 @@ 
    Color basics
    
 
 
    We normally associate L, M, or S cone sensitivity with the sensation of red, green, and blue colors, respectively, the three primary colors of light. Specific red, green, and blue hues are used for the "color primaries" used in an RGB additive color model. The sRGB colorspace, the default standard colorspace for web content, is an example of an additive RGB color model.
    
 
-
    RGB additive model
    
+
    RGB additive model
    
 
 
    RGB is called an additive color model because it functions by adding light of different wavelengths in different proportions to stimulate the L, M, S cones in the eye to create a particular color sensation. For instance when you see the color yellow on your monitor, the monitor is still only emitting red and green light. The separate red and green stimulate the L and M cones similarly to how a "yellow" wavelength of light might, as yellow is "in between" red and green. The red and green light do not "mix" in the air as if paint, they remain separate. The "mixing" happens in our vision system's neurological processing.
    
 
@@ -62,12 +62,12 @@ 
    RGB additive model
    
   
    The monitor is only emitting the red and green light shown on top to create the yellow bar underneath.
    
 
 
-
    CMYK subtractive model
    
+
    CMYK subtractive model
    
 
 
    CMYK is another form of color model, known as a subtractive model. Here, the cyan, magenta, yellow, black inks remove certain wavelengths of light, reflecting back only the narrow range each is associated with. In this article we will be focusing on displayed web content, and so we discuss mainly the RGB color model.
    
 
-
    For a deeper dive into how the eye and vision system functions, see this overview.
+
    See this overview for a deeper dive into how the eye and vision system functions.
 
 
    Perception of Color and Contrast
    
 
@@ -90,11 +90,13 @@ 
    The context of contrast
    
 
    The yellow dots in this image are identical colors coming from your monitor, but they appear different due to context. Image D.Lyon
    
 
 
-
    Our contrast, lightness, and color perception is affected by the context of the nearby colors and other features of a design or image. This makes predicting contrast challenging. It is clearly not as simple as the distance or ratio between two colors.
    
+
    Our contrast, lightness, and color perception is affected by the context of the nearby colors, and other features of a design or image. This makes predicting contrast challenging. It is clearly not as simple as the distance or ratio between two colors.
    
 
 
    Readability Contrast
    
 
-
    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the point where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible. For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.
    
+
    For web content, readability is one very important goal. Readability is not the same as legibility. Readability is the point where a particular user can read at their best speed and best comprehension. Legibility refers to the "just noticeable difference" (JND) where a figure such as a letter just becomes discernible.
     
+
+
    For normal vision, the contrast sensitivity (CS) JND legibility level is about 1%, while someone with a mild impairment might have a CS of 3%. 10% would be represent profound impairment in the area of low vision. These levels are for large, bold fonts on a special chart used for testing contrast sensitivity.
    
 
 
    But the threshold of 1% to 3% is wholly insufficient for fluent, easy reading. The minimum critical contrast level is ten times the CS JND, and 20 times the JND is considered the better target to allow for "contrast reserve."  (Visual requirements for reading, S G Whittaker, J Lovie-Kitchin).
    
 
@@ -107,7 +109,7 @@ 
    Spatial Frequency
    
 
 
    "Normal" print is usually considered 11.5pt to 12pt, this is equivalent of 16px on screen. And this is for normal vision. To relate this to real world visual acuity, if you think of an eye doctor's chart, and focusing on a capital E. If that E is at the legibility or acuity limit for 20/20 vision, and that is at full contrast, it is equivalent to a Helvetica capital E that is 3.9px on screen, meaning a 5.5px CSS font-size. (In print, this is a 4pt font on coated paper).
    
 
-
    But that is the minimum for "just making out" the letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.
    
+
    This is the minimum for "just making out" letters at ~70% accuracy. That is legibility, not readability. For readability, the lower case x-height needs to be a minimum of twice that cap height. This is called the critical font size for readability.
    
 
 
    This means that while a 5.5px font may be the minimum for 20/20 legibility, the minimum for readability is 15.6px (in print, about 12pt, the typical standard in books). And this is for normal vision. Someone with 20/40 needs twice that, about a 31px font. This is why the WCAG standard requires that users have the ability to zoom text larger.
    
 
@@ -128,7 +130,7 @@ 
    CSS and the sRGB Colorspace 
    
 
 
    CSS Color Level 3 notations:
    
 
-
    These are examples of the CSS notations used to define a color. Here the example color for each is magenta
    
+
    These are examples of the CSS notations used to define a color. Here the example color for each is magenta:
    
 
 
     /* by name (from a defined set of names) */
@@ -191,7 +193,7 @@ 
    Deeper dive into spectral sensiti
 
 
    This is because the peak sensitivity of the L cone is actually a green/yellow, and the L cone response almost entirely overlaps the M cone response. The reason we often refer to the L cone as the "red" cone is that it responds more to long wave red light than the M cone. It is this differential between M and L cones that results in the sensation of red.
    
 
-
    At 611nm, the red primary in an sRGB monitor is spectrally distant from the L cone's peak sensitivity at 565nm. But the sRGB green primary is 549nm, in between the L cont peak and the M cone's peak at 540nm. This explains why the green primary makes up such a large portion of total luminance on a monitor.
    
+
    At 611nm, the red primary in an sRGB monitor is spectrally distant from the L cone's peak sensitivity at 565nm. But the sRGB green primary is 549nm, in between the L cone peak and the M cone's peak at 540nm. This explains why the green primary makes up such a large portion of total luminance on a monitor.
    
 
 
    Handprint.com has  an excellent deep dive into the nuances of spectral response, luminance, and color perception.
    
 
@@ -218,23 +220,25 @@ 
    Adaptation
    
 
 
    This incredibly wide range is possible due to a mechanism known as light and dark adaptation, where the eye adjusts to the current overall light level.
    
 
-
    Dark adaptation
    
+
    Dark adaptation
    
 
 
    Also known as scotopic or "night vision." Here the eye is adapted to a very dark level. Instead of the "color" sensitive cones, another type of cell called rods becomes active. Rods are sensitive to very low light levels and don't sense color. Despite being very sensitive to light, with night vision the resolution is very poor, and details can be hard to see.
    
 
 
    When adapting to a dark condition, it can take thirty minutes to achieve full dark adaptation. Yet a brief exposure to a bright light can throw off that night vision, taking substantial time once again to adapt. In situations where it is important to maintain dark adaptation but something needs to be illuminate (such as a map or a control) a red light is often used, as that is less likely to interfere with the rods which are sensitive between green and blue.
    
 
-
    Light adaptation
    
+
    Light adaptation
    
+
+
    This is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor.
     
 
-
    This is also known as photopic or "daylight vision." Here the eye is adapted to much higher levels of light, typically a luminance greater than 8 cd/m2. The equates to a CSS value of between #444 and #555 for a typical desktop monitor. While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.
    
+
    While dark adaption may take 30 minutes, light adaptation is much faster, taking only a few minutes. An example is leaving a dark theater on a Saturday afternoon, and being dazed by the bright sunlight for a minute or two. This adaptation period can even be painful for some people.
    
 
-
    The twilight zone
    
+
    The twilight zone
    
 
 
    There is a transitional area between dark and light adaptation known as mesopic vision, where both rods and cones operate at the same time. On a monitor, we'd consider this black (about #000005) up to as high as #555 for a bright desktop monitor.
    
 
-
    Other adaptations
    
+
    Other adaptations
    
 
-
    We also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast causing a low contrast item to seem even lower in contrast. We will adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.
    
+
    We also adapt to contrast levels, and chroma and hue. Our perception is relative to context. If a page is very high contrast, we adapt to that high contrast. This will cause a low contrast item to seem even lower in contrast. We will also adapt to the overall hue cast of a page, as a result other colors on that page will be affected and perceived relative to the overall page color.
    
 
 
    Here is a much deeper discussion of the nature of eye adaptation.
    
 
@@ -257,15 +261,15 @@ 
    Color terms
    
 
 
    TIP: when searching the CIE glossary use the UK spelling of "colour."
    
 
-
    Colourfulness
    
+
    Colourfulness
    
 
-
    Colorfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (CIE 17-233). For a color of a given chromaticity this attribute usually increases as the luminance is raised except when the brightness is very high.
    
+
    Colorfulness is the “Attribute of a visual perception according to which the perceived colour of an area appears to be more or less chromatic.” (CIE 17-233). For a color of a given chromaticity this attribute usually increases as the luminance is raised, except when the brightness is very high.
    
 
-
    Saturation
    
+
    Saturation
    
 
 
    Saturation is the “Colourfulness of an area judged in proportion to its brightness.” (CIE 17-1136). For normal day viewing conditions a given chromaticity exhibits approximately constant saturation for all luminance levels, except when the brightness is very high. 
    
 
-
    Chroma
    
+
    Chroma
    
 
 
    Chroma is the “Colourfulness of an area judged as a proportion of the brightness of a similarly illuminated area that appears white or highly transmitting.” (CIE 17-139). A color exhibits approximately constant chroma for all levels of illuminance in normal day viewing conditions (except when the brightness is very high). If the luminance is increased, the chroma usually increases in the same circumstances.
    
 
@@ -288,10 +292,8 @@ 
    Color Combinations
    
 
    Working with Blue
    
 
 
      
-  
    • Pure blues should typically be the darkest of two colors
      • 
-
+  
    • Pure blues should typically be the darkest of two colors.
      • 
   
    • To use blue as the lighter of two colors, green needs to be added, otherwise there will be insufficient contrast and poor readability.
      • 
-
   
    • This is both due to the low contrast and due to the human eye seeing blue at a lower resolution than green and red.
      • 
 
    
 
@@ -306,7 +308,7 @@ 
    Working with Blue
    
 
 An example of blue against red, and blue and purple, as seen by protanopia.
 
-
    Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast, which improves readability for everyone.
    
+
    Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast. This improves readability for everyone.
    
 
 the previous examples, but adding green to the brightest color to improve contrast.
 
@@ -318,7 +320,7 @@ 
    Working with Red
    
 
 pure red on black, and how someone with protanopia sees it, which is reduced to being illegible.
 
-
    Here again, adding a small amount of green (#77) makes an noticeable difference for protanopia, and in fact improves readability for all users by improving the luminance contrast.
    
+
    Adding a small amount of green (#77) makes a noticeable difference for protanopia, and in fact improves readability for all users by improving the luminance contrast.
    
 
 the previous example, but adding a small amount of green to increase the luminance contrast of the text against black.
 
@@ -336,46 +338,20 @@ 
    Psychophysical aspects of color
    
 
    Examples of color's effect beyond vision
    
 
 
 
 
    Flashing and Seizures
    
@@ -405,11 +381,12 @@ 
    Flashing and Seizures
    
 
    Modeling Light Color and Vision
    
 
 
    To help us in our work, be it content design or determining accessibility, or calibrating a monitor, we need a way to model and predict the behavior and perception of light and color. These models are built with basic math, and are specific to the given task. A colorimetric model is one that is involved in measuring light, an appearance model is designed to predict how we will perceive the light as measured.
    
+
 
    Calculating Relative Luminance
    
 
 
    The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:
    
 
-
    Step one: 8 bit integer to float
    
+
    Step one: 8 bit integer to float
    
 
 
    Convert 8 bit sRGB values to float (0.0 to 1.0) by dividing by 255.0:
    
 
@@ -417,7 +394,7 @@ 
    Step one: 8 bit integer to float
    
 
 
    If your sRGB values are 16 bit then convert to decimal by dividing by 65535.
    
 
-
    Step two: Linearize
    
+
    Step two: Linearize
    
 
 
    Linearize the data to remove the encoded transfer curve.
    
 
@@ -440,7 +417,7 @@ 
    Important Note
    
   
    Those familiar with the WCAG 2.x contrast math may notice that the above code uses the threshold value of 0.04045. This is the official IEC standard. The WCAG 2.x guidelines were drafted citing an obsolete value. While the WCAG 2.x version is technically incorrect, with 8-bit color there is no functional difference for the purpose of WCAG 2.x contrast. For the record, the WCAG 2.x value is 0.03928.
    -

    Step three: Spectrally Weighted Luminance

    +

    Step three: Spectrally Weighted Luminance

    The normal human eye has three types of cones that are sensitive to red, green, and blue light. But our spectral sensitivity is not uniform, as we are most sensitive to green (555 nm), and blue is a distant last place. Luminance is spectrally weighted to reflect this using the following coefficients for sRGB:

    @@ -448,7 +425,7 @@

    Step three: Spectrally Weighted Luminance

    Multiply each linearized color channel by their coefficient and sum them all together to find Y, Luminance.

    -

    Alternate: sRGB to Y, simple

    +

    Alternate: sRGB to Y, simple

    Use this version instead of the piecewise version above if you are less concerned with accuracy and more concerned with performance.

    From 951efc62fc080fef7d18fbd03fc61f12f3864db8 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 2 Mar 2021 21:56:15 -0500 Subject: [PATCH 93/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html --- .../understanding_colors_and_luminance/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index cecbf5ad9309a74..65b96f15933c5a1 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -282,7 +282,9 @@

    Chroma

    Color Combinations

    -

    Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. Pure blue and red is one such example. But in addition, some impairments are deficient and can not differentiate all colors. And some colors, such as pure blue, are so low in luminance they need to be the darkest of two colors. Blue is also very low in resolution as there are far fewer blue cones, and they are scattered in our peripheral vision, and not present in our central vision. This leads to some color use guidelines:

    +

    Certain color combinations can be very problematic on a computer monitor or mobile device, and some color combinations can interfere with some impairments. The combination of red/blue is one such example.

    + +

    Some impairments cannot differentiate all colors. And some colors, such as pure blue, are so low in luminance they need to be the darkest of two colors. Blue is also very low in resolution. There are far fewer blue cones, and they are scattered in our peripheral vision and not present in our central vision. This leads to some color use guidelines:

    • Never rely on hue alone for differentiating details. Adequate luminance contrast is required.
      • From 32d1a08f29af3e09869c4dc835ee776dcf3dd7c8 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 2 Mar 2021 21:57:48 -0500 Subject: [PATCH 94/94] Update files/en-us/web/accessibility/understanding_colors_and_luminance/index.html --- .../accessibility/understanding_colors_and_luminance/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html index 65b96f15933c5a1..800443b9c6e8442 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.html @@ -300,7 +300,7 @@

      Working with Blue

    -

    The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue may "shimmer" when next to each other. In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.

    +

    The nature of blue light causes it to focus at a different location on the retina than red, so a pure red and a pure blue color that are immediately adjacent and touching, may "shimmer" when next to each other. In the example below: Left, pure red (#F00) and a pure blue (#00D). Right, an equal amount of blue was added to the background which removes all detail from the blue channel.

    An example of blue against red, versus an example where the red has blue added to it.