Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add (rough) support for colors with transparency #11

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

alexlande
Copy link

Hey @jxnblk! This is really rough and not tested very well (or at all), but I wanted to see if you'd be interested in this feature before I spent too much time on it. This adds support for checking contrast with rgba/hsla colors.

On a project lately we've been setting text colors using rgba scales of white and black, and I wanted to use colorable for our pattern library, so I tried this out to see if it would work.

Let me know if this would be cool and I can clean it up and make sure it works.

// https://github.com/dequelabs/axe-core/blob/4ef74435ac92a88c602690ac1e243c404f750d00/lib/commons/color/contrast.js#L88-L96
//
// TODO: Attribute this properly.
var flattenColors = function (color, bg) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can replace this with Color().mix, it's just mixing the solid color with a percentage (inverse of the alpha level) of the transparent color.

@jxnblk
Copy link
Owner

jxnblk commented Aug 31, 2016

Thanks! I am definitely interested in supporting reba/hsla colors. It might take me some time to check this out though, so just a heads up 😎

@alexlande
Copy link
Author

👍 I went on vacation right after opening this, so that works for me. I'll clean this up in the next couple of days + ping you when I think it's good to go.

@alexlande
Copy link
Author

Ok, revised this. I've got it running in my pattern library now and checked the results against aXe, all seems well.

Notable things:

  • If a background color has transparency, it doesn't check that combination (because we have no way of knowing what the background color is going to look like visually).
  • If a color has alpha, the resulting object has an rgba key instead of a hex key. I could add hsla too, if you want.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants