Skip to content
Generate colors based on a desired contrast ratio
JavaScript CSS HTML
Branch: master
Clone or download
NateBaldwinDesign Generate adaptive theme (#35)
* added function for creating base scale

* updated demo contrast enhancement

* initial separation for base-scale package

* more refactoring with separate package

* Revert "updated demo contrast enhancement"

This reverts commit 2c932b2.
Modularization of base-scale to unique package moved to separate branch.

* Fixed revert errors. Updated demo for proper contrast multiplier mapping. Added test to generateBaseScale.

* created  function with tests

* added initial generateAdaptiveTheme function with tests

* feat: generateAdaptiveTheme outputs function allowing user to define theme as a function itself

* trivial: removed array brackets from test arguments for colorspace

* added error throw for missing name in color object

* feat: destructured arguments for generateAdaptiveTheme. Added condition to return values or return function depending on presence of brightness value

* updated Demo to use  function

* moved color config vars outside of createColors function for simplicity

* updated param names, demo, and tests. Added docs to README.md

* added output docs to readme

* update readme to show theme example at top of doc

* added site analytics to index and demo (#38)

* removed content that bled over from other branch (#39)

* updated issue templates

* Color converter (#40)

* feat: adding in color converter page

* updated citation on converter

* made logo into link back to index.html

* feat: output proper colors, converter include input formats for cross-conversion

* @trivial

* corrected order of colorspaces in converter for consistency

* feat: added hex to output conversion types (#41)

* fix: changed form to div in converter to prevent refresh on submit (#43)

* fix: corrected midtone color outputs (#46)

* fix: corrected midtone color outputs

* @trivial: removed temporary window export

* chore(release): release

 - @adobe/leonardo-contrast-colors@1.0.0-alpha.3
 - @adobe/leonardo-ui@1.2.0

* added function for creating base scale

* updated demo contrast enhancement

* initial separation for base-scale package

* more refactoring with separate package

* Revert "updated demo contrast enhancement"

This reverts commit 2c932b2.
Modularization of base-scale to unique package moved to separate branch.

* Fixed revert errors. Updated demo for proper contrast multiplier mapping. Added test to generateBaseScale.

* created  function with tests

* added initial generateAdaptiveTheme function with tests

* feat: generateAdaptiveTheme outputs function allowing user to define theme as a function itself

* trivial: removed array brackets from test arguments for colorspace

* added error throw for missing name in color object

* feat: destructured arguments for generateAdaptiveTheme. Added condition to return values or return function depending on presence of brightness value

* updated Demo to use  function

* moved color config vars outside of createColors function for simplicity

* updated param names, demo, and tests. Added docs to README.md

* added output docs to readme

* update readme to show theme example at top of doc

* updated generateAdaptiveTheme with currying

* updated theme output into structured json object

* updates to readme

* reformatting API reference in readme

* @trivial readme formatting

* updated docs, minPositive test, and formatting issues

* updated baseScale argument to be string enum of user input colorScale arguments

* added test to ensure base throws error if not valid option
Latest commit 91660a9 Feb 18, 2020

README.md

Leonardo logo

npm version license Pull requests welcome Web UI

Leonardo

Authoring adaptive color palettes for generating color based on a desired contrast ratio.

For a detailed walkthrough of Leonardo, check out this article.

Project Goals

To make it easier for designers and engineers to leverage color science to create custom interpolations for a value scale, and to make it easier for designers and engineers to conform to WCAG minimum contrast standards by using contrast ratio as the starting point, rather than a post-color-selection auditing process.

  1. Leonardo web application
  2. Show me a demo
  3. What is "adaptive color"?
  4. Using Leonardo
  5. API Reference
  6. Why are not all contrast ratios available?
  7. D3 Color
  8. Contributing
  9. Licensing

Leonardo web application

The Leonardo web application is a tool for designers and engineers to collaboratively build color scales for use in user interfaces. The tool exposes an interface to @adobe/leonardo-contrast-colors's generateContrastColors() function and displays visual aids for modifying the selection of a variable color and the target contrast ratios (swatches) to produce. The URL updates with your parameters for easily sharing links to team mates, and the app displays the specific config parameters when designers send you a version that they approve.

Leonardo web app with color inputs, interpolated gradient, contrast ratio input, and demo of colors applied to text and a button.

Show me a demo

Sometimes it's easier to express what you can do by showing you. Take a look at this demo app and play around with the brightness and contrast controls.

The controls are used to dynamically regenerate the entire UI color palette using generateContrastColors() functions as the end user (you) adjusts their settings. All of the changes to the UI colors are in conformity with the parameters set up by designers in the Leonardo web application ensuring that end users have the flexibility and control that they need while still upholding the design team's color choices.

What is adaptive color?

I've written about this concept in more detail at the following links. The goals of this project are to aid in fulfilling the tooling necessary to make adaptive color palettes available to designers and engineers.

Using Leonardo

See the @adobe/leonardo-contrast-colors README for details on how to use Leonardo in your app.

Why are not all contrast ratios available?

You may notice the tool takes an input (target ratio) but most often outputs a contrast ratio slightly higher. This has to do with the available colors in the RGB color space, and the math associated with calculating these ratios.

For example let's look at blue and white. Blue: rgb(0, 0, 255) White: rgb(255, 255, 255) Contrast ratio: 8.59:1

If we change any one value in the RGB channel for either color, the ratio changes: Blue: rgb(0, 1, 255) White: rgb(255, 255, 255) Contrast ratio: 8.57:1

If 8.58 is input as the target ratio with the starting color of blue, the output will not be exact. This is exaggerated by the various colorspace interpolations.

Since the WCAG requirement is defined as a minimum contrast requirement, it should be fine to generate colors that are a little more accessible than the minimum.

D3 Color

This project is currently built using D3 color. Although functionality is comparable to Chroma.js, the choice of D3 color is based on the additional modules available for state-of-the-art color appearance models, such as CIE CAM02.

The createScale() function is basically a wrapper function for creating a d3 linear scale for colors, with a few enhancements that aid in the generateContrastColors() function.

The Leonardo web app leverages d3 for additional features such as generating 2d and 3d charts.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

You can’t perform that action at this time.