Project

Color & Design Guidelines for Improving Accessibility of Graphically-Rich Content For Emissive Computer & Mobile Device Displays

  • Private Profile

Goal: The primary goal of the study is the creation of a simplified, unified, and accurate computational model of human visual perception of computer displays in a range of real world environments.

The model will instruct a set of guidelines and recommendations for standards aimed at designers of content and UI/UX, to improve accessibility and better accommodate individual user's vision.

Importantly, impairments such as Color Vision Deficiency (CVD), age related vision impairments, lowered Contrast Sensitivity (CSF), Acuity issues, Critical Contrast, and their affect on reading speed & legibility are considered, along with normal vision.

Date: 1 May 2019

Updates
0 new
3
Recommendations
0 new
0
Followers
0 new
4
Reads
2 new
51

Project log

Private Profile
added an update
This is my interim semi-public but otherwise unofficial response to some questions on the contrast standards for web content.
First, I should point put that I am on record as disagreeing with the current color contrast standards and methods in WCAG 2.x, which I detailed in part in Github issue #695: https://github.com/w3c/wcag/issues/695 (a 74 post thread). And some of the experiments and examples are posted on my site on the subject: https://www.myndex.com/WEB/Perception
NEW STANDARDS UNDER DEVELOPMENT
That said, I can describe the original intent of "4.5:1" but I will mention that we are working on completely revised standards and methods that more accurately model human perception of emissive displays, and that also provide a more complete set of guidelines to address user's functional needs. My specific role is research specific to the psychophysics of visual readability, recommendations for guidelines, and development of tests and methods to accomplish them.
ORIGINAL INTENT
The WCAG 2.x contrast spec and method came from a desire to ensure that those with Color Vision Deficiency would be able to read content on color displays. The decision was made to increase the typical minimum contrast (often recited in other international standards as nominally 3:1 minimum), to ensure that CVD would not have a situation where their color perception deficit caused a reduced contrast to the point of interfering with with readability.
In WCAG 2.x, the current 4.5:1 ratio applies to fonts smaller than 24px for the "AA" level. 7:1 applies to 24px or smaller fonts for the "AAA" level. Bold fonts are allowed to be a little smaller.
THere was some tying the AA and AAA levels to a particular acuity.
LOW VISION DEFINITION
WHO defined low vision and 20/70 and worse, 20/200 as blind. 20/64 and better is considered "near normal" but you need a minimum of 20/40 to drive noncommercially, and 20/30 to fly as a private non commercial pilot.
These designations are of dubious usefulness, and only use acuity, while contrast sensitivity function is in some ways more important regarding visual function.
But neither acuity nor contrast sensitivity at threshold are useful for design standards. These threshold tests are useful for clinical practice in evaluating visual function and disease. Our concern is readability.
MOVING FORWARD
I've pointed out many issues with existing standards elsewhere, so moving forward I'll only say the above concepts are being considered archaic at best. I won't provide any recommendations or guidance based on the current standards.
Instead, in the interest of being proactive, I'd like to offer more useful guidance based on the future direction.
IMPORTANT: Much of what follows below is NOT YET a consensus standard. Instead, consider it the result of research, but NOT a standard to adhere to. Moreover, if you have to "pass" the inspection of some accessibility test, then you'll have to adhere at a minimum to WCAG 2.x until the new standard arrives.
REFERENCE PIXEL
The current size reference standard in CSS is expected to remain: definition of "px" The CSS reference pixel, or px, relates to the visual angle of one physical pixel on a 96ppi display at 28 inches view distance.
APPLYING TO FONT SIZE
This visual angle is 1.278 arc minutes, so a 24px font relates to a "body" height subtending 30.672 arc min of visual angle.
However that is not the actual height of the letters. The body font-size of 24px includes all descenders, ascenders, and usually some leading. The more important metric is the x-height of the font, and/or the cap-height.
As an example, for a font like Helvetica Neue at 24px, the capital M height is about 17.5px and the lower case x height is about 12.5 px.
It is not currently possible in mot user agents to directly set x-height (something being worked on).
ACUITY ISN'T USEFUL FOR DESIGN
One of the persistent problems is using the values of stimulus size for visual acuity (i.e. 20/20 vision etc) as a guideline for how big to make text.
WRONG.
Acuity is the level were you can "just barely make out" what a letter is. That's "legibility" but thats NOT "readability". Readability points to optimum reading speed. If you have a column of body text, you want optimum reading-speed sized text.
GET CRITICAL...
For font size, we have "critical print size" and for contrast we have "critical contrast" — the "critical" relates to the optimum for readability.
See the attached chart of critical size based on VISUAL ANGLE:
Critical Font Size Visual Angle Arc Minutes.png
It should be obvious that if you are going to be displaying something at a distance different than 28" or on a different resolution monitor, that it is the visual angle that ultimately determines how big the stimulus is projected onto the retina.
That said, if your design takes the CSS px as a determinant of the visual angle, then see the attached chart for PX at 28" (ignore the columns for PT, those are there to provide a relative reference to the WCAG 2.x which uses pt in the standards.)
Critical Font Size pt and px 28 inches.png
SPACIAL CASE
Spatial frequency is among the most important factors that determines perceptual contrast, more so than an arbitrary choice of colors. See the infographic below CSF_infographic_4 in it, all the text examples are at the same CSS color.
You'll see it is FONT WEIGHT or put another way, ABSOLUTE STROKE WIDTH that is a critical determinant of PERCEIVED CONTRAST. Higher spatial freq. requires a greater distance between colors to offset the contrast loss.
The fonts in the infographic are all set to a low contrast (less than 2:1) to make the curve obvious by avoiding contrast constancy for the larger fonts.
But in terms of WCAG 4.5:1 — it may be far more than enough, or it may be far too little, depending on context. And we see those examples constantly, and there are several on my perception site.
For normal vision, there are plenty of cases where 4.5:1 using the WCAG math is not nearly enough and well below the critical contrast level for a variety of reasons, and the reverse is also true, all of which has been demonstrated experimentally.
IN OTHER WORDS:
font-size relates to acuity but also contrast, and the font-weight relates to contrast but also acuity, and so does letter and line spacing.
Color difference relates to contrast, and increasing contrast may have a positive benefit to acuity in some cases, but not all. Increasing contrast too much can actually be detrimental in some cases.
GENERALIZED GUIDANCE OUTSIDE A STANDARD
Larger fonts are more helpful for acuity. Because the needs here vary so much, it is especially critical that you allow USERS to adjust font size without breaking the functionality or content of the app or page.
Thinner fonts need much higher contrast. a 16px font (x-height 9px) of weight 200 being used as body text probably needs 9:1 to 11:1 contrast (using WCAG math).
If your overall page is white, and you have a dark div for a text container, and the text therein is also dark, you need more contrast than what WCAG indicates. You ALSO should add padding around the text of at least 1em.
Everyone over 40 has impaired vision, particularly for reading. It's not useful for them (myself included) to zoom text bigger by getting closer to the screen, because presbyopia will actually make their vision worse as the distance gets closer. They need to zoom text while remaining a certain distance away.
Some text that does not require easy reading can be smaller.
THE BEST PRACTICES REALITY
These things are ENTIRELY user dependent, and should be at the user's discretion. There is no "one-size-fits-all" that accommodates everyone fairly.
One thing being discussed for the newest standards are recommendations for user customizability of user agents. Stay tuned as these are all things under current research and discussion.
-ANDREW SOMERS
 
Private Profile
added an update
Have you ever wondered how someone with CVD (color vision deficiency) sees the world? The common term "color blind" is not really accurate for the majority of folks with CVD — most see some colors, but their colors are distorted or limited making color discrimination difficult.
This is a very important consideration for designers — how to design content that remains accessible for people with impaired color vision. One important design guideline is to ensure adequate luminance contrast between adjacent elements. But it is also useful to see how a particular design is perceived.
As part of my research for the W3C/WCAG, I've developed a web-app color vision simulator, which simulates the common red/green deficient forms (protan and deutan), as well as the rare blue deficient (tritan), and the very rare, truly colorblind blue-cone monochromats.
The Myndex CVD Simulator is on this link: https://www.myndex.com/CVD/
It features nearly two-dozen preset images that clearly demonstrate CVD, or you can upload your own images to see how your designs appear to those with various color vision issues.
#Accessibility #ColorVisionDeficiency #WCAG #ColorTheory #VisionResearch #ColorBlind
 
Private Profile
added 2 research items
Rough-draft/outline of work-in-progress on this subject. The conclusions are the result of reviewing the last several decades of published research from researchers including Legge, Arditi, Pelli, etc. as well as the current experiments we are conducting. We were brought to this issue by what appeared to be failings of color pairs assessed by the WCAG contrast math (i.e. false negative and false positive reporting), as well as complaints by designers, and what appeared to be suggested practices or values different than well known standards, including listing incorrect or obsolete standards information in some areas, notably the sRGB conversion function. This led to several months of research, investigation, and experimentation to find the true source(s) of these issues, and provide rational support for a replacement. As it turns out this is more than simply a math problem. In fact the research has shown that the real concern is not so much the WCAG contrast equation, but an overly simplified approach for what is actually a far more complicated subject, that of human visual perception of emissive displays with normal and impaired vision. Contrast ratios, by themselves in isolation, are not useful as an exclusive metric for legibility. Dr. Arditi expresses a similar sentiment in his 2017 paper "Rethinking ADA signage standards for low-vision accessibility" In which he is critical of the lack of real empirical support for various arbitrary contrast standards for signage. For our case — web pages for computer display — determining the contrast between two colors in isolation to the many other factors will not provide a useful nor relevant measure of legibility. To be clear, contrast is very important, but it is directly affected by much more than the luminance ratio between colors.
Rough-draft/outline of work-in-progress on this subject. The conclusions are the result of reviewing the last several decades of published research from researchers including Legge, Arditi, Pelli, etc. as well as the current experiments we are conducting. We were brought to this issue by what appeared to be failings of color pairs assessed by the WCAG contrast math (i.e. false negative and false positive reporting), as well as complaints by designers, and what appeared to be suggested practices or values different than well known standards, including listing incorrect or obsolete standards information in some areas, notably the sRGB conversion function. This led to several months of research, investigation, and experimentation to find the true source(s) of these issues, and provide rational support for a replacement. As it turns out this is more than simply a math problem. In fact the research has shown that the real concern is not so much the WCAG contrast equation, but an overly simplified approach for what is actually a far more complicated subject, that of human visual perception of emissive displays with normal and impaired vision. Contrast ratios, by themselves in isolation, are not useful as an exclusive metric for legibility. Dr. Arditi expresses a similar sentiment in his 2017 paper "Rethinking ADA signage standards for low-vision accessibility" In which he is critical of the lack of real empirical support for various arbitrary contrast standards for signage. For our case — web pages for computer display — determining the contrast between two colors in isolation to the many other factors will not provide a useful nor relevant measure of legibility. To be clear, contrast is very important, but it is directly affected by much more than the luminance ratio between colors.
Private Profile
added an update
June 26-30, 2019: Investigating models for simulating CVD, and measuring various color & contrast assessment methods and their effect on visibility by various forms of CVD.
 
Private Profile
added a project goal
The primary goal of the study is the creation of a simplified, unified, and accurate computational model of human visual perception of computer displays in a range of real world environments.
The model will instruct a set of guidelines and recommendations for standards aimed at designers of content and UI/UX, to improve accessibility and better accommodate individual user's vision.
Importantly, impairments such as Color Vision Deficiency (CVD), age related vision impairments, lowered Contrast Sensitivity (CSF), Acuity issues, Critical Contrast, and their affect on reading speed & legibility are considered, along with normal vision.