TestParty reposted this
Today we're launching our first open-source tool: TestParty's Accessible Color Contrast Picker. 🎉🖍️ You've probably used a color picker before. 🎨 They're a core part of customizing your digital experience. But to ensure that colors meet accessible color contrast ratios of 4.5:1, takes a ton of work. (Step 1) Pick a color. (Step 2) Screenshot the foreground and background. (Step 3) Test for compliance. (Step 4) Pick another color if it doesn't work (Step 5) Screenshot, again (Step 6) Test for compliance, again. ... (Step 1,403) Congrats you've made your page accessible! Oh wait, but does it meet brand guidelines? 😮💨 ... back to the drawing board... Most stop after Step 1. But for those who don't, this process is WAY too long and complicated, which leads to more inaccessible pages. Unfortunately it's the way web designers, accessibility experts, and engineers work today. Instead, we rethought color picking from the ground up. What if you knew INSTANTLY if the color you were choosing was accessible. Right as you selected it? 💡 ⬇️ Well... Here it is. ⬇️ Now any engineer can use an accessible color picker within their products from the start. We extended react-colorful, one of the most ubiquitous color-picker components to make it ridiculously easy to implement. Our dream is that any place online where you might find a color picker, you'll find an accessible color picker. 🎉 Congrats Christian Rodriguez Ochoa and the rest of our engineering team on this effort! See the pinned comment for a link to the full blog post and npm package for installation. What should our research lab build next for the accessibility and design community? Let us know! 👇🧪
Yes, I’ve been exploring the site and am impressed by the test party's work, particularly their code injection and efforts to build alt attributes for images, making content more accessible through code. However, there are still several issues that need to be addressed, such as generating proper AI-powered alt texts, improving hover and focus color contrasts, handling collapse/expand menus, and more. That said, it’s still far better than solutions like UserWay and AccessiBe.
Giorgi Chigogidze - have you heard about TestParty? I had a chance to get a demo from Michael Bervell last month and found this product to be an innovative offer in the ADA space.
This is fantastic! It would be awesome if you could build an online version of this, or a plugin for Figma, so that this is available to designers too, being, mostly, them who make decisions on colour.
Hi Michael Bervell this looks really useful. Thanks for letting us know about it!
This is so cool! I know I have some UX and Accessibility connections that would love to see this.
Doppeee
So awesome, Michael Bervell and team! 👏🏻
Gotta try this out! Looks really elegant
Cool tool, Michael. This will help move the needle.
Founder & CEO at TestParty | Bringing AI Automation to Accessibility
2wThe two links: (1) npm package: https://www.npmjs.com/package/@test-party/contrast-color-picker (2) blog announcement: https://testparty.ai/blog/contrast-color-picker