Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Myndex Myndex

🎯
Focusing
View GitHub Profile
@Myndex
Myndex / PhiPhormula.md
Created August 23, 2022 01:01
A simplified version of the formula for phi that you will remember easilly
View PhiPhormula.md

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;
@Myndex
Myndex / stressfulstripes.md
Created June 21, 2022 15:39
Busy Background Breaks Bulletin
View stressfulstripes.md

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

@Myndex
Myndex / GitHubFlavoredMarkdown.md
Last active June 21, 2022 15:43 — forked from joshuapekera/markdown
GitHub Flavored Markdown Cheat Sheet
View GitHubFlavoredMarkdown.md
@Myndex
Myndex / FlipForColor.md
Last active February 20, 2023 23:47
FLIP FOR COLOR — If you want your text to be either black or white if the user selects some random color, just where is that inflection point? Hint: It's NOT 18% Y.
View FlipForColor.md

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
Myndex / WCAG2vsAPCA_someLightReading.md
Last active March 23, 2023 09:59
WCAG 2 vs APCA • A Contrast in Applied Maths
View WCAG2vsAPCA_someLightReading.md

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
Myndex / HowManyColorsAreThere.md
Last active December 22, 2021 22:31
This Gist is in answer to the question: "How many colors are in CMYK."
View HowManyColorsAreThere.md

How Many Colors in a Bushel?

This Gist is in answer to the question: "How many colors are in CMYK."

Short Answer

CMYK as a color model does not define a gamut, nor does it define a number of colors.

  • A colorspace defines the gamut volume.
  • Bit depth partially defines number of colors.
  • Output device and/or colorspace may place additional limitations of the "number" of colors.
@Myndex
Myndex / ColorSpaces: The Primal Frontier.md
Last active September 18, 2021 23:30
A Brief Look at Math Models for How We See
View ColorSpaces: The Primal Frontier.md

COLORSPACES - The Primal Frontier

A Brief Look at Math Models for How We See

sRGB is the standard colorspace for computer monitors and the web. It is closely related to Rec709, the colorspace for HDTV. Rec709 and sRGB have identical reg, green, blue primaries and identical white point, but they have a different TRC (transfer curve, sometimes referred to as gamma). Neither sRGB nor Rec.709 are linear as both are encoded with a piecewise TRC, for Rec709 the TRC is roughly equivalent to a power function with a 1/2.0 exponent, and sRGB is roughly 1/2.2

The monitor/TVset has an inverse TRC when displaying the signal, essentially unwinding the signial into linear light.

sRGB is normally sent to the monitor in the form of 3 channels, Red, Green, and Blue. These are independent but you can form a cube with them and use cartesian coordinates, though in practice that is not necessarrly useful with sRGB.

Modeling Light and Perception

View 0u+_W!+h_+h3_01d-InWithTheNew!.md

0u+_W!+h_+h3_01d & InWithTheNew!

Modern Password Theory in a Nutshell

By Andrew Somers

In the Beginning, there was the "hard to read" paradigm

So... We've been taught now for years to make our passwords more secure by D0!n97h!n95L!k37h!5 ("doing things like this", i.e. substituting characters with numbers and so forth).

The theory was that by increasing the character set size, password entropy would improve — at the expense of being much harder to read, harder to remember, and harder to type into the hidden void that is the password field. This has long been accepted as "the way".

But does this actually improve password safety? The short answer is "not really".

@Myndex
Myndex / OrangeYouGladIHaveNoLife.md
Last active February 2, 2023 19:37
Orange You Wondering About Contrast? Part I of three on the APCA and why contrast is important. Especially orange contrast.
View OrangeYouGladIHaveNoLife.md

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
Myndex / DarkSideOfTheLighter.md
Last active April 7, 2022 13:32
The Lighter Side of Dark Backgrounds.
View DarkSideOfTheLighter.md

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