Leonardo

Generate colors based on target contrast ratios. Visit at and on npm as `@adobe/leonardo-contrast-colors`

[Leonardo @Leonardo_Color]

We’ve just released some major updates to https://t.co/8iUFZLuISz to improve the experience of creating accessible themes for design systems!
🧵
#designsystems #accessibility #colorcontrast #ui #ux #colorsystems

[Leonardo @Leonardo_Color]

Learn more about these new features here: https://t.co/57EX23AXH9

#datavisualization #datavis #accessibility #color #colorsystems #designsystems

[Leonardo @Leonardo_Color]

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

[Leonardo @Leonardo_Color]

Learn about these updates:
https://t.co/sNysqhRMoD

[Leonardo @Leonardo_Color]

We’ve just released some major updates to https://t.co/8iUFZLuISz to improve the experience of creating accessible themes for design systems!
🧵
#designsystems #accessibility #colorcontrast #ui #ux #colorsystems

[Leonardo @Leonardo_Color]

✨ Interpolation smoothing
✨ Polar CAM02 (JCh) support
✨ OKLAB and OKLCH support
📦 Download scales as SVG gradient
📦 Download generated theme UI kit
💻 CSS properties output
🪙 Design Token output
And much more…

[Leonardo @Leonardo_Color]

🔍✨ 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

[Leonardo @Leonardo_Color]

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

[Leonardo @Leonardo_Color]

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

[Leonardo @Leonardo_Color]

📦 Bulk import hex values without a "#" for better support with Sketch and Figma workflows

[Leonardo @Leonardo_Color]

New improvements to Leonardo have been released!
[🧵 thread]
Details to updates are documented here: https://t.co/JwY2FFcpOD

[Leonardo @Leonardo_Color]

🎨 Custom color outputs based on W3C Color Module Level 4 spec (https://t.co/tF2CK1G8PN)

[Leonardo @Leonardo_Color]

@SebacicA11y Desktop experience will be much easier. We have much to improve on the mobile experience 😇

[Leonardo @Leonardo_Color]

@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

[Leonardo @Leonardo_Color]

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

[UX Collective @uxdesigncc]

Creating contrast-based themes with Leonardo — by @NateBaldwinArt https://t.co/GnEfd8dKGL

[Leonardo @Leonardo_Color]

@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 👍

[Leonardo @Leonardo_Color]

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

[Leonardo @Leonardo_Color]

Leonardo gives designers and engineers a solution for implementing lightness and contrast controls in your product, making #accessibility dynamic.