Myndex

Where's The Luv?

An Examination of the CIELAB and CIELUV colorspaces.

It is exciting to see so many new color features for the CSS Color Module. There are nevertheless a couple items that resulted in a "raised eyebrow response". This Gist is mainly going to focus on one: the use of the LAB version of LCh instead of LUV LCh, which may be better suited for the task but appears to have been dismissed as if irrellevant.

I DISAGREE. Luv is in common use and very relevant, and LuvLCh or one of the several LuvLCh variants has distinct advantages over LabLCh for use cases such as choosing color for web content for displays.

Myth Destruction

Myndex

What's Up With Markdown

GitHub Flavored Markdown Cheat Sheet

This is intended as a quick reference and showcase. For more complete info, see John Gruber's original spec and the Github-flavored Markdown info page. This cheatsheet is modified from Joshua Pekera'a cheat sheet for "Markdown Here", but this page is just GitHub Flavored Markdown

Table of Contents

Headers
Emphasis
Lists
Links

Myndex

The Lighter Side of Dark Backgrounds

Is light text on dark harder to read than the more common dark text on white? Or are there other factors?

First, just as an FYI, dark backgrounds are a problem specific to the old WCAG 2 math/method. And for that matter, evaluating predicted contrast using some other ratio maths. And let's not forget: maths like Weber and Michaelson are about threshold, but readability is far suprethreshold, so those methods are not particularly useful.

Polarized Opinions on Polarized Colors

There isn't significant scientific consensus that goes much beyond user preference, and indeed some people (such as myself) much prefer reverse, light text on dark. The various dark mode extensions are quite popular for this. Also total screen luminance and the ambient lighting all are signficant here, and again one of the indicators of the importance of personalization.

Nevertheless, the old WCAG 2.x math badly mangles dark color pairs, in the randomized tests last year, dark color pair

Myndex

Will Work For Color

Color Manglement and Working Spaces.

A continuation of the Lab/Luv Gist

Let's not forget the many other color appearance models and methods. CAM02-UCS, RLAB, LLAB, IPT, CAM16 which is Luo's work in progress, etc. Many choices beyond the 44 year old Lab. The fact that Lab is one of the PCS used in ICC profiles is notwithstanding. If you look through profiles, you'll see that Lab is typically used as a PCS in profiles for CMYK and printing, while RGB space and monitor profiles use XYZ for the PCS.

Among other things, XYZ is computationally simpler than Lab. XYZ is infinite/unbounded••, you can transit through it without much penalty assuming the same source and destination illuminant (D65), here the fact the PCS is "D50" is essentially irrelevant: we are never really "in" D50, just passing through. Gamut mapping, soft clipping, etc. are usually not a huge concern going from a D65 RGB to another D65 RGB especiall

Myndex

Phi Alternate Expression

The formula for phi can be reduced to a positive exponent, multiplication, and addition:

{{bi|left=1.6| \phi = 5^{0.5} \times 0.5 + 0.5 }}

This is clear and easy to remember, demonstrates interesting relationships, and is less obtuse than the formula as usually written. This can also improve computational efficiency (of admittedly marginal importance). Here is an example for javascript:

 const phi = Math.pow(5, 0.5) * 0.5 + 0.5; // Somers simplification

Myndex

Orange You Wondering About Contrast?

What is contrast anyway? In this context, we are talking about the contrast of text on a background, and more directly, how well you can read that text. While this may seem simple in concept, the reality is not only challenging but increasingly important. The internet destroyed the printing industry nearly overnight. Where there were once magaine and newsstands, there are now empty spaces. And reading in general had dropped 40% in the last two decades.

And the internet is hard to read. Too hard, and it shouldn't be. There are some old existing standards on contrast and readability, some dating back to the last century, that are part of the problem. When WCAG 2 was being worked on nearly two decades ago, computers used bulky CRT monitors, and the iPhone was still on the drawing board.

Back then, cell phones were nothing but a phone, websites were only on your desktop/laptop, and those sites invariably used the same core websafe fonts & basic HTML colors. Served over

Myndex

// An object of Kelly's 22 colors, converted from rjurney's array
// Color names are camelCase, and 'ish' was removed from all
// The two-name colors have an alternate name as well, such as:
// example: orangeYellow lightOrange manilla is "#e1a11a"
// As for "maximum contrast", I do not endorse that claim

// theory - https://eleanormaclure.files.wordpress.com/2011/03/colour-coding.pdf   (page 5)
// kelly's colors - https://i.kinja-img.com/gawker-media/image/upload/1015680494325093012.JPG
// hex values - http://hackerspace.kinja.com/iscc-nbs-number-hex-r-g-b-263-f2f3f4-242-243-244-267-22-1665795040

Myndex

Let's Flip For Color

Q: I want my text color to switch to black or white, depending on the background color the user chooses. Just where is that flip point?

Short Answer:

Calculate the luminance (Y) of the given color, and flip the text either black or white based on a pre-determined middle contrast figure. For a typical sRGB display, flip to white when Y < 0.36 (i.e. 36%)

Longer Answer

First I want to acknowledge the massive amount of misinformation on the internet on this particular subject. The fact this field is still a subject of active research and unsettled science adds to the fun. I came to this conclusion as the result of the last few years of research into a new contrast prediction method for readability.

The field of visual perception is dense and abstract, as well as developing, so it is common for misunderstandings to exist. For instance, HSV and HSL are not even close to perceptually accurate. For that you need a perceptually uniform model such as CIELAB or CIELUV or CIECAM02 etc

Myndex

WCAG 2 vs APCA Contrast Shootout

A Response to Comments Regarding APCA vs WCAG2/1.4.3

We have on occasion heard the comment "APCA produces less contrast" — this is not true, though I see how some might come to that conclusion, it does not consider the totality of the new guidelines.

APCA does not produce contrast. APCA does nothing to the colors, it only predicts how a human will perceive them, and their effect on readability. And yes, if you try to compare APCA to the WCAG2 math it might appear that APCA allows lower contrast in some specific cases where one color is white or very bright, but across the entire range, APCA clearly, consistently, and correctly predicts contrast, while WCAG2 more often than not allows lower contrasts to pass that have even been shown to be unreadable, even with normal vision.

Here's an example a user brought to my attention recently:

Myndex

Busy Background Breaks Bulletin

• Question: With text overlapping a picture of a person with a black-and-white-striped shirt. No matter what fixed "color value" you choose or what system you express it in (RGBA, APCA, etc.), you're going to have some of your letterforms appear in an area of insufficient contrast. (e.g. if you choose a dark color, your letters won't be readable on top of the black shirt stripe and visa versa for a light color).

Spatially Simplifing Stressful Stripes

Funny you should mention this. One of the experiments that we use in the lab for determining the middle point of perceptual contrast, specifically involves putting text against stripes of black and white.

The spatial frequency, in other words the size of the stripes relative to the font, is substantially important. As is the overall size and weight of the font. If I understand what you are asking for — maximum contrast at any given point, the results may not be what you expect. Here are examples.

Text on B&W