GithubHelp home page GithubHelp logo

Accurate Contrast
Using the APCA


INFO APCA Resources APCA Readability Criterion APCA/Main Repo
STATS version downloads  starsplain vanilla JS
APPS APCA Live Demo BPCA Live Demo CVD Simulator
Social twittermastodonlinkedinbluesky

QuickStart:

  • Easy Intro to APCA? This is the simple, plain-language introduction to APCA that you've been looking for. This is an ideal place to start and is an easier version of WhyAPCA.

  • linktr.ee/Myndex In an effort to pare down the mountain of material, this linktree is composed of the essential links, with the most basic at the top.

The Accessible Perceptual Contrast Algorithm

  • Basic Tool & Quickstart Docs The basic APCA demonstration tool with live font examples and general design guidance for designers and developers.
  • APCA Readability Criterion In depth guidelines for accomodating user needs regarding visual content, includes testing methods, conformance models, best practices, and more. Public Working Draft.

General Overview

  • Why APCA? This brief introduction into APCA describes how it solves the problems of WCAG_2 contrast. See Easy Intro to APCA? for the plain language version.
  • APCA in a Nutshell Basic overview for using APCA, including simple use-case based conformance levels. This is a bare bones version, for the deeper dive see APCA Readability Criterion
  • APCA FAQ APCA Frequenty Asked Questions (in development)
  • Easy Intro to APCA? This is the simple plain-language introduction to APCA that you've been looking for. This is a simpler version of WhyAPCA above.

APCA Technical Documentation

Social Media and Forums

Sciencey Stuff!

Maths! Theory! Vision Science! Photons on Parade!

For Developers

Related Repositories

Featured APCA Discussion Forum Threads




APCA Reviewed

A separate page comprised of the following listing of reviews is also available at APCA Reviewed, which is updated more frequently.

Independent Peer Reviews of APCA and
Third Party Comparisons vs WCAG 2

There are several independent researchers evaluating APCA, and additional third party comparitive reviews that include demonstrations of the functional superiority to existing methods. The first few listed below are technical reviews by peers evaluating the APCA math and methods, including journal published peer reviewed papers. Some in comparison to WCAG 2 contrast methods and guidelines.

APCA has been developed in the open for open peer review and discussion, and the reviews listed below were performed independently, the majority were completed without consulting the APCA developers. Reviews listed first are peer or academically oriented, and deal with theory, while reviews listed later are targeted more toward practicioners, designers, and developers.

Known Issues With WCAG 2 Contrast

Discussion with links to third party articles
written prior to the development of APCA

The problems of 4.5:1 as a target for a guideline is that it not only impact those with impairments, but impacts standard vision as well. WCAG 2 contrast SCs affect 100% of sighted users. The inherent problems with the WCAG 2 contrast math have been known for some time and widely critisized. Including studies by others showing that color insensitive types are not well served.

The WCAG 2 contrast specs often cause enough problems for designers that it is ignored and today, some 86% of websites are failing WCAG_2 contrast per an automated survey—though some of these failures are not due to poor actual accessibility, but due to the perceptual inaccuracies of WCAG_2 contrast.

The unfortunate end result is a grave distrust of the WCAG 2.x accessibility standards overall, despite the many other important aspects of those standards.




Myndex Color Resources

Myndex Web Apps

  • APCA Demonstrator The APCA contrast technology demonstrator—it's not as slick as a production tool, but presents the essential functions for design guidance.
  • Bridge-PCA Calculator Bridge-PCA or BPCA is a drop-in replacement for WCAG_2 contrast that is backwards compatible with the existing guideline, but is using APCA technology for improved readability.
  • Color Vision Deficiency Simulator This simulator demonstrates the way someone with a Color Vision Deficiency (incorrectly labeled "color blind") sees colors. This simulator uses the clinically accurate Brettel/Viénot model of CVD simulation for the primary (deuteranopia, protanopia, tritanopia) and there is an experimental blue cone monochromacy sim, based on the Brettel/Viénot concepts.

Featured Articles

On Readability & Contrast

  • The Realities And Myths Of Contrast And Color This popular article is an in-depth primer to vision, color, and contrast for design, written in the most plain language way possible. Features an emphasis on typography and readability needs. Published by Smashing Magazine.

  • Better reading on the web Published by UX Collective (uxdesign.cc). This article discusses and demonstrates the problems with automated testing and WCAG 2 contrast math, methods, and guidelines.

  • Published at Tangled Web (TangledWeb.xyz):

    • Small Text is Medium’s Large Fail The Medium platform has a lot of good features going for it, yet it literally ignores visual accessibility. For a platform that is entirely based around readable content, one would think that it’d be close to State of the Art, instead of the State of Unreadable.
    • Hats off to ALL CAPS Myth-busting the misunderstandings regarding accessibility: are dyslexia fonts useful and the shift in using ALL UPPERCASE LETTERS for various text elements.
    • Getting the Wrong, Right? What does it mean to get something right, if the underlying foundation of that thing is ultimately wrong?
    • Busy Background Breaks Bulletin Examples of how to destroy readability by choosing the wrong image as a background. And also, how to fix it.
    • Please Stop Using Grey Text Debunking one of the worst myths regarding design contrast. THis article went viral in early 2022.
    • What's Red & Black & Also Not Read? Do the WCAG 2 Contrast Guidelines help users with color vision issues? While this is a widely held belief, the truth may surprise you.
    • A Contrast of Errors A look into the history of the WCAG 2 contrast guidelines and some of the problems created by them, and a discussion of the proposed replacement, the APCA (Accessible Perceptual Contrast Algorithm).

Additional Color & Contrast Related Articles

GitHub Gists

Mini articles on technical topics, with examples

Contrast & Color Gists

  • Three Part Series on WCAG 2 contrast problems with comparisons to perceptually uniform models.

  • COLORSPACES-The Primal Frontier A brief Look at the math that helps model how we see.

  • How Many Colors in a Bushel? Just "how many" colors are there? Is that even an answerable question?

  • Part I: For The Luv of Color An article comparing CIE Lab and Luv colorspaces.

  • Part II: Will Work for Color A follow-up article on working spaces and related considerations, including how ICC profiles may not be a great choice for web due to their inefficiency. Introduces the concept of "Web Working Spacelets".

  • colorPalette.js aka Kelly's 22 colors.

Related Threads & Comments (Legacy)

These were some of the larger, in-depth issue threads & posts created on GitHub including the infamous thread #695. These posts contain useful information and research. Some of the information here may be superseded as some of these threads date back to the beginnings of the contrast research project.

APCA—The Revolution Will Be Readable

Tech Articles NOT About Color

Society & Technology

  • Funny you mention Kodak and Xerox In this response to James Biber’s “Theranos, Polaroid and the legacy of dropouts”, I touch on the law of unintended consequences as has repeatedly manifested in the development of modern technology.
  • The Laws of Technodynamics An Illustrated Restatement of Thermodynamics in the Context of Applied Problem Solving Through Technology.
  • Climate Deniers Left & Right There are two kinds of climate deniers. Those that deny there is a problem, and those that deny the best way to fix it.
  • The Unbearable Cruelty of a Finite Existence At first glance, the concept of soul appears rooted in spirituality and religion. In reality the concept of soul is a manifestation of our ego. This very brief yet nihilistic essay leads to a concept on how to create a sentient AI.
  • Ending Polarized Politics Can a 200+ year old piece of math, and modern technology, fix this systemic problem in the US political system?
  • Election Fraud & Other Illusions How conspiracy theory websites gave rise to a widely spread disinformation campaign apparently aimed at voter suppression. And it was (and continues) to be a shocking example of using math and statistics to lie, by "baffling" with bull.
  • Modern Password Theory in a Nutshell Would it surprise you to know that fistsmash passwords aren't really more secure than one you can actually remember? You could say this is 0u+W!+h+h3_01d-InWithTheNew! — In other words, "Out With The Old - In With The New." It's a realistic discussion on password security, with a useful approach to reducing "crackability". HINT: we've all been doing it wrong, LOL. Article at TangledWeb.xyz
  • Improving SEO with Redirects Your server's case sensitivity and URL redirect strategies can affect your search ranking!

Other Tech Gists


Myndex on Other Sites

Myndex is top 3% on Stack Overflow!
profile for Myndex on Stack Exchange, a network of free, community-driven Q&A sites

The Lighter Side of Math & Photons...

The Art and Science of Applied Probability

In this career, I was using Applied Probability Methodologies for the Risk Assessment of short term ROI predictions related to high-variance cash-flow opportunities in finite-sized non-cooperative bidding groups where information is obliquely concealed as a function of multivariate strategies facilitating the predominately range-based tactics driven by randomized but nevertheless deterministic outcomes.

(…Sooo… this is more commonly known as Texas Hold ’Em Poker…)


For the record, Myndex is pronounced:

mind - ex
\ ˈmīn-ˌdɛks \

When George Eastman invented the word "Kodak" one of his criteria was that "it won't be mispronounced". I guess I missed that day. Ooops.


Just how many patent attornys does it take to rotationally engage a helical conducting thread of an illumination apparatus further comprised of a sealed, evacuated glass envelope containing two or more conducting filament holders which electrically connect and physically support a coiled electrically conducting but resistive filament, preferentially fabricated from a tungsten alloy, to the aforementioned helical threads, which further engage into a helical conducting receptacle, such that when an electrical power source of sufficient voltage and current is applied to the receptacle input conducting connectors, the voltage and current is henceforth transferred to the helical conducting threads of the illumination apparatus and thereto across the conducting filament holders and through said filament such that it shall be caused to incandesce and emit visible irradiance according to the laws of blackbody radiators?

The Answer as to how many: a plurality


Welcome to the very bottom of the page!

Here at the very bottom of the page, we dare to ask the question, "do two lights make a dark?"

Click for Answer

YES, two lights make a dark, if together they draw so much current they blow a fuse 💥.

Myndex's Projects

10bit-png icon 10bit-png

A proposal for a compression efficient 10bit variant of png

apca-contrast-checker icon apca-contrast-checker

Checks the color contrast of your color design based on APCA, the candidate contrast method for WCAG3

apca-w3 icon apca-w3

The APCA version, to be licensed for use with guidelines: W3/AGWG.

apcabuttonbuddy icon apcabuttonbuddy

Learn about accessible button contrast then generate your own accessible button color palette

assessing_chart_interactivity icon assessing_chart_interactivity

A repository for experimental environments where we intend to test assistive technology user experience with complex static and interactive charts and graphs.

atom icon atom

:atom: The hackable text editor

auralaccessibility icon auralaccessibility

Aural Accessibility Research Project: A discussion area for ideas relating to guidelines for aural perception.

biography icon biography

Personal biography and background information regarding Andrew Somers

bpca-contrast icon bpca-contrast

A tool to calculate the contrast ratio between any two valid CSS colors.

bridge-pca icon bridge-pca

A simplified version of the APCA math to bridge from WCAG_2 contrast math to the future, while being 100% backwards compatible with WCAG_2 contrast. By "backwards compatible" we mean if bridge-pca passes it, it will automatically pass WCAG_2 contrast.

ccae icon ccae

The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

color.js icon color.js

Color conversion & manipulation library by the editors of the CSS Color specifications

color2k icon color2k

a color parsing and manipulation lib served in roughly 2kB

colorbrew-apca icon colorbrew-apca

This fork is here specifically to integrate APCA contrast methods into the tool for demonstrative purposes.

colorcet icon colorcet

A set of useful perceptually uniform colormaps for plotting scientific data

colorparsley icon colorparsley

A lightweight but versatile mini-lib to parse color strings, objects, or numbers, returning a simple rgba array, and related string utilities. This was developed as part of the basic APCA distro.

colorstyles icon colorstyles

Color-eaSSy — a CSS stylesheet for use in development environments to aid developers with a very large set of classes for color and common stylings.

contrast-color icon contrast-color

:art: Determine the best contrast color to use. Give it a background color and it returns a foreground color (black or white by default but customizable).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.