Discuss Maximum Contrast Here

[Myndex]

This thread is for the discussion of maximum contrast, and also total screen luminance factors.

As of Sept. 1, 2023, the maximum contrast is specified as:

Max: Lc -90

This implies that it only affects dark mode.

Right now the maximum of Lc -90 is intended for all text and semantic non-text, and possibly for all elements in dark mode. However, we want to conduct a larger study before saying this as an absolute.

What I imagine at some point, is something like:

Lc -90 as a maximum for body text and 1px lines.
Lc -85 max for text larger than 24px and 2px lines,
Lc -80 for very large bold text, and non-text 5px and thicker.
Lc-75 for large/bold when BG is darker than #333
Again to be clear, these are some initial values that are under study.

Light Mode Max?

Light mode does not have a maximum contrast per se, but there is an issue with displays too bright relative to eye adaptation levels.

---

DISCUSS!

[lloydk]

I just checked a few sites that I worked on and I have some buttons that are > Lc -90. I also have a lot of dark mode footers with 14px text that are > Lc -90. Lowering the contrast of one of the footers from Lc -101 to Lc -90 does in fact make it more readable for me.

Here's a codepen that shows more more less what the footer looked like. The footer has poor line height and centered text which contributes to the poor readability.

I added an example at 14px with Lc -90 and an example at 20px with a more reasonable line height. I've also added some CSS variables for Lc -85, -80, -75. I find the 20px example at Lc -80 the most pleasant to read.

[cyrezdev]

Hello,

I agree 💯 with maximum contrast values for dark mode.

I wonder now what is considered as a dark mode? BG is darker than #333?

There my feedback with some questions:
✅ Lc -90 as a maximum for body text
✅ Lc -85 max for text larger than 24px
❓ Lc -80 for very large bold text => QUESTION: font-size considered as "very large"? Larger than 36px (as for Large Fluent) or 48px as with xxx-large applied on a ROOT 16px font-size (1rem)?
❓ Lc-75 for large/bold when BG is darker than #333 => QUESTION: what is large referring to? Only dark lightness limit here or for all the above?

[lloydk]

I wonder now what is considered as a dark mode? BG is darker than #333?

Dark mode is when the Lc is < 0. So #e9cef3 background with a #ffffff foreground (Lc -23.8) would be considered dark mode even though the background color is "light".

❓ Lc -80 for very large bold text => QUESTION: font-size considered as "very large"? Larger than 36px (as for Large Fluent) or 48px as with xxx-large applied on a ROOT 16px font-size (1rem)?

I think that large text is 36px Normal and 24px Bold (not sure about very large, that might be a typo):

Large Content Text

Minimum Contrast: Lc ±45
Fonts larger than ±36px Normal or ±24px Bold

from (from https://github.com/orgs/A11yReadTech/discussions/5#discussioncomment-6776669)

❓ Lc-75 for large/bold when BG is darker than #333 => QUESTION: what is large referring to? Only dark lightness limit here or for all the above?

My understanding is that the darkness limit of #333333 only applies to large text (font size >= 36px Normal or 24px Bold). So Lc -80 if the background is lighter than #333333 otherwise Lc -75.

[cyrezdev]

Dark mode is when the Lc is < 0. So #e9cef3 background with a #ffffff foreground (Lc -23.8) would be considered dark mode even though the background color is "light".

Yes, color is dark, but could we consider it as a "Dark mode" in a accessible way?
In my opinion, dark mode is meant to not be bright...

I think that large text is 36px Normal and 24px Bold (not sure about very large, that might be a typo):

I think the same ;)

My understanding is that the darkness limit of #333333 only applies to large text (font size >= 36px Normal or 24px Bold). So Lc -80 if the background is lighter than #333333 otherwise Lc -75.

I think so, but wondering about limit of darkness same for all types of content.
Rendering text on a "light" dark BG (lighter than #333) does not have same effect as a BG darker than #333...

[lloydk]

Dark mode is when the Lc is < 0. So #e9cef3 background with a #ffffff foreground (Lc -23.8) would be considered dark mode even though the background color is "light".

Yes, color is dark, but could we consider it as a "Dark mode" in a accessible way? In my opinion, dark mode is meant to not be bright...

In the above example neither color is dark and a Lc of -23.8 wouldn't pass any of the guidelines for text content. It was just an extreme example of two light colors that when used together have a negative polarity and therefore would be considered dark mode in the context of the guidelines.

I'm not super happy with the terms light/dark mode. A light theme (usually a light body text background) can have dark mode elements such as buttons, footer, banner, etc. A dark theme will probably have light mode buttons. So there is potential for some confusion.

I think so, but wondering about limit of darkness same for all types of content. Rendering text on a "light" dark BG (lighter than #333) does not have same effect as a BG darker than #333...

Do you any examples where you think the guidelines might not fit?

[cyrezdev]

I'm not super happy with the terms light/dark mode. A light theme (usually a light body text background) can have dark mode elements such as buttons, footer, banner, etc. A dark theme will probably have light mode buttons. So there is potential for some confusion.

I agree 💯

As light/dark terms became the standard wording for such modes, we have to deal with it...

The difficulty is to define what is a light and dark mode on the accessibility side.

Here a link to a recent post on X (Twitter): https://twitter.com/mikemai2awesome/status/1701691579931435091

My answer is (https://twitter.com/cyrezdev/status/1701748702392598576):
• Not dark because too bright (even if blue is darker than light)
• Not really a light mode either, because the background is too dark for good readability in direct sunlight or strong external light.
• An alternative theme?

Do you any examples where you think the guidelines might not fit?

Not yet. But i'm working on a CSS framework (or Classless Semantic Stylesheet) that will generate colors with an a11y-apca-color sass function library (i've almost finished it with the 'silver' level first).

It will help to generate swiftly color-sheme based on one main color.

About the limit to consider a mode light or dark, that could depend on so many factors: normal vision perception on a screen due to luminescence, colourblind vision (i'm concerned by it), degraded vision (i had some personnal feedback from my corneal dystrophy, before i got eye surgery recently. And i know from it that pure white on pure black BG is bad. So good to limit to -90 as max).

[Myndex]

Hi @cyrezdev and @lloydk

Well we's all here'in the rootin' tootin' wild west ya'll... Ev'rone making it up goin' 'long...

No definitions set in anywhere IMO, but in thinking about it critically:

For Content:

The following will make sense using the most distant text colors, white or black. And of course using a perceptually uniform contrast method (i.e. not WCAG 2)

• Dark Mode is all BGs darker than #888888, and this requires light text for content.
• Light Mode is all BGs lighter than #bbbbbb, and this requires dark text for content.

BGs between #999 and #aaa are in a nebulous zone, where there's not a super-clear difference between black or white as a text color, and either way, the contrast is low enough that a large text size is needed.

BGs between #777 and #ccc should not be used as a BG under body text.

Regarding Blue

That is dark mode.

Equivalent grey is about #444.

Blue is vibrant due to chromatic but not luminance sensation, Google Helmholtz–Kohlrausch effect.

Blue like this example is not a significant contributor to luminance at all, and the blue is at a much lower resolution.

Functionally, this is dark mode.

"Back in the old days" when full color screens were first getting started, blue/white was common, as it reduces chromatic aberration effects by removing all detail from the blue channel.

User preference is less accepting.

For reading: luminance is what is most useful, so luminance contrast is the king, so we should first ask how much luminance is a given BG. S cones do not contribute to luminance, so any luminance from this blue is what's picked up by the M & L cones, and it's a scant 7% of total luminance (according to the CIE 1931 2° observer—other models differ...)

Luminance is King, Long live the King…

In the OP image, the blue BG is a luminance of only 4 Y (of 0-100). That's pretty dark, less that a fourth of the 18% grey card people often consider middle grey.

And with middle contrast being about 36Y, that blue is about an eighth.

Long winded say of saying: it's dark mode.

See also: designing with blue at NASA

[lloydk]

It looks like the polarity indicator no longer conveys enough information to follow the guidelines. Based on the discussion in this thread we need to know if the background color is dark (darker than #888888) or very dark (darker than #333333). So instead of a polarity indicator maybe a suffix or prefix like the following would be better:

Light Mode: Lc 80L
Neutral Mode: Lc 50N
Dark Mode: Lc 75D
Very Dark Mode: Lc 85VD

Based on the current guidelines you could even drop the L and N suffixes.

You could also append a B to those suffixes to indicate that the L, N, D or VD refer to the background color but that might be to verbose.

[cyrezdev]

"Back in the old days" when full color screens were first getting started, blue/white was common, as it reduces chromatic aberration effects by removing all detail from the blue channel.

Memories… i feel old now! Haha

Light and dark as color scheme is less informative than Day and Night.

As for myself, "dark mode" is a quiet theme with a low brightness to not hurt my eyes.
But that’s not a scientific definition of dark. Only a personnal feeling of what i would have preferred it to be.

To get back to this thread, @lloydk gave a good idea about the additional indicator. 💯