Now Leonardo supports color scales for data visualization!
📈 Sequential & diverging scales
📊 Qualitative palettes
🔍 Contrast & color difference reports
👁 Colorblind-safe-palette generator
📄 Download Tableau XML
📦 Download SVG gradients or colors
🔍✨ RFC ✨🔍
We are investigating an update to the Leonardo npm package `@adobe/leonardo-contrast-colors` and would like to hear your thoughts. If you rely on Leonardo to generate your color system, please take a look: https://t.co/WXRxWWK07D
A lot of design systems utilize transparency for colors. Evaluating WCAG contrast compliance can be tricky for translucent colors, so we've added in alpha transparency support in Leonardo's contrast checker
https://t.co/sXM6XqPntI
#a11y#designsystems
Need a color contrast checker that works for more than just RGB, HSL, or HEX? We've got you covered for LAB, LCH, HSLuv, HSV, and CIECAM02. #a11y
https://t.co/sXM6XqPntI
@SebacicA11y That will calculate the contrast of your key color and enter that contrast as a ratio. Then the same color will be output in the color generation
@SebacicA11y If the native picker has hex format, you can do it that way, alternatively you can click “add bulk” (box icon) and paste any number of hex values in from there. If you want the brand color to be retained, select “add as swatch”.
@vavroom@mattmay Colors are generated by target contrast ratios using WCAG formula for relative luminance; accessible color generation is the primary goal of the tool 👍
Theming with Leonardo gives you more control over your color scales for when you need to add new swatches, or increase contrast of existing colors.
Everything you edit in the UI gives you configurations for the npm module too.
#uidesign#designsystems#closethegap