Skip to content

Instantly share code, notes, and snippets.

View Myndex's full-sized avatar

Myndex Myndex

View GitHub Profile
Myndex /
Last active June 18, 2024 18:39
Fast Integer Lightness: brintness

brintness is an integer brightness/lightness/darkness calculation

This is part of an experiment in estimating a perceived brightness while remaining in integer math and using bitshifts to maximize performance.

The Issue

The traditional means to determine the perceived lightness or brightness for a given color value is to first normalize R, G, and B from 0-255 to 0.0-1.0, linearize the values via exponent or more exotic methods (we assume colors are in a gamma encoded color space, such as sRGB), and then after linearizing, creating a linear luminance value by applying coefficients to each of the R, G, B values, adding them, and then finally applying an exponent or more exotic math to find a predicted lightness value.

This is computationally expensive. And even then, we generally miss factors such as the HK effect, and the above as described does not consider the importance of context. In other words, we may say "this is the accurate way" and yet it still lacks in accuracy.

Myndex / colorPalette.js
Last active May 1, 2024 11:55 — forked from rjurney/colorPalette.js
Kelly's 22 Colors of Some Contrast (revised)
// 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 - (page 5)
// kelly's colors -
// hex values -
Myndex /
Last active April 29, 2024 11:14
A simplified version of the formula for phi that you will remember easilly

Phi Alternate Expression

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

$$\begin{align} \phi = 5^{0.5} \times 0.5 + 0.5 \end{align}$$

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:

Myndex /
Created June 21, 2022 15:39
Busy Background Breaks Bulletin

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 /
Last active July 4, 2024 21:06 — forked from joshuapekera/markdown
GitHub Flavored Markdown Cheat Sheet
Myndex /
Last active June 16, 2023 02:59
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.

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 /
Last active June 20, 2024 23:45
WCAG 2 vs APCA • A Contrast in Applied Maths

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

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 / ColorSpaces: The Primal
Last active September 18, 2021 23:30
A Brief Look at Math Models for How We See

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

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".