For Toolmakers — let us know here!

[Myndex]

This thread is only to list links to current tools that use APCA, APCA-W3, Bridge-PCA, SAPC, or SACAM technologies.

If you have a tool you'd like us to checkout and list here, please feel free to post the link and a bit of information about it in this thread, or message me direct. Thank you!!!

The contents of this post are periodically moved to the Master Public List

---

Third Party APCA Tools

Please post a message to have your tool added to the list!

Take note that some of these tools are works in progress, and not all of them have been fully analyzed for accuracy or conformance to APCA standards. We will be starting qualification testing in the near future.

Tailwind

• It's a very cool tool, with a plugin for Figma, make sure to use the latest version as it is now updated to use the current APCA constants. This tool can show either WCAG2 or APCA.

Stark APCA Beta

• Yes, Stark has added APCA to their toolset as an option! It's available across the product line, and included in the free versions. Make sure to use the latest version which is updated to use the current APCA constants. This tool can show either WCAG2 or APCA.

Accessible Palette

• A very nice color selector by Eugene, see his article as well This shows both WCAG 2 and APCA.

Huetone

• Cool interface under development, lots of options. This tool can show either WCAG2 or APCA.

Polypane Color Contrast

• Killian's Contrast app, can show either WCAG2 or APCA.
  • (Killian was the key designer behind the updated APCA demo tool at Myndex.)

Cliam's Contrast

• A neat color checker that allows you to click to find a given contrast level.

Ambient Color Generation Tool

• This tool is designed to generate contrast ready color pallets built specifically for UI/UX design. Unlike other palette generation tools, Ambient generates the colors based on the primary color.

Atmos

• a contrast checker that is part of the Atmos design system.

contrast-suggester.com

Also a GitHub repo too

• Suggests a contrasting color for a given color, font size, and font weight.

Zebra for Figma

• Dan Hollick's Zebra contrast plug in for Figma.

Caravage for Figma

• A Figma plugin to check the contrast accessibility of the selected text. It is still in beta, the developer @simonbrtrnd mentions any feedback is appreciated.

RandomA11y APCA

• this is an interesting take on a tool that gives you the opposite color for the color that you choose.

contrast-checker Vercel app

• This WCAG 2 checker also shows APCA so you can see the relative differences.

Contrast Tools

• Nice clean interface, easy to use. This tool can show either WCAG2 or APCA.

Contrast Checker

• A clever interface that demonstrates the key concepts as well.

APCA Flip Black/White

Also, the GitHib repo

• This is a simple but informative interface, text is only black or white, and it's using APCA to determine when to flip between the two.

Japanese Experimental

Also, the GitHib repo

• This is a Japanese experimental version, it's part of the project for working on aligning Japanese writing systems.

---

BRIDGE PCS VARIANTS

color-contrast.dev

• this is the first third-party implementation I've seen of Bridge PCA, the drop in replacement that's backwards compatible with WCAG2. Nice simple input interface that also gives you suggested colors to improve contrast.

Color Contrast iOS app

• This an iOS app to measure the contrast between two colours in a screenshot or mobile website. The APCA algorithm is available as an option, with the Bridge PCA being used to show the modified WCAG ratio.

---

Browsers

Chrome Dev Tools

• Available as an experimental feature, note that some versions maybe using obsolete constants and therefore may give incorrect results.

Microsoft Edge Dev Tools

• Available as an experimental feature, note that some versions maybe using obsolete constants and therefore may give incorrect results.

---

Code Libraries & Systems with APCA

Color.js

• Comprehensive JS color library by Lea Verou and Chris Lilly.
• See the contrast demo page

SASS-APCA

• a sass library

A11y Color Contrast

• a typescript library

OxyProps/BrickProps

• this is the design system plug-in for WordPress, I'm not quite sure how they're integrating a PCA but they do mention in the docs.

Works in Progress

These are some works in progress, functionality was not complete at the last time I checked, and or may have math or implementation errors. If your tool is on this portion of the list, please feel free to reach out, I'm more than happy to assist.

Leonardo

• The adaptive color theme function has an APCA option, however APCA has not yet been integrated into the color contrast tool or the dataviz tool. The Leonardo tool is pretty cool as it stands.

ROKING-A11Y APCA Evaluator

• Has a visible look up table which changes based on the contrast. Has a pending pull request due to some errors in terms of the exponents and look up.

AdamSzakal APCA-contrast

• The repo is spelled wrong (oops!): https://github.com/AdamSzakal/ACPA-contrast
  Basically looks like a work in progress, does not show polarity in the results.

Visual Contrast Figma Plugin

• Does not seem to work correctly??

https://jolly-feynman-28ea37.netlify.app

• https://github.com/tomreinert/contrast-calculator-2

---

Official Myndex Tools

APCA W3 Tool

• The main canonical demonstration tool. Public beta. The is the candidate for the future WCAG 3 contrast method.
  • Note that this is not fully backwards compatible with WCAG 2 contrast math due to the non-perceptual nature of WCAG 2.
  • Legacy version available on a backup link at this repo.
  • The dedicated domain name is apcacontrast.com

Color Vision Deficiency (ColorBlind) Simulator

• The CVD sim, a clinically accurate simulation of various forms of color insensitive vision (aka color blind), most of the sims are derived from or based directly on the clinically accurate Brettel model. Allows you to process a screenshot of your page design and view several CVD types at once..

Bridge-PCA

• Bridge PCA is a modified tool that is backwards compatible with WCAG 2 contrast, but using APCA technology.
  • In order to be backwards compatible, some design flexibility is given up, but accessibility is substantially improved over WCAG 2.
  • The dedicated domain name is bridgepca.com

SAPC Development Site

• The SAPC research demonstration tool, more detailed results than the APCA tool above, and a clickable "research mode" with technology demonstrators, interactive experiments, and much data about the colors in use.
• NOTE: This tool may not always match the main tool depending on current experimental protocols.

---

Official Repositories

APCA W3

And the npm install is npm i apca-w3

Bridge-PCA

And the npm install is npm i bridge-pca

The Main SAPC APCA SARCAM

This repo right here...

Guidelines for Accessible Readable Design

In development at Accessible Reading Technologies: GARD is a developing set of readability design guidelines.

deltaPhiStar

An alternate and highly simplified contrast algorithm. Still fairly perceptually uniform though less accurate for very high and very low contrast, and it's not polarity aware.

See Stars

Myndex microlibrary for CIE Lstar, for use with deltaPhiStar

Fancy Font Flipping

Related to APCA methods, but separate—this is a demonstrator for when to flip a text color from black to white, based on the luminance of the background. CodePen also available, and also read this Gist article.

Color Parsley

A lightweight but versatile color parsing utility with no dependencies
NPM Install: npm i colorparsley

---

Other Resources

https://linktr.ee/Myndex

This is a linktree of articles and information regarding APCA.

Why APCA™

A brief overview of APCA. This is a good place to start if you are new to perceptually uniform contrast.

Myndex Color & Contrast Resources

A catalog of contrast and color resources.

---

Accessibility Statement for Beta Testers

Beta testers may wish to include the following statement in their sites boilerplate:

There are additional versions in the Accessibility Statements file

---

This website is using the APCA™ readability guidelines for determining visual contrast of text and non-text elements.

This site's visually-readable primary content is designed to meet or exceed the conformance level of: <insert bronze/silver/gold> as defined in version: of the beta APCA Readability Criteria (ARC), which provide improved visual readability, enhancing the actual accessibility for users of this website. If you have questions, concerns, or problems, please contact the accessibility manager at <insert Accessibility manager's contact info here>

---

_{Copyright © 2021-2023 by Andrew Somers. All Rights Reserved. Patent(s) Pending.}

[Munawwar]

contrast-suggester.com - Suggests a contrast color for a given color, font size and font weight.

It's uses HSLuv color space for finding contrast shades, unlike any in this list so far.

Git repo link

[simonbrtrnd]

Caravage a Figma plugin to check the contrast accessibility of the selected text. It is still in beta, any feedback is appreciate 🙏

[cgrobb]

https://github.blog/2022-06-14-accelerating-github-theme-creation-with-color-tooling/ does NOT include APCA, but should. Looks like contrast is via color2k.

[accessresource]

Color Contrast is an iOS app to measure the contrast between two colours in a screenshot or mobile website. The APCA algorithm is available as an option, with the Bridge PCA being used to show the modified WCAG ratio. Any feedback is appreciated.

[Myndex]

I came across this interesting tool: https://randoma11y.com/apca?color=%23c91313

[Myndex]

And another: https://www.color-contrast.dev

[gfellerph]

A sass implementation of the APCA: https://github.com/gfellerph/sass-apca. Feedback very welcome.

[VojtechVidra]

We have implemented WCAG 2 as well as APCA contrast checker in Atmos - Everything you need to create color palettes.

Can be seen live at https://atmos.style/contrast-checker

[brainshift-design]

Hi, my Figma plugin HCL color has been supporting APCA for the past few years! 🤓 https://www.figma.com/community/plugin/889859275438287504

My other Figma plugin, Generator, also has a node that can check both WCAG2 and APCA color contrast: https://www.figma.com/community/plugin/899028246731755335

[drwpow]

👋 Would love to request permission to use of APCA in Cobalt, open-source (MIT) tooling for the W3C Design Token format. Specifically, I’m thinking about adding “tests” to the tool, that run automatic contrast checkers on your design tokens so you can catch regressions. Being able to use APCA would be very handy for designers managing design systems who want to go the extra mile for contrast compliance (and since they can specify their fonts in design tokens as well, they could even test those too).

Love your work, and love this tool!

[cyrezdev]

Hello @Myndex !

I think i've forgotten to mention my Sass library for auto-generate color contrast with APCA algo here...

There it is:
A11y APCA Sass Library
https://github.com/cyrezdev/a11y-apca-sass