search

darekkay / a11y-contrast

A CLI utility to calculate/verify accessible magic numbers for a color palette.
MIT License
36 stars 1 forks source link

Support custom grade intervals #1

Closed darekkay closed 9 months ago

darekkay commented 4 years ago

Currently, the color grade format has to be between 0 and 100 (e.g. white-0, green-10, green-50, green-90, black-100). Some palettes use different grade intervals, e.g.:

A custom grade interval structure should be supported within a11y-contrast to support those use cases. This should be either configurable or automatically detected and applied.

Starting point: https://github.com/darekkay/a11y-contrast/blob/master/src/index.js#L47

frankstallone commented 4 years ago

Adding to this. I only found out about this idea of using specific numbers to align to some system. I created ours based on 100 - 1000. Recently, we needed two darker neutral colors, so I created a neutral-1100, and neutral-1200. I would have to create a whole separate palette to conform to this proposed color grade format, and map it to what we have already. We use SASS but this would still be a mess.

darekkay commented 9 months ago

Implemented in version 3.0.0! Any custom grade system is now supported. The example folder includes Radix UI palettes with a range between 1 and 12.