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 some use-case helper utilities #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

kavdev
Copy link

@kavdev kavdev commented Jan 12, 2022

First off, great work on apca, and congrats on publishing it to npm! It's the only algorithm I've used that properly identifies perceived contrast.

There isn't an issue tracker on this repo, so I figured I'd go with this; it probably won't compile, but hopefully it gets the point across.

--

My main use case for this library is determining whether I should use a light or dark color for the foreground text on a background that has a certain color (testColor in the PR code). I'd love to see a helper util similar to this make it in to the library so that people that have this same use case can easily swap apca into their current workflow.

First off, great work on apca, and congrats on publishing it to npm! It's the only algorithm I've used that properly identifies perceived contrast.

There isn't an issue tracker on this repo, so I figured I'd go with this; it probably won't compile, but hopefully it gets the point across.

--

My main use case for this library is determining whether I should use a light or dark color for the foreground text on a background that has a certain color (``testColor`` in the PR code). I'd love to see a helper util similar to this make it in to the library so that people that have this same use case can easily swap apca into their current workflow.
Copy link
Owner

@Myndex Myndex left a comment

Choose a reason for hiding this comment

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

Hey @kavdev Thank you for the contribution!

Yea I have the issues turned off here as the main repo for discussion is Myndex/SAPC-APCA#30

Something else you might also like, I wrote an article on "when to flip dark to light" and also have an associated codePen that demonstrates the concepts, including when to increase the fonst size in the mid range.

Here's a link: https://gist.github.com/Myndex/e1025706436736166561d339fd667493#lets-flip-for-color

As for your idea, I'm thinking a utilities folder is probably in order....

Thank you again!!

src/utils.js Outdated Show resolved Hide resolved
Users can now specify values for light and dark text for a more accurate contrast check.

Co-authored-by: James Harris <[email protected]>
@kavdev
Copy link
Author

kavdev commented Jan 14, 2022

Yea I have the issues turned off here as the main repo for discussion is Myndex/SAPC-APCA#30

Ah, gotcha. I figured a separate discussion project might be the case. Could you add that to the readme of this project?

Something else you might also like, I wrote an article on "when to flip dark to light" and also have an associated codePen that demonstrates the concepts, including when to increase the fonst size in the mid range.

Here's a link: https://gist.github.com/Myndex/e1025706436736166561d339fd667493#lets-flip-for-color

This is awesome! I'll try this out at some point.

@Myndex
Copy link
Owner

Myndex commented Jun 20, 2022

Hey @kavdev @wopian

Sorry it has taken so long to get to this PR, I've just had way too much on my plate...

I have a question, I'm a litle confused by the return statement, it's returning the luminance Y of the test color?

And for the APCAcontrast(), it requires two parameters, text then background, and these can not be flipped.

What were you thinking it should return? because I'd think it should return the chosen color value...?

@kavdev
Copy link
Author

kavdev commented Jun 27, 2022

I have a question, I'm a litle confused by the return statement, it's returning the luminance Y of the test color?

It's returning a boolean. True if dark foreground text on the test color background has a higher contrast score, False if light foreground text on the test color background has a higher contrast score. This obviously ignores font size and probably some other things that go into a proper contrast test, but it's a great approximation and works much better than the other solutions out there that don't use apca.

This was just a sample util that solves a use case. I'm fully open to improving the util or making it more generic. In prod, we use the boolean to determine which css variable to inject instead of supplying color options directly.

@Myndex
Copy link
Owner

Myndex commented Jun 28, 2022

This was just a sample util that solves a use case. I'm fully open to improving the util or making it more generic. In prod, we use the boolean to determine which css variable to inject instead of supplying color options directly.

Hi @kavdev

Got it, I'm thinking of turning the repo Fancy Font Flipping into an independent utility, though I can see the usefulness of having some utilities like that aspart of this library, too.

Expect some changes and additions in the coming months...

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.

3 participants