Simplified Contrast Guidelines (an alternative to APCA): Introducing DPS Contrast

[Myndex]

A Simplified Method And Guideline For Visual Contrast

The method I am presenting below is a substantial simplification from the previous guidelines I have presented, which some have indicated are too complicated.

𝜟𝜱✴︎ Introducing Delta Phi Star Contrast

DPS Contrast is an extremely simplified math, in fact it's a single line of code, that then relies on common CIE color transformations that are already a part of most color libraries, frameworks, and including CSS.

I consider this the irreducible minimum for an effective, usable, meaningful guideline for text and non-text contrast.

---

DPS Contrast in a Nutshell

TUTORIAL: create Lstar from the piecewise $sRGB$ → $Y$ and then $L^*$ per the standard D65 CIE math (see the See Stars microlibrary), then:

    deltaPhiStar = (Math.abs(bgLstar ** 1.618 - txLstar ** 1.618) ** 0.618) * 1.414 - 40 ;
    
    // ** is equiv to Math.pow

This mainly works for "Light Mode" and does not track dark mode as well as APCA, but the actual result is that dark mode will then end up with higher actual contrast. To emulate polarity sensitivity it's possible to add about $L^c\ 5$ to the results of negative polarity color pairs.

Also, while this is close to parity with light-mode APCA for $Lc\ +45$ thru $Lc\ +75$, The accuracy diminishes significantly outside of that range. For a functional guideline that shouldn't be important, as the critical range in terms of minimum thresholds for primary content text is $Lc\ +45$ thru $Lc\ +75$.

BASIC DPS READABILITY GUIDELINES:

• Delta Phi Star Readability Guidelines are set as simple thresholds similar to WCAG 2.x

  • Linear interpolation is permitted intra-level.
  • These values are based on reference fonts such as Helvetica or Arial.
  • To use a 300 weight font, add $L^c\ 10$ to the contrast threshold needed for normal weight.
    • in other words, if 16px normal requires $L^c\ 75$, then 16px 300 requires $L^c\ 85$.
  • CSS font-smoothing: antialiased is prohibited for 300 weight fonts smaller than 36px and for normal weight fonts which are smaller than 24px.
    • font-smoothing: auto (i.e. default) should be used for small and thin fonts.

• FOR PRIMARY CONTENT TEXT

  • $L^c\ 75$ permits a minimum font size of:
    • 16px normal or 12px bold
  • $L^c\ 60$ permits a minimum font size of:
    • 24px normal or 16px bold
  • $L^c\ 45$ permits a minimum font size of:
    • 42px normal or 24px bold

• FOR SECONDARY CONTENT, "SPOT" READABLE TEXT

  • subtract $L^c\ 15$ from the above values.
  • at $L^c\ 90$ (which calculates as $L^c\ 75$ after subtracting $L^c\ 15$)
    • minimum font size is 11px for secondary content only.
  • secondary content includes things like "copyright" or "placeholder text" or other textual elements that are not directly related to the primary content of the page or primary navigation.

• FOR SEMANTIC NON-TEXT (icons and pictograms)

  • $L^c\ 60$ for thin outline icons or thin line drawings
  • $L^c\ 45$ for solid icons or bolder line drawings

• FOR NON-SEMANTIC NON-TEXT (chart elements or button shapes)

  • $L^c\ 45$ for button outlines, thin chart lines, small pie pieces
  • $L^c\ 30$ for solid buttons, bar charts, large pie pieces

Also for APCA

It might be obvious, the above guidelines could in theory be used with the APCA math as well for more accuracy, and with this same simplified concept.

Additional Information And The Repo

A link to the repo and the FAQ is DELTA PHI STAR CONTRAST FAQ

I haven't built a tool for this yet, however, at LeaVerou's color.js demo site, DeltaPhiStar's part of the demo for when to flip from black to white. In this demo you can compare a number of different contrast algorithms, including WCAG2, APCA, DeltaPhiStar, and others.

Black or White? at color.js

Here's a screenshot comparing DeltaPhiStar to APCA, the boxes with a dashed border around them indicate where DeltaPhiStar is different than APCA, with DPS showing black text instead of white.

This is largely attributable to the the following:

• The difference in how sRGB colors are processed between APCA & DeltaPhiStar
  • DeltaPhiStar using the IEC piecewise linearization and CIE conversion to $L^*$.
  • APCA uses an optimized conversion that compensates for gamma gain.
• APCA is polarity sensitive, DeltaPhiStar is not.
  • as a result, near the flip point for black and white, DeltaPhiStar is slightly under reporting the actual contrast of negative polarity (White text).

_{click to enlarge}

As you can see, is not as accurate around the Extreme flip point, but otherwise in relatively decent agreement, and probably well suited for a simplified guideline.

Thank you for reading,

Andy

Andrew Somers
Color Scientist @ Myndex Research
Creator of APCA and DeltaPhiStar
W3C Invited Expert & WCAG 3.0 Co-Author