get back to the tool

a g a i n s t

against creates combinations of named colors based on their accessibility ratio.

while practicing as a web-designer i've come to love using named web colors. there is a feeling of declarative magic to them, as they're both words and colors. for example you can say wonderful declarations things such as :

This sentence is written in hotpink.

and if you inspect the code you won't find any hexadecimal value, but the very name of the color in the english language. even if those are only a fixed table associating keywords with value in the CSS standard, it makes me feel closer to my own intentions when designing, or to conversations; i am exploring this dimension through the research project declarations. it also resonnate with the idea of color studies in anthropology, or how naming a color make you see the spectrum differently "because we have a name for that". there is this classic example that brown is actually dark orange from a color space point of vue but we see it as something seperate because of language and contexte.

as with any palettes, there is also the confort of having a set of limited choices. limitations sometimes allow me to think more about the global picture, it forces me to ask what matter or what i mean in simplier terms, instead of losing myself into fine tuning in a infinity of possibilities. while practising it i've developped a familiarity with this collections: there are not too many, i can look at each of them, but there is enough for feeling of discovery, similarly to an artist learning to work with the same box of crayons (which is part of its origin! see at the end).

weirdly enough the simple fact that it is a standard gives me some kind of cultural anchor that i love. that the intentions is to be critical of a standard or to just plainly use it, its usages create some folklore or sub-culture: when i see websites using named color i kind of "get the vibe". there is a minimalism of uses of ressources that echoes to the idea of doing with what we are given, and that can be recognized as aesthetic.

however, when using them i struggled to play with one relative to another, maybe because of a lack of physicality of the collection (i didn't try to print and cut them into small patches), maybe because of the abstractness of them being words instead of values.

i decided that it could be a good occasion to explore the W3C notion of contrast ratio, by picking it as a way to measure this relativeness between named colors. i quickly found out that interesting combinations lies in the spectrum of non-valid contrast ratio value according to the WCAG. as i sure love to be critical of standard, and so does the WCAG themselves, this tool allow you to specifically pick non-valid combination for their interesting vibrant or pastely vibe. this is no statement about the validity of the notion of contrast ratio itself but rather about having a measure to structurate those colors with relativity to each others, and see what kind of aesthetical order it creates. the tool could be expended with other measures later.

the cinicality of forcing a measure on "culturally situated" color names is reflected by the use of the preposition against to express the combination of two colors. this feels a bit absurd to mix a selection of named colors from 1986, that was never thought for the web, with a controversed web accessibility test from 2008. but because of how standard and subcultures operate on each others the combinations it outputs have their own particular webish bittersweet tastes that we can love and hate.


here are example of questions i find myself exploring and saving when using this tool.

backgrounds to write in black, with WCAG valid contrast (removing pastels, black and white) permalink
backgrounds to write in both black and white permalink
backgrounds to write in both black and white, and blue hyperlinks permalink
green backgrounds to write in white, with a pastely contrast permalink
blue on blue combination, readable but not super contrasted permalink
every color on every background color, that have WCAG valid constrast permalink
every color on every background color, that vibrate or fade out on each others permalink
best contrasted color on any background color compatible with black writing, (not surprised to see the default hyperlink blue appears) permalink
colors with the same feeling of intensity on very light grey background permalink
hyperlink colors on black background, with WCAG valid contrast permalink

some context on web named colors.

the web extended colors are the result of merging different standards (namely HTML 4.01, CSS 2.0, SVG 1.0 and CSS3 User Interfaces) and homogenizing clashes. many of those colors originally came from the X11 color names distributed with the X Window System in 1986. however this version didn't include the pastel colors (here's the original list). some years later it was enhanced with Sinclair Paints samples and a set of 72 Crayola crayons, then restructured. then in september 2001, the X11 colors were standardized by SVG 1.0. they finally entered CSS recomendations in june 2011, thought they were already implemented in most browser by 2005. the W3C also have a wiki page about color keywords and a tutorial page were they are grouped, grouped color keywords.


this tool was inspired a lot by other web color initiative such as:


notable alternative named color spaces could include https://xkcd.com/color/rgb/ and https://www.seximal.net/colors. this tool could be expended to those one day.


the logo that you see at the top is a selection of 7 of the "worst" non-pastel colors to write on white .

- doriane in november 2023