Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blue on Black is a "design fail", and other CVD examples. #84

Open
Myndex opened this issue Oct 11, 2019 · 0 comments
Open

Blue on Black is a "design fail", and other CVD examples. #84

Myndex opened this issue Oct 11, 2019 · 0 comments

Comments

@Myndex
Copy link
Member

Myndex commented Oct 11, 2019

Contrast Example Images

I just happened to be reviewing the doc on low vision requirements:

http://w3c.github.io/low-vision-a11y-tf/requirements.html

And figure 10, the image that is intended to demonstrate acceptable high contrast has BLUE ON BLACK text, which is a design fail in general classical design, but moreover should be considered a fail in an accessibility context.

Screenshot:
Screen Shot 2019-10-11 at 10 22 33 AM

The words "Site-Point" are not high contrast, and for Tritanopia, depending on monitor gamma, the contrast could easily be less than 4:1 using WCAG 2.x math. In comparison, the png that is referred to as "low contrast" has a contrast over 5:1 throughout.

Using the Myndex CVD simulator, here are two mappings that show tritanopia for this example:

Screen Shot 2019-10-11 at 10 26 46 AM

Bad For The Example

The blue used in the example does have some red and green in it, otherwise it would appear nearly black or black to a tritan, so certainly this color blue could be used for a general design. Nevertheless, my point is it is a not good to use it in this example of "high contrast" because it definitely is not.

Blue on Black is Totally Whack

Blue has some specific properties in terms of perception that need to be considered, and that limit its use to certain contexts.

BLUE IS PRETTY BUT:

  1. We have no blue cones in our central vision.

    • Blue cones are in our periphery only, so in fact even normal vision is tritanopia in the fovea.
    • This is nature's way of dealing with chromatic aberration, as blue light bends differently due to the shorter wavelength, it focuses at a different spot than red light.
    • Thus by keeping blue out of the fovea, nature improves resolution of fine details.
  2. We have very few blue cones at all.

    • only 2% to 7% of our total cones are S (blue).
    • they are scattered through the peripheral vision only.
    • the low density means blue is not helpful for resolving fine details.
    • the chromatic aberration aspect means blue can actually interfere with vision causing glare, flare, and other issues.
  3. Blue is an insignificant contributor to total luminance.

    • The sRGB/Rec709 colorspace defines blue at 7.2% of luminance.
    • Some colorspaces actually subtract luminance when blue is present.
    • How much darker is blue? Example:

In sRGB, FULL pure blue #0000FF is equal to hex 59 pure green #005900

Screen Shot 2019-10-11 at 11 23 02 AM

This is #59 pure green text on a #FF pure blue background. Can you even see there is text in the blue bar? I can't!

NASA has a good page on designing with blue.

Move Over Mufasa, Y is the Light King

MufasaLightSm

And also, this is an clear example of why using color HUE is prohibited as a means to differentiate design elements. Perceived lightness difference (Luminance contrast, 𝚫Y/Y) is a critical value1 in differentiating adjacent elements. Not just to accommodate CVD, but for ALL vision types.

Color as in hue and saturation is less important than the more critical properties of Luminance (Y) and spacial frequency (size). At the same time, color is not unimportant as hue/sat can beneficially add to the visual experience in terms of information, aesthetics, and subject focus.

Another NASA color science page, this on the importance of luminance in design.

Achromatopsia Example Image

Since we're on the subject of example images and CVD, I'd like to mention that the image used to demonstrate monochromacy is just a standard luminance greyscale of the color wheel.

But that diminishes the reality of that form of CVD, which is often very debilitating. Blue Cone Monochromats and Rod-Only types especially are afflicted with not just a true color blindness (they are the only CVD types that where the term "color blind" should actually be used), but in addition, these rare forms also have very poor acuity (20/60 or worse), poor contrast sensitivity, and also severe photophobia, unable to withstand normal levels of light (especially rod-only).

For a Blue Cone Monochromat, they have no green or red cones, so red appears black, and green may appear very dark, depending on the wavelengths (green does overlap the rod response to some extent).

Using the same full color wheel in the repository, here is a simulation of Blue Cone Monochromacy (left) and plain luminance greyscale (right):

Screen Shot 2019-10-11 at 11 09 48 AM

The more common forms of CVD, such as Deuteranomalous, generally have otherwise normal visual function, including contrast sensitivity and acuity. The rare Monochromats however will typically fall into the low vision category.

Footnote

Footnote 1The most critical values in legibility, and by extension readability, are: a) spatial frequency (which in a practical sense relates most to font stroke width (weight), border line width, but also including letter and line spacing, etc.), b) perceptual lightness difference aka contrast, which can be calculated from relative luminance (Y) as in Weber 𝚫Y/Y or from LAB difference 𝚫Lstar (L* - L*), and c) total luminance (i.e. L in cd/m2 not to be confused with Lstar) relative to where the eye is light adapted to. Color as in hue and saturation is less important than these factors, though not unimportant as discussed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants