Reasonable Colors is an open-source colour system for making accessible colour palettes.
It uses an intuitive system of shades to help you select colours which meet the appropriate WCAG contrast rating, even if you're mixing and matching base colours:
https://reasonable.work/colors/
#opensource #design #ui #uidesign #color #colour #accessibility
extra notes on color contrast: don't use WCAG, use APCA
@chriswood while I absolutely love this, I want to point out to the folks who may not know that WCAG's simple contrast algorithm is actually not necessarily the best tool for determining what colour combinations are best, for a couple reasons:
- it doesn't distinguish between foreground and background colours, when this actually makes a big difference
- it doesn't make that big an effort to distinguish between what contrasts are appropriate for what situations, beyond the vague idea of "large text"
- it isn't really as friendly since it's not perceptually uniform, meaning that a contrast of 4.5 seems like half 7, but there's actually a big difference
right now there's a big project to create a separate system that does fix these problems and it also works as a percentage rather than a weird number between 1 and 21: https://github.com/Myndex/SAPC-APCA
in case anyone else also finds this helpful!
re: extra notes on color contrast: don't use WCAG, use APCA
@clarfonthey @chriswood Important to note that the APCA is still being refined. Best to pick a palette that meets both the WCAG 2.2 and the APCA guidelines, for now.
On top of that: yellow has great contrast against dark colors; however, yellow and red are autism-unfriendly colors that can trigger overstimulation. They’re fine if you de-saturate them by darkening them (brown/brick-red) or lightening them (pale yellow, pink).
Furthermore, remember that you don’t actually want your APCA contrast to be too high on dark themes (unless you’re making a high contrast theme for users who explicitly request one, e.g. using a prefers-contrast media query). White text on a black background can trigger halation in astigmatic users. Lighten the background ever so slightly to create a soft “glow” capable of minimizing the halos, and make your foregound colors no brighter than #eee (#feb is about as bright, for instance).
I wrote about this in more detail in the “about custom colors” section of a post of mine.
re: extra notes on color contrast: don't use WCAG, use APCA
@Seirdy @chriswood fwiw, you do not want to choose colours that fit both criteria because it seriously limits your options. there's the standard Bridge-PCA specifically designed for this: https://github.com/Myndex/bridge-pca
but here's an excerpt from the readme:
No Free Lunch: while BridgePCA corrects the many false passes and improves readability, the cost is that there is reduced design flexibility due to the fact that to maintain backwards compatibility, some contrasts are forced higher than they actually need be.
...
But if you need a standards compliant method that also improves readability this is it. If on the other hand you do not need to abide by the letter of any particular standard, you may want to consider the more flexible full APCA solution.
basically, unless you're legally or otherwise obliged to follow WCAG 2, you're 100% better off just using the proper APCA algorithm. and while it can change, again, unless you're legally obliged to follow the standard, you should be fine just following the numbers as they show up, since the changes that will happen at this point are rather small and won't really affect your values more than a few percentage points
