
Show HN: A curated set of colour combinations - alexpate
https://duo.alexpate.uk/
======
spennant
I pasted a couple of these into ShapeFactory's Duotone and got really nice
results ( #3
[https://duotone.shapefactory.co/?f=3a97d4&t=1a2037](https://duotone.shapefactory.co/?f=3a97d4&t=1a2037)
) For the curious, what their tool seems to be doing is: 1) grabbing a photo
from Unsplash, 2) cranking down the color saturation to "-100" (essentially
making it B&W) , 3) embedding it into an SVG and applyig a filter that
leverages 'feColorMatrix'. Very clever.

------
eddyg
I wasn't sure what _" only AA accessible"_ referred to, but apparently it's a
rating[0] to mean at least a contrast ratio of 4.5:1 (a "AAA" rating requires
a 7:1 contrast ratio).

This site[1] lets you check the rating for any color combination, if you're
curious.

[0] [https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-
cont...](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-
contrast.html)

[1] [https://accessible-colors.com](https://accessible-colors.com)

~~~
petepete
Recent version of Firefox have the ability to check ratios built right in. I
use the tool daily.

[https://developer.mozilla.org/en-
US/docs/Tools/Accessibility...](https://developer.mozilla.org/en-
US/docs/Tools/Accessibility_inspector)

------
gen_greyface
I can never figure out a nice color combination by myself, no matter how hard
i try. I have to resort to online resources such as this in the end.

------
phkahler
19, 63, 73, and 89 are nearly unreadable to me. Not as bad as the red on black
error text in my linux terminal though.

~~~
kamy22
I agree with you, 63 is terrible to read :D

------
gnulinux
I wish there was a curated set of color palettes. I'm really bad at colors,
but occasionally enjoy drawing/designing things. But colors always confuse
since I have no idea which ones to pick, there are infinitely many of them!

~~~
shredprez
I think you’ll appreciate ColorHunt, a wonderful 4-tone palette library (no
relationship to the site, just a happy user).

[https://colorhunt.co/](https://colorhunt.co/)

------
DanBC
This is nice and I like lots of these combinations.

I'm curious about accessibility. Are any of these combinations harder to use
for people with colour-blindness? How would i test for that?

~~~
Nekobai
You can test individual colours using tools like
[https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)

To check the colours on a page (and many other accessibility violations) you
can use a bookmarklet like HTML Codesniffer (
[https://squizlabs.github.io/HTML_CodeSniffer/](https://squizlabs.github.io/HTML_CodeSniffer/)
), the tools that are integrated with Firefox and Chrome's devtools, or CLI
tools like Axe or Pa11y.

------
mhb
Very nice. I don't know if it would be useful but it would be interesting to
have a link to where a combination was seen on the web (for the ones that were
found there).

