| // 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 |
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
- 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).
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.
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
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%)
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
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:
This Gist is in answer to the question: "How many colors are in CMYK."
CMYK as a color model does not define a gamut, nor does it define a number of colors.
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.
By Andrew Somers
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".
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