+ 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.
-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:
+ +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.
+ +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.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 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.
+ +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 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.
+ +
+ 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.
+ +See this overview for a deeper dive into how the eye and vision system functions. + +
The first thing to understand about our perception of color, light, and contrast is that:
+ +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.
+ +
+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.
-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, 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.
+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.
-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.
+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.
-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
+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).
-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.
-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.
+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.
-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.
+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.
-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.
+"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).
-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".
+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.
-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:
+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.
-"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."
+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.
-CSS Color Module Level 4 will likely change the domination of the sRGB color space in the future.
-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.
+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.
-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%); }
+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.
+
+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:
+
+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'; }
+
+/* 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 */
+div { color: rgb(100%, 0%, 100%); }
+div { color: rgba(100%, 0%, 100%, 50%); }
+
+/* by sRGB integer values */
+div { color: rgb(255, 0, 255); }
+div { color: rgba(255, 0, 255, 128); }
+
+/* by sRGB value in hex */
+div { color: #f0f; } /* #rgb, a shorthand for #rrggbb */
+div { color: #ff00ff; } /* #rrggbb */
+div { color: #ff00ff80; } /* #rrggbbaa */
-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.
-
+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.
-Luminance and Contrast
+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.
-Contrast
+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.
-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.
+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.
-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
+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.
-
Icons also need sufficient contrast for perception. See WCAG 2.1 technique G207
+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.
-Luminance
-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:
+sRGB: the accessible colorspace
-"the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white"
+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 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)
+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.
-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.
+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).
-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"
+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.
-Once luminance is established, the color contrast ratio can be established. A color contrast ratio is meaningless without its luminance component.
+
-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)
+Light and Luminance
-WCAG 2.1 defines relative luminance as follows (as of July 2019):
-
+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.
-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:
+Deeper dive into spectral sensitivity
-
- - 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
-
+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.
-and RsRGB, GsRGB, and BsRGB are defined as:
+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.
-
- - RsRGB = R8bit/255
- - GsRGB = G8bit/255
- - BsRGB = B8bit/255
-
+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.
-The "^" character is the exponentiation operator. (Formula taken from [sRGB] and [IEC-4WD]).
+Handprint.com has an excellent deep dive into the nuances of spectral response, luminance, and color perception.
-
+The value of luminance values
-Colors Perception
+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.
-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.
+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.
-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.
+See also this article on luminance contrast which discusses various math methods relating to luminance and contrast
.
-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.
+Perceptual lightness
-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.
+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.
-Color Combinations
+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.
-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.
-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.."
-Adaption
+Adaptation
-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.
+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.
-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.
+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 implication is that web developers who seek to improve legibility of text against a background can take advantage of the principles of local adaptation.
+Dark adaptation
-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.
+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.
-Light adaptation is the reverse. Going from a dark room into bright sunlight is quicker, but it can also hurt.
+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.
-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.
+Light adaptation
-Saturation
+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.
-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.
+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 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
+The twilight zone
-"Irrespective of luminance, a transition to or from a saturated red is also considered a risk"
+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 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.
+Other adaptations
-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.
+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.
-Saturation and Luminance
+Here is a much deeper discussion of the nature of eye adaptation.
-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."
-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
-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.
+ +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.
-"Saturated Red" is a special, dangerous case, and there are special tests for it.
+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)
+The world standard in terms of colorimetry (measuring color) is the CIE, and their interactive glossary is filled with color information.
-![Red Saturation from Wikimedia Commons svg saved as png Attribution: Datumizer [CC0]](320px-red_saturations.svg.png)
TIP: when searching the CIE glossary use the UK spelling of "colour."
-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."
+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.
-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)
+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.
-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.
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.
-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.
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."
-
-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.".
+A good resource with many more detailed examples is at the Munsell color site.
-The "math" for the calculations is spelled out in WCAG 2.1 in the definition for relative luminance, and is as follows:
-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:
+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:
and RsRGB, GsRGB, and BsRGB are defined as:
+There is active discussion and investigation underway concerning relative luminance, contrast, and more. See W3C/WCAG issue #360.
-R, G, and B have distinct weights in the relative luminance formula.
+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.
Calculations for relative luminance are not casual ones, luckily, there are tools that will do it for you. Here are a few.
-
-Some notes:
+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:
-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."
-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.
+Adding green to the brightest of the two colors, in this case the background, improves the luminance contrast. This improves readability for everyone.
-Luminance and lightness are not the same.
+
-Luminance and reflected light are not the same.
+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.
-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.
+ +
+
+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.
+ + +Color as in hues and saturation can affect our mood, and enhance — or de-enhance — our interactive experiences.
+ + +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.
+ +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:
+ +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:
+ +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..
+ +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.
+ +The IEC standard for calculating relative luminance (Y) from an sRGB color is as follows:
+ +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.
+ +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);
+ }
+}
+
+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.
+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:
+ +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 Y, Luminance.
+ +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.
+ +Y = 0.2126 * (R´/255.0)2.2 + 0.7152 * (G´/255.0)2.2 + 0.0722 * (B´/255.0)2.2
+ +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.
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.
+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/tomjewettminicolorpicker.png b/files/en-us/web/accessibility/understanding_colors_and_luminance/tomjewettminicolorpicker.png deleted file mode 100644 index 8d2b5efc697165f..000000000000000 Binary files a/files/en-us/web/accessibility/understanding_colors_and_luminance/tomjewettminicolorpicker.png and /dev/null differ 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 new file mode 100644 index 000000000000000..8df97e7d0f46026 Binary files /dev/null and b/files/en-us/web/accessibility/understanding_colors_and_luminance/yellowdotcheckershadow_dlyon.png differ