New plugin: A11y

[omgovich]

Closes #11

A plugin adding accessibility and color contrast utilities. Strictly follows Web Content Accessibility Guidelines 2.0.

• [x] color.luminance() [0-1]
• [x] color1.contrast(color2 = '#ffffff') [1-21]
• [x] color1.isReadable(color2 = '#ffffff', level = 'AA') — alias for color1.contrast(color2) >= 4.5 | 7.

See updated README for more details, links and examples.

[github-actions[bot]]

Size Change: +460 B (+12%) ⚠️

Total Size: 4.28 kB

Filename	Size	Change
./dist/plugins/xyz.js	701 B	-3 B (0%)
./dist/plugins/a11y.js	463 B	+463 B (new file)	🆕

ℹ️ View Unchanged

| Filename | Size | Change | | :--- | :---: | :---: | | `./dist/index.js` | 1.7 kB | 0 B | | `./dist/plugins/names.js` | 1.42 kB | 0 B |

_{compressed-size-action}

[codecov-io]

Codecov Report

Merging #12 (b9cb4fb) into master (e51856c) will decrease coverage by 0.37%. The diff coverage is 96.66%.

@@             Coverage Diff             @@
##            master      #12      +/-   ##
===========================================
- Coverage   100.00%   99.62%   -0.38%     
===========================================
  Files           20       23       +3     
  Lines          241      264      +23     
  Branches        49       53       +4     
===========================================
+ Hits           241      263      +22     
- Misses           0        1       +1     

Impacted Files	Coverage Δ
src/plugins/a11y.ts	90.00% <90.00%> (ø)
src/colorModels/rgba.ts	100.00% <100.00%> (ø)
src/colorModels/xyz.ts	100.00% <100.00%> (ø)
src/get/getContrast.ts	100.00% <100.00%> (ø)
src/get/getLuminance.ts	100.00% <100.00%> (ø)
src/helpers.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update e51856c...b9cb4fb. Read the comment docs.

[omgovich]

@jeetiss @molefrog @kripod Can I ask you to take a brief look at the new API? Is everything clear? Don't you have any proposals?

[kripod]

This looks awesome, thank you! 🙌

I think the isReadable function may better take an object like { level = "AA", bgColor = "#ffffff" } as its parameter (defaulting to the current values), as there doesn’t seem to be a definitive hierarchy between those two arguments.

[kripod]

After delving deeper into the WCAG 2.2 spec, I noticed there are edge-cases for large text and non-text content. Please search for ":1" to see all the ratios for those cases. I think that an optional textSize parameter provided to the object param above could adjust the levels of AA and AAA ratios accordungly. It should potentially take "base" | "large" | "none" as values, defaulting to "base".

[omgovich]

Hi @kripod. Thanks for your feedback. Agree with your point.

But still wondering about level and other advanced settings =) Not sure do we need that or not (probably we do). It feels like if a developer knows about the "AAA" level, he probably knows about all text size requirements.

The main blocker for me is an easy-to-understand and easy-to-read API. I use color2 in the docs since it's not actually a background color. Just a second one. An order doesn't matter since the method calculates a contrast between two colors. But using color2 as an object key doesn't feel good.

My thoughts about API:

colord('black').isReadable()
colord('black').isReadable('red')
colord('black').isReadable('red', { level: 'AAA' })
colord('black').isReadable('red', { textSize: 'large' })
colord('black').isReadable('red', { level: 'AAA', textSize: 'large' })

[kripod]

That’s a great point, thank you! I love the idea of yours.

Also, I have to mention this is one of the cleanest OSS codebases I’ve ever seen, both in terms of public API and implementation. Not sure if you’re eligible to join the GitHub Sponsors program, but you should definitely consider adding some means of small sponsorship 😉

[omgovich]

Updated the API, docs and specs. Looks pretty IMO.

colord('black').isReadable()
colord('black').isReadable('red')
colord('black').isReadable('red', { level: 'AAA' })
colord('black').isReadable('red', { size: 'large' })
colord('black').isReadable('red', { level: 'AAA', text: 'large' })

[omgovich]

Also, I have to mention this is one of the cleanest OSS codebases I’ve ever seen, both in terms of public API and implementation. Not sure if you’re eligible to join the GitHub Sponsors program, but you should definitely consider adding some means of small sponsorship 😉

Thanks for your feedback ❤️ These words mean a lot to me. GH sponsorship program is not available in my country yet, and colord doesn't have enough starts to be registered in OpenCollective, but I recently added react-colorful to the service: https://opencollective.com/react-colorful