APCA

MYNDEX

RESEARCH

APCA

APCA Tools & Apps

As APCA popularity increases, there is a rapidly growing list of tools. Please post a message in the tools discussion to have your tool added to this list, or send me a message—my DMs open on Twitter and Linkedin.

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. When in doubt, check values with the canonical APCA tool.

For Bridge PCA, use the canonical BPCA tool.

Third Party APCA Tools—Systems

Design Systems or Pallette Generation tools

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.

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.

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.

Third Party APCA Tools-Calculators

Calculators and Technology Demos

Achecks APCA Contrast Checker

Nice simple APCA checker. Has a dynamic lookup table that updates with new contrasts.

Polypane Color Contrast

Killian’s Contrast app, can show either WCAG2 or APCA.
- (Also to mention, 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.

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

a typescript library

Colorspace r-forge

an R 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.

Accessibility: Color-Contrast Models

Ian Lyttle’s library on ObservableHQ

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.

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??

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

linktr.ee/Myndex

This is a linktree of articles and information regarding APCA.

Easy Intro to APCA

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

APCA Readability Criterion

Publisck Workging Draft of the developing guidelines for using APCA and related systems and technologies.

Myndex Color & Contrast Resources

A large 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 Bronze Simple conformance level, as defined in version: (Public Beta Working Draft 2023), of the APCA Readability Criteria (ARC), which provides improved visual readability, enhancing the actual accessibility for users of this website. If you have questions, concerns, or problems, please contact the accessibility manager or webmaster of this site. The APCA Readability Criteria is designed to substantially exceed WCAG 2.1, SC 1.4.3 and 1.4.11 guidelines for actual accessibility. If you find you are experiencing a functional problem with text contrast on this site, please forward to the URL to bugreport at readtech.org

⇦ HOME ⇧ UP ONE