Leonardo: Contrast-based Color Generator

medium.com medium.com3 years ago in #Apps Love197

Depending on the type of color scale you’re creating, and the specific key colors that you input, certain color spaces may work better than others. I’ve written more detail on this and how it can affect color scales and choices in the article Colorimetry and the cartography of color.The primary differentiator from Leonardo and other color accessibility tools is the contrast ratio swatches.Target contrast ratio inputs show generated color swatch beside value for context.These inputs are where you can define the desired contrast ratio you want to generate for the color you’ve configured. By default, the tool will have two swatches: 3 and 4.5. These conform to the WCAG 2.0 (Level AA) minimum contrast requirements for large text (3:1) and normal text (4.5:1).A color swatch is generated using the intersection of your desired contrast ratio and color scale. A dot on top of the gradient makes it easy to see the distribution of swatches along the gradient. The generated colors are displayed in the right panel with the hex value and contrast ratio.Generated colors shown with hex value and recalculated contrast against the base colorThe contrast ratio shown over the generated colors is from a re-evaluation of the generated color against the base color after generation to verify if the generated colors meet your requirements.Due to the restrictions of RGB colorspace, interpolation methods, and the method of calculating contrast, exact contrast values may not be producible. This post-generation contrast value helps you to identify when a generated color may fall below the minimum requirement, so that you can adjust the target ratio in your contrast swatches and ensure you’re within the required minimums.Helpful tip: Leonardo can generate bidirectional contrast swatches. When your base color is not pure black or white, negative values will generate colors in the opposing direction. For example, if your base color is light gray and you want to generate lighter values, pass a negative number into your swatches. URL Out – https://medium.com/@NateBaldwin/leonardo-an-open-source-contrast-based-color-generator-92d61b6521d2Author – medium.comDate – 2019-12-12 06:20:08

Like to keep reading?

This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply