-
Notifications
You must be signed in to change notification settings - Fork 4
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 controls to hide combinations not meeting a contrast threshold #8
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for dazzling-hermann-6e0d29 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Ha! Somehow I missed this PR. Will set a reminder to give a review shortly :) |
@extra808 Sorry that this fell off my radar. I'm looking at your branch, but I don't see the controls. What am I missing? |
@mherchel: What URL are you using? This is what I see following the link from the Netlify bot (https://deploy-preview-8--dazzling-hermann-6e0d29.netlify.app/): ![]() |
Hmmm... I pulled it down locally and did not see that. I'm about to head into meeting and then will give it a closer look. |
It was a user error on why I didn't see it before 🤦 Anyway, this is looking amazing. I haven't done the code review yet, but I do have some requests to the UI:
Let me know if you strongly disagree with any of this. Thank you! |
|
The range input now dynamically shows/hides the table cells based on whether they meet the contrast threshold or not. By default, it's set to '1' so all cells are shown. I changed the input label to "Show colors with at least X:1 contrast ratio," updating the 'X' as the value changes (it's also an ARIA live region so it's announced). As the input is being used, NVDA repeats the input's label, presumably because its content has changed, VoiceOver doesn't. I didn't make the label change to something like "Showing all colors" when the ratio is 1:1 because I don't think it conveys what using the input does as well. |
I thought it would be helpful to add the ability to hide color combinations in the grid that fail to meet a threshold based on the WCAG color contrast calculation. In addition to having buttons to set the threshold at values specified in WCAG criteria (3:1, 4.5:1, 7:1), I included a "range" input so any contrast value can be used.
Here's a copy of this contrast grid branch, I tweaked the URLs so it wouldn't have to be at the root of a domain.