Skip to content

Instantly share code, notes, and snippets.

View Myndex's full-sized avatar
💭
👁💡👀

Myndex Myndex

💭
👁💡👀
View GitHub Profile
@Myndex
Myndex / stressfulstripes.md
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
Myndex / PhiPhormula.md
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
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 - 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