Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Orange You Wondering About Contrast?

Orange You Wondering About Contrast?

Technically black on white and white on black DO NOT have the same contrast. Contrast is not about the difference or distance between two colors. I mean, colors are not even real — they are just a perception that mostly occurs in your neurological system.

Like color, contrast is also not real, it is a perception, and that perception is mainly neurological in nature. There are many factors that play a significant role in the perception of contrast outside of color distance. If you are interested in a slightly deeper dive, please see the Visual Contrast Wiki, which I am trying to keep as concise as possible: https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup

Perceptually, white on black text can be easier to read for some users, depending on ambient conditions and a user's impairments. Some of what you seem to be indicating sound more related to reflected materials, which do not necessarily apply to considerations for self illuminated displays.

In terms of readability on a self-illuminated display, there is no consensus on if dark text on light or light on dark is actually "better" in terms of best fluent readability, and some studies I've read on this were flawed in approach for not taking into consideration other highly relevant factors. But the better studies more correctly show that it is situational and dependent on the user and specific user impairments and user needs. If anything, this points clearly to personalization as the best practice.

Contrast Tools

The official tool is in the https://www.myndex.com/APCA/ directory — but in the /SAPC/ directory is the beta development tool, it has a feature on it called "research mode", and if you select "split contrast" there is a simplified version of the middle contrast experiment we use here in the lab. One thing to notice is that when the light and dark colors are very far apart, the middle contrast is about 2/3rds the way toward the brightest, and not in the middle. Though it is typically centered when the color distance is close.

You'll also notice that the perceptual middle is DIFFERENT when the middle color is the background as opposed to when the middle color is the text. This is due to a complicated interaction with spatial frequency, local adaptation, and other psychophysical effects.

The underlying math in APCA accounts for these aspects of perception (or at the very least, smooths them out into a reasonable averaged approximation), and is perceptually uniform. If you double the APCA value from Lc 30 to Lc 60, the perceived contrast is also a doubling, and vice versa (within the bulk of the range).

White on black vs black on white polarity is built into the math, and the math is polarity dependent such that you must enter the text color in the text inout and the background color in the BG input, or the results will be off. APCA outputs a negative value for light text on dark and a positive value for dark text on light, to emphasize the importance of polarity. "swapping" the two colors may not show a huge difference, but the difference is major if you invert around a center color as shown below.

Oranges and Lemons

(Say the bells of Saint Clemens...)

One of the more infamous failures of the old standard is the orange button scenario. Here are some comparative examples:

OrangeWCAGxAPCA-01

This in particular comes up in the area of SPOT READING, which has different requirements than fluent reading (i.e. reading at best speed and comprehension). looking only at the right side, at the WCAG 2.x results: which can you read better? The white text above or the black text below? Personally, I can't read the black text even with glasses on, though the white text is easy to read. These results are echoed across many test subjects, and indeed, this issue is discussed in many articles across the web.

OrangeWCAGxAPCA-02

But it gets worse for the old WCAG 2.x — look below. After these colors are processed to simulate color vision deficiency, individuals with CVD (incorrectly called "color blind") have an even HARDER time with the black text on this orange than the white.

MyndexCVDprocess

Deeper Dive

If you want the even deeper dive, there is issue #695 over on the WCAG repo here, and there are more experimental results on the perception site, in particular experiment CE_17 has a brief white paper that discusses the underlying technology of the SAPC method and the APCA algorithm.

Continued into part two: The Lighter Side of Dark Backgrounds

Please let me know of any questions.

Thank you!

Andy

Andrew Somers W3 WAI Invited Expert Myndex Color Science Researcher Inventor of SAPC and APCA

@bruce-usab

This comment has been minimized.

Copy link

@bruce-usab bruce-usab commented Feb 16, 2021

Love the prose (and the file name)!

@Myndex

This comment has been minimized.

Copy link
Owner Author

@Myndex Myndex commented Feb 27, 2021

Love the prose (and the file name)!

❤️😎👍 Thank you Bruce!! @bruce-usab

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment