Search
251 results for “Myndex”
-
@agvbergin @cwilcox808 @dkieffer
Yes halation in dark mode can be an issue. But in order to set a max contrast, the contrast calculation has to be perceptually uniform. WCAG2 contrast is not accurate to use this way, and WCAG2 is also not useful for dark mode.
APCA can calculate for dark mode, and we are testing the following maximums (negative Lc value means light text/dark BG).
DARK MODE MAX
Small text (under 24px): Lc -90 max
Medium bold text (24-36px): Lc -85max
Large text (>36px) and thick solid icons or buttons: Lc -80
And Lc -75 max if the BG is darker than `#333333 `We have a discussion thread on the subject at the APCA forum: https://github.com/Myndex/SAPC-APCA/discussions/106
-
@Myndex currently researching visual readability for self-illuminated displays, i.e. web content. Creator of APCA contrast method and guidelines. #color #colour #visualPerception #readability #visionScience #typography
-
I recently switched from WCAG2 to APCA on my personnal projects, so I needed a simple tool to check color contrasts against that new guideline.
Did not find the existing ones efficient enough so quickly developped one that suited my needs.More: https://villapirorum.netlify.app/web/
The tool: https://villapirorum.netlify.app/web/contrasted-colors/
WCAG 2.0: https://www.w3.org/TR/WCAG20
APCA : https://git.apcacontrast.com
A more sophisticated APCA tool : https://contrast.tools -
@djangonaut the lighter blue might be compliant to #WCAG 2 but you might be surprised at the results for upcoming #WCAG3 aka #APCA : it requires a minimum font size of 107px !
https://www.myndex.com/APCA/?BG=537689&TXT=000000&DEV=G4g&BUF=A22
-
Another #FLDC mini session on the APCA Contrast Calculator.
-
I think I just realized... did you linearize first?
The reality is that before the coefficients are applied, the R G B tuples need to be linearized (gamma or TRC removed), otherwise, you won't get the correct luminance value... that could explain why your flip point seems inverted... The sRGB piecewise TRC is "official" but a 2.2 gamma works:
```
let Y = (sR/255.0)**2.2*0.2126+(sG/255.0)**2.2*0.7152+(sB/255.0)**2.2*0.0722 ;
let text = Y > 0.37 ? "#000" : "#fff" ;
```
-
So from the rough example math in the previous, with #f00, the L cone is receiving 3.5 times more than M.
With the grey, L receives 1.33 times more than M (L cones are more populous).
With the grey, the ganglion cells are switched to where the signal is sent to light/dark.
With the red #f00, the L gets 26% more luminance than the grey, and also L is not really competing with M as here, L is getting 71% more than M.
Point: there are clearly a number of places where the physiology favors a vibrant red vs a grey of same luminance.
-
So from the rough example math in the previous, with #f00, the L cone is receiving 3.5 times more than M.
With the grey, L receives 1.33 times more than M (L cones are more populous).
With the grey, the ganglion cells are switched to where the signal is sent to light/dark.
With the red #f00, the L gets 26% more luminance than the grey, and also L is not really competing with M as here, L is getting 71% more than M.
Point: there are clearly a number of places where the physiology favors a vibrant red vs a grey of same luminance.
-
So from the rough example math in the previous, with #f00, the L cone is receiving 3.5 times more than M.
With the grey, L receives 1.33 times more than M (L cones are more populous).
With the grey, the ganglion cells are switched to where the signal is sent to light/dark.
With the red #f00, the L gets 26% more luminance than the grey, and also L is not really competing with M as here, L is getting 71% more than M.
Point: there are clearly a number of places where the physiology favors a vibrant red vs a grey of same luminance.
-
So from the rough example math in the previous, with #f00, the L cone is receiving 3.5 times more than M.
With the grey, L receives 1.33 times more than M (L cones are more populous).
With the grey, the ganglion cells are switched to where the signal is sent to light/dark.
With the red #f00, the L gets 26% more luminance than the grey, and also L is not really competing with M as here, L is getting 71% more than M.
Point: there are clearly a number of places where the physiology favors a vibrant red vs a grey of same luminance.
-
So from the rough example math in the previous, with #f00, the L cone is receiving 3.5 times more than M.
With the grey, L receives 1.33 times more than M (L cones are more populous).
With the grey, the ganglion cells are switched to where the signal is sent to light/dark.
With the red #f00, the L gets 26% more luminance than the grey, and also L is not really competing with M as here, L is getting 71% more than M.
Point: there are clearly a number of places where the physiology favors a vibrant red vs a grey of same luminance.
-
Okay, so in the normal eye, there are more L cones than any other. Stim the L cones only, with the L cones making up the majority of the luminance signal (with L cone peak being a greenish yellow).
And meanwhile the S cones are not contributors to the luminance channel (any luminance from the display blue primary is due to the stim of the M and L cones).
The sRGB red primary creates about 21% luminance.
The first image is a neutral grey of 21% luminance #868686 against #f00 .(equal Ys, 0 C vs red 104 C)
The second image is #f00 v #860000 (Lc25)
The third is #009494 vs #f00
(equal Ys — 33 C v 104 C)The 4th is #d11 v #06f
(equal Ys & equal chroma)Note: Ys is "screen luminance"
----
Some very rough calcs:#f00 mostly stims L cone to Ys=21.3%
#868686, the values are
R Ys= 4.5
G Ys=15.3
B Ys= 1.5So #f00
L 16.6%
M 4.7%
L gets 3.5 x more than M#868686
R
L cone 3.5%
M gets 1.0%,G & B
Remaining 16.8%:
L 9.7%
M 8.9%
=
L for the Grey 13.2%
M for the Grey 9.9%L 1.33 more than M
-
Okay, so in the normal eye, there are more L cones than any other. Stim the L cones only, with the L cones making up the majority of the luminance signal (with L cone peak being a greenish yellow).
And meanwhile the S cones are not contributors to the luminance channel (any luminance from the display blue primary is due to the stim of the M and L cones).
The sRGB red primary creates about 21% luminance.
The first image is a neutral grey of 21% luminance #868686 against #f00 .(equal Ys, 0 C vs red 104 C)
The second image is #f00 v #860000 (Lc25)
The third is #009494 vs #f00
(equal Ys — 33 C v 104 C)The 4th is #d11 v #06f
(equal Ys & equal chroma)Note: Ys is "screen luminance"
----
Some very rough calcs:#f00 mostly stims L cone to Ys=21.3%
#868686, the values are
R Ys= 4.5
G Ys=15.3
B Ys= 1.5So #f00
L 16.6%
M 4.7%
L gets 3.5 x more than M#868686
R
L cone 3.5%
M gets 1.0%,G & B
Remaining 16.8%:
L 9.7%
M 8.9%
=
L for the Grey 13.2%
M for the Grey 9.9%L 1.33 more than M
-
Okay, so in the normal eye, there are more L cones than any other. Stim the L cones only, with the L cones making up the majority of the luminance signal (with L cone peak being a greenish yellow).
And meanwhile the S cones are not contributors to the luminance channel (any luminance from the display blue primary is due to the stim of the M and L cones).
The sRGB red primary creates about 21% luminance.
The first image is a neutral grey of 21% luminance #868686 against #f00 .(equal Ys, 0 C vs red 104 C)
The second image is #f00 v #860000 (Lc25)
The third is #009494 vs #f00
(equal Ys — 33 C v 104 C)The 4th is #d11 v #06f
(equal Ys & equal chroma)Note: Ys is "screen luminance"
----
Some very rough calcs:#f00 mostly stims L cone to Ys=21.3%
#868686, the values are
R Ys= 4.5
G Ys=15.3
B Ys= 1.5So #f00
L 16.6%
M 4.7%
L gets 3.5 x more than M#868686
R
L cone 3.5%
M gets 1.0%,G & B
Remaining 16.8%:
L 9.7%
M 8.9%
=
L for the Grey 13.2%
M for the Grey 9.9%L 1.33 more than M
-
Okay, so in the normal eye, there are more L cones than any other. Stim the L cones only, with the L cones making up the majority of the luminance signal (with L cone peak being a greenish yellow).
And meanwhile the S cones are not contributors to the luminance channel (any luminance from the display blue primary is due to the stim of the M and L cones).
The sRGB red primary creates about 21% luminance.
The first image is a neutral grey of 21% luminance #868686 against #f00 .(equal Ys, 0 C vs red 104 C)
The second image is #f00 v #860000 (Lc25)
The third is #009494 vs #f00
(equal Ys — 33 C v 104 C)The 4th is #d11 v #06f
(equal Ys & equal chroma)Note: Ys is "screen luminance"
----
Some very rough calcs:#f00 mostly stims L cone to Ys=21.3%
#868686, the values are
R Ys= 4.5
G Ys=15.3
B Ys= 1.5So #f00
L 16.6%
M 4.7%
L gets 3.5 x more than M#868686
R
L cone 3.5%
M gets 1.0%,G & B
Remaining 16.8%:
L 9.7%
M 8.9%
=
L for the Grey 13.2%
M for the Grey 9.9%L 1.33 more than M
-
Okay, so in the normal eye, there are more L cones than any other. Stim the L cones only, with the L cones making up the majority of the luminance signal (with L cone peak being a greenish yellow).
And meanwhile the S cones are not contributors to the luminance channel (any luminance from the display blue primary is due to the stim of the M and L cones).
The sRGB red primary creates about 21% luminance.
The first image is a neutral grey of 21% luminance #868686 against #f00 .(equal Ys, 0 C vs red 104 C)
The second image is #f00 v #860000 (Lc25)
The third is #009494 vs #f00
(equal Ys — 33 C v 104 C)The 4th is #d11 v #06f
(equal Ys & equal chroma)Note: Ys is "screen luminance"
----
Some very rough calcs:#f00 mostly stims L cone to Ys=21.3%
#868686, the values are
R Ys= 4.5
G Ys=15.3
B Ys= 1.5So #f00
L 16.6%
M 4.7%
L gets 3.5 x more than M#868686
R
L cone 3.5%
M gets 1.0%,G & B
Remaining 16.8%:
L 9.7%
M 8.9%
=
L for the Grey 13.2%
M for the Grey 9.9%L 1.33 more than M
-
Today's geeky joke:
A grumpy old mathematician walks into a bar and he yells at the bartender "I hate this place! And you're ugly too!" as he angrily slams a 2 down on the bar to make his point "And the service sucks too!" and he slams another 2 onto the bar, "and it smells like a sewer too!" and slams another 2 on the bar - till there's a a pile of 2s on the bar.
When the tirade was finally over, the bartender replied "That's so mean, it's median and mode at the same time".
Ba dum ching.
-
-
In space, no one can hear you scream "use the force to beam me up to skynet before the zombies eat me and snatch my body with the seed pod bay doors please HAL"
#Tropes #Aliens #starwars #startrek #2001aspaceodyssey #Terminator #bodysnatchers
-
I was recently interviewed by Colleen Gratzer at @creativeboostco regarding APCA, Inclusive Reading Technologies, and guideline development.
We covered the important basics of perceptual uniformity, with ample visual examples.
-
Do standards and guidelines lag emerging technology?
Yes.
Can this be helped?
Also yes.A brief article posted on Linkedin:
#a11y #Webdesign #WCAG #APCA #accessibility #Standards
https://www.linkedin.com/posts/andrew-m-somers_once-upon-a-time-our-technology-landscape-activity-7142562431314083840-GS-I? -
Hi Piper, please feel free to direct any questions or issues you may have to me, also let me know if you are interested in being a beta site.
One thing I'll mention: the important consideration for contrast is spatial, not color. Font weight/line thickness does more for contrast perception than color distance.
One way to think of this is, luminance distance needs to be increased to support thinner strokes.
Examples:
-
"Who says" you can't shove a 12 bit per chanel PQ image into an 8 bit per channel container?
https://github.com/w3c/PNG-spec/issues/357#issuecomment-1783735884
And, eh, I was good at tetris too...
#HDR #sRGB #video #png #digitalimage #color #CIEYUV
YpqUV, a color space and encoding for using 12bit PQ HDR stored in an 8bit per channel RGBA png file, and some other encodings:
-
"Who says" you can't shove a 12 bit per chanel PQ image into an 8 bit per channel container?
https://github.com/w3c/PNG-spec/issues/357#issuecomment-1783735884
And, eh, I was good at tetris too...
#HDR #sRGB #video #png #digitalimage #color #CIEYUV
YpqUV, a color space and encoding for using 12bit PQ HDR stored in an 8bit per channel RGBA png file, and some other encodings:
-
For the "it's the law tho" crowd, here's a fix:
APCA to WCAG 2 Backwards Compatibility Chart
For 4.5:1
Backwards 4.5:1 is achieved when:
IF the lightest color is darker than #d0d0d0
OR the darkest is darker than #595959
THEN Lc ±60 exceeds 4.5:1ELSE Lc 72 or Lc -77 exceeds 4.5:1 in all cases
---
For 3:1Backwards 3:1 is achieved when:
IF the lightest color is darker than #c4c4c4
OR the darkest is darker than #6c6c6c
THEN Lc ±45 exceeds 3:1ELSE Lc 57 or Lc -63 exceeds 3:1 in all cases
---
Here's the implication:If both colors are darker than #d0d0d0 or at least one is darker than #595959:
Then it's not a matter of "can you?" use APCA, it's a matter of you *should* use APCA.
For color pairs darker than #d0d0d0, WCAG 2.x contrast math results are not meaningful, and create inaccessible, often unreadable, color pairs.
Actual Accessibility is where it's at.
#darkmode #Webdesign
#a11y #color #webdev
#colour #wcag #apca -
Recent positive, independent peer review of APCA:
"...15 years since the adoption of WCAG 2.0...enhanced color models adapted to human perception, have been developed...APCA shows more accurate results for measuring color contrast..."
#a11y #Webdesign #accessibility #color #colour #contrast #APCA #WCAG
-
Recent positive, independent peer review of APCA:
"...15 years since the adoption of WCAG 2.0...enhanced color models adapted to human perception, have been developed...APCA shows more accurate results for measuring color contrast..."
#a11y #Webdesign #accessibility #color #colour #contrast #APCA #WCAG
-
Driving through that kind of dappled light is a known seizure risk for people that are prone to photic seizures... (akin to flashing lights).
But a slow walk, it's high stim (intensity) but slow stim (temporally).... hmm
Now this has me wondering if there's some kind of #photicEntrainment ....
-
New! Improved! Sophia Route
Sophia’s Route: Part III
#FanFiction #MyNextLifeAsAVillainess: All Routes Lead to Doom! (#Bakarina #Hamafura)
#Wss366 #MastoPrompt[Continued from Sophia’s Route: Part II]
“You look hot,” Sophie said after Gerald disappeared. “Let’s get something to drink.”
“And food. I haven’t eaten anything. Kevin will be so proud of me.” Katarina eyed the mountains of meat. With Sophia there, Kevin couldn’t say she had disobeyed him.
“Refreshments first,” Sophia replied, knowing exactly what Katarina was thinking and what Kevin was worried about. “I don’t want you to collapse from the heat. While we refresh ourselves, I can tell you about what I have been reading. It’s such a romantic bad-boy book.”
As they walked toward the punch bowl, Sophia began. “There’s a scene in it that is just like this moment. The hero, Prince Alexandros, leads his love interest, the #virtuous Katherine, to a bowl of punch, just like this one, complete with an ice swan. Isn’t it lovely?”
Katarina admired the sculpture. “Then what happens?”
“He gets them both a drink in #Champagne flutes just like these. They intertwine their arms and sip from each other’s glasses. Want me to show you how? It’s a divine scene.”
Katarina nodded and took the glass that Sophia offered her.
“Cross your arms like this. Good. Now sip. Kampai!”
The position was embarrassing, but the drink was sublime. Its gentle sweetness embraced her mouth, and the bubbles tickled her nose. Looking over the flute's edge she noticed it had lovely multi-colored sugar rimming it, and Sophia’s face, which had turned a cute shade of pink. She made a silent toast: “I’m glad I have friends like this. Sophia’s the best.”
“You liked that,” Katarina said.
“Yeah,” Sophia replied, turning even redder.
“It was so nice, and I love the bubbles.”
“I could tell. You drank that fast,” Sophia said. “Let me get you another.”
The second glass followed the first while Sophia sipped slowly on hers.
“It’s so good!” Katarina said getting a third.
“You should sip that,” Sophia warned, but it was too late; that glass disappeared too.
“Sophia, the room’s dancing.” Katarina spun spilling some of the #Champagne cocktail.
That’s what happened in the book, too. The girl wasn’t used to alcohol and started acting silly. The bad-boy prince swept her off her feet and whisked her out of the ball to unknown places. She left her selfish fiancé fuming and her frantic friends behind.
“That’s so… romantic.”
“Shall we?” Sophia asked. “I could be a bad-girl. I’ve read lots of books with bad-boys and know what to do.”
“Let’s,” Katarina said as Sophia led her away.
