Color contrast function [NDS-20]

wwnorton / design-system

The W. W. Norton & Company design system

https://wwnorton.github.io/design-system

MIT License

13 stars 10 forks source link

Color contrast function [NDS-20] #133

Closed sh0ji closed 3 years ago

sh0ji commented 3 years ago

Our books currently use Bootstrap's color-yiq function to set automatic text color on background-color bleeds, but we cannot currently support that in the design system. Let's do some research on this and implement something that can be used to accomplish it.

References

Here's how Bootstrap is handling this now: https://github.com/twbs/bootstrap/blob/2cbb0a941c0a33fc11518061cfd6fad5c0d1c3c0/scss/_functions.scss#L95-L145.
Could we implement the newer APCA algorithm, which is forthcoming in WCAG 3.0? If we can, what would be the risk of using this now?

NDS-20

sh0ji commented 3 years ago

This will probably be helpful in #154 and #153.

dmedjordan commented 3 years ago

Issue linked to JIRA Story: NDS-20

Myndex commented 2 years ago

Hi @sh0ji

Just wanted to mention that if there are concerns regarding backwards compatibility to WCAG 2 contrast, we've released Bridge-PCA, which is backwards compatible to WCAG 2, but using APCA technology. There's a simple demonstrator and how-to at https://www.myndex.com/BPCA/

And both BridgePCA and APCA W3 are available on NPM.

 npm i bridge-pca

 npm i apca-w3

Questions and comments welcome in the discussion forum: https://github.com/Myndex/SAPC-APCA/discussions

sh0ji commented 2 years ago

Very cool, thanks for sharing, @Myndex! And thanks for everything you're doing to improve the way we evaluate color. We'll look into using these libraries.