Reverse lookup table?

[NateBaldwinDesign]

@Myndex this table is very helpful if you come to the problem with the question of "What font sizes and weights can I use for this foreground/background color pair?"

However, it's not very clear how an inverse of this would be resolved -- "What contrast value do I need to meet for text of font-weight X and font size Y on background color Z"? On top of that, I see there are also "Levels"/"Scores", so it would be nice to inject that variable into the same question --* "...and for score level 5"*.

Is that logic, or the table of requirements already somewhere in this codebase? The text version of the lookup table isn't much more helpful, since it doesn't specify score level ranges.

Here's an example use case for what I'm trying to accomplish:
As a designer, I have already chosen a background color for my application (#f5f5f5) and a typography scale (14px, 16px, 18px, 22px ...). I also support font weights of 400, and 700. For each of these combinations, I would like to run a simple function such as:

function APCAContrastValue(fontSize, fontWeight, backgroundColor, scoreLevel) {
    // look up table?
   return contrastValue;
}

For example:

var desiredContrastValue = APCAContrastValue('14px', 400, 0xf5f5f5, 5);
// returns 100

[Myndex]

Hey Nate, to answer:

"What contrast value do I need to meet for text of font-weight X and font size Y on background color Z"?

That is shown on the manual lookup table lower on the page. The background color is irrelevant, in that any APCA contrast value is the same. Or perhaps I should say, the SAPC methodology predicts a perceived contrast relative to either the text or background color, so if a given font needs contrast 60, it does not matter if the BG if f5f5f5 or ccc — contrast 60 will mean a text color of 818181 or 4c4c4c respectively.

At https://www.myndex.com/SAPC/ go into research mode and select "constant contrast" for an interactive demo.

SAPCinverse

If you mean a tool that you can enter a BG color and a text size/weight, that is possible (and planned).

In the JS file at

https://www.myndex.com/SAPC/JS/DEV98G_SAPCsRGB.js

Is a function called SAPCinverse() that will return a color based on a BG color and a target contrast.

Also, the index file https://www.myndex.com/SAPC/ (and also /APCA/) includes lookup tables that are useful for interpolation.

The manual lookup table, lower on the page, indicates the contrast needed for a particular font size and weight, and I think that is what you are looking for?

As for scoring levels, there is an obsolete set of tables that were part of the discussion here:
https://www.w3.org/WAI/GL/task-forces/silver/wiki/Talk:Visual_Contrast_of_Text_Subgroup

Note these are OBSOLETE relative to the current constants, they have not been updated as the way conformance and score levels is being handled is not clear at the moment.

For the time being, focus on "Score 4" and the current table displayed lower on the page at https://www.myndex.com/SAPC/

As this is all still a work in progress, some of these finer aspects are still being worked out.

[alex-page]

I am building an app to visualise what @NateBaldwinDesign is talking about. I think this would make the APAC understandable to designers and developers. I hit a wall when trying to link the contrast number 66 to a value in the lookup table.

App	Look up table

This content is super useful. However I didn't feel it was a definitive.

90 • Preferred level for fluent text and columns of body text. Also a suggested minimum for extremely thin fonts. Lc 90 is a suggested maximum for very large and bold fonts (greater than 36px bold), and large areas of color.
75 • The minimum level for columns of body text. Also, should be used for any text where readability is important. "Sort of" like 6:1 to 7:1 relative to WCAG2.
60 • The minimum level recommended for readable content text, that is, text you want people to read. "Sort of" like the old 4.5:1 in WCAG2.
45 • The minimum for larger text such as headlines, and large text that should be readably fluently. "Sort of" like the old 3:1 in WCAG2.
30 • The absolute minimum for any text, including text for spot reading, and the minimum for "understandable" or "uniquely identifiable" non-text such as icons. Large discernible-only non-text content can be below this however.
15 • The absolute minimum for any non-text that needs to be discernible such as buttons, but does not include fine details. Designers should treat anything below this level as invisible, as it will not be visible for many users.

My current understanding is a color #ffffff and background #FF4500 returns an APCA value of -66. This means it should be used in everything that is mentioned above from 15-66. ✅decorative text, ✅ spot reading, ✅ icons, ✅ headlines, ✅ large text, ❌ body text, ❌ important readability, ❌ fluent text, ❌ columns of body text, ❌ extremely thin fonts.

Are designers and developers meant to interpret what font size and weight is "spot reading" and "fluent text"? Do they choose if font-weight 100 is extremely thin and 200 is okay? Or is there a system that enforces these definitions? I noticed the scores however I am unsure how to calculate a score. Is there any guidance that can be provided on determining if combinations of font-size font-weight color and background pass or fail?

[Myndex]

Hey Alex @alex-page

Sorry about this, I was trying to simplify it and I think I made it more complicated.

• I am in the process of separating tables per use case.

• The "general" guidelines are not definitive, they are "soft"

We are getting to a point where I am thinking a group of users and myself and some others of the team just talk about these kinds of things on a zoom call — I've been pushing this project nearly three years, so I might be so very familiar with something I might not realize on first encounter it is challenging.

As for scoring, that is an early concept with WCAG_3 — the conformance model is still evolving.

I created a new thread #39 which has some more recent work and lots of cites, references, infographics...

#39

Let me know if that answers you?

Thank you!

Andy

[alex-page]

This is excellent thank you. I would love to help make this as simple and understandable. It is excellent work 🎉

[Myndex]

This is excellent thank you. I would love to help make this as simple and understandable. It is excellent work 🎉

Thank you Alex.... @alex-page

I made a tweet recently that implied the underlying issue with the related translation:

Andy's Babble Translator

Andy Babbled:

"You are welcome to repeat that statement for a plurality of iterations resulting in a desired effect of amplified emphasis."

Translation:

"You can say that again!"