darekkay / a11y-contrast Goto Github PK

Currently, a11y-contrast focuses on the magic number principle. For color palettes with no or very high magic numbers, this principle might not be very usable. In such cases, it would be good to see all valid color combinations for a given contrast ratio. Colorable seems to be doing just that, but it would be great to have this functionality built into a11y-contrast.

WCAG 3 will change how contrast ratios are calculated. The specs are still under development, but a11y-contrast could already implement the current status.

• https://cliambrown.com/contrast/
• https://www.myndex.com/APCA/
• https://yatil.net/blog/wcag-3-is-not-ready-yet

Note that the spec is not stable yet, which is reflected in the license.

Does this support HSL? I created a .json file of our SASS variable and running npx a11y-contrast color-palette-3.3.json produces the following:

npx: installed 13 in 1.755s
ℹ Analyzing: color-palette-3.3.json
✖ color2.luminance is not a function

Example of the file:

{
	"primary": {
		"$primary-100": "hsl(186, 100%, 94%)",
		"$primary-200": "hsl(190, 94%, 88%)",
		"$primary-300": "hsl(196, 92%, 81%)",

EDIT: Maybe this is because these color name don't conform to the grades 0 - 100?

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.:

• 0-9 (e.g. Open Color)
• 100-900 (e.g. Tailwind)

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