Building contextual utilities
In collaboration with Claude.AI from Anthropic, late last month WE created a Contrast Compass prototype. WE deployed the prototype using Vercel instead of Github Pages.
Motivation
I largely wanted to form an opinion on the new LLM released, specifically it's Artifacts Features preview that you have to turn on. I saw a presentation at a private Frontend conference presented by another speaker on their new version of a palette-based solution contrast chaser tool to assist users making quick decisions on passing color combinations. The conference speaker's new app is great, so was their previous version, unfortunately neither is open to the public or on a roadmap to open-source. Not all the developers I support can use the tool for that reason, but I have been using and evangelizing their app for those that can, as it was the best I had seen for decision making. Their repository is private and not open to me contributing and addressing the following:
Baking in zoom from design phase and using native controls to ensure full keyboard accessibility was in my initial prompt. I have extensive experience building visualizations as a service which translated well to instructing the construction of utility web-based app that can be launched with full context, which was accomplished in the initial set of instructions as well.
Selective community feedback
Did some internal user testing and it was clear the tool really only makes sense if iterating over a live website localhost, production, or an environment in between, which was the intention but hadn't yet built chrome extensions, or axe-core plugins and wanted to iterate over the interaction and design of the tool. I didn't realize just how good Claude could write extensions, be sure to instruct manifest version 3.
Browser extensions enable live preview of suggestions
With a clear definition of done WE created multiple Chrome + Edge Browser extensions. First, WE made a popup and then developer tools panel in the dev console. If you haven't made extensions before, there are plenty of them on github.com if you need inspiration and a starting point before interacting with AI.
The only gotchas doing browsers extensions is security permissions both at the client and the site auditing, to do live previewing of theme changes with Contrast Compass browser extension, users and organizations have to give full access. So when I ship it for those that work at places that lock down such extensions I will need to provide an npm package they could import in non-prod environments that would allow them identical features of the extension.
When I discovered not everyone could use without alternatives I prioritized getting out a plugin to be used with audits.
Five months ago I open-sourced a containerized auditor where a user just has to pass routes and they will get a report for each route: https://github.com/jsdev/playwright-axe-audit, once I release my plugin I will push the changes to playwright-axe-audit container to include plugin by default, and create a URL showing what these tools do as marketing is a big part of bringing awareness to the tools people put out there.
Prioritizing a plugin for axe-html-reporter
An axe-html-reporter plugin which I know will be ready and released this month because it's actually done... but the as you read on, you will see testing exposed "not ready for primetime" issues with the Contrast Compass suggestions, and I don't want to give anyone a reason to dismiss the tool at launch, so working on a definition of done for a tweaked algorithm that beats Adobe.
领英推荐
Axe-core html reporter already gives us the things we our app was built, the rule itself tells us if AA or AAA, which can be configured by those using axe-core to conduct audits. These reports are usually given to teams or teams run them to generate JIRA bugs, but rather than create a bunch of JIRA bugs, size them and pull them in a sprint, it literally will take minutes to go through all contrast issues and get passing colors once this is launched.
Contrast Compass helping solve audits but needs tweaks
By deploying and testing against real applications, WE were able to quickly identify great use cases for us to clearly come up with a better suggestion algorithm so that color combinations that just miss the mark, pass, for simplicity's sake Contrast Compass initial prototype tried to apply a universal weighting and algorithm not taking account correctly how close was to goal and adjusting its range based on that.
Speed: to market & moving forward with contrast compliance
WE are excited at the speed of progress, not just building, but vetting that WE are on a path to building the right thing.
The tool is being built because for the last three years I have helped over hundreds of development teams across multiple programs and organizations, and color contrast shockingly is one of the ones that teams take entire quarters to address, despite given reports clearly identifying what needs to be addressed. I am confident, once the algorithm is tweaked and vetted, teams will be able to fix their contrast theme, maintain happy stakeholders, and do so quickly.