Show HN: A curated set of colour combinations | Hacker News Reader

Show HN: A curated set of colour combinations

duo.alexpate.uk

102 pointsalexpate14 comments

I pasted a couple of these into ShapeFactory's Duotone and got really nice results ( #3 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.

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

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

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

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.

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.

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

most of those are complementary color combinations. those are colors that are opposite each other on a color wheel. They can seem to “vibrate” due to the high contrast in different color channels (RGB). They are sometimes used for attention getting but are not suitable for longer text blocks.

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!

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

https://colorhunt.co/

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?

You can test individual colours using tools like 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/ ), the tools that are integrated with Firefox and Chrome's devtools, or CLI tools like Axe or Pa11y.

Firefox has the Accessibility Inspector tools built in for that: https://developer.mozilla.org/en-US/docs/Tools/Accessibility...

You can inspect items for contrast ratio, and I believe there’s even a color blindness simulator.

I would assume that's part of "AA accessible" combinations which you can toggle on top.

There are accessibility checkers (ARIA) on the web, they can give you a score at least.

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

Reply on news.ycombinator.com