MastodonTech.de

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#Guides</a> Browser-applied contrast · How to make CSS choose black or white for contrast <a href="https://ilo.im/163v80" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163v80</a>_____ <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Color" class="mention hashtag" rel="nofollow noopener" target="_blank">#Color</a> <a href="https://mastodon.social/tags/BlackWhite" class="mention hashtag" rel="nofollow noopener" target="_blank">#BlackWhite</a> <a href="https://mastodon.social/tags/Contrast" class="mention hashtag" rel="nofollow noopener" target="_blank">#Contrast</a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#Accessibility</a> <a href="https://mastodon.social/tags/WCAG" class="mention hashtag" rel="nofollow noopener" target="_blank">#WCAG</a> <a href="https://mastodon.social/tags/APCA" class="mention hashtag" rel="nofollow noopener" target="_blank">#APCA</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a>

Frontend DogmaA11y 101: 1.4.3 Contrast (Minimum), by @nattarnoff.bsky.social:<a href="https://tarnoff.info/2025/03/25/a11y-101-1-4-3-contrast-minimum/" rel="nofollow noopener" translate="no" target="_blank">https://tarnoff.info/2025/03/25/a11y-101-1-4-3-contrast-minimum/</a><a href="https://mas.to/tags/introductions" class="mention hashtag" rel="nofollow noopener" target="_blank">#introductions</a> <a href="https://mas.to/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#accessibility</a> <a href="https://mas.to/tags/wcag" class="mention hashtag" rel="nofollow noopener" target="_blank">#wcag</a> <a href="https://mas.to/tags/contrast" class="mention hashtag" rel="nofollow noopener" target="_blank">#contrast</a> <a href="https://mas.to/tags/colors" class="mention hashtag" rel="nofollow noopener" target="_blank">#colors</a> <a href="https://mas.to/tags/apca" class="mention hashtag" rel="nofollow noopener" target="_blank">#apca</a>

Tommi 🤯Woooow <a href="https://mastodon.social/@marcedwards" class="u-url mention" rel="nofollow noopener" target="_blank">@marcedwards</a>, thanks for sharing!I always felt that some WCAG 2 color <a href="https://pan.rent/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> results were weird, but I never dove deeper. This shines a completely different perspective, super insightful!The problem now is that benchmarking and testing services do still use <a href="https://pan.rent/tags/WCAG2" class="mention hashtag" rel="nofollow noopener" target="_blank">#WCAG2</a> as their reference, so, absurdly enough, if we switched to <a href="https://pan.rent/tags/APCA" class="mention hashtag" rel="nofollow noopener" target="_blank">#APCA</a> we would get worse acccessibility scores… 🤨

Daniela Kubesch<a href="https://front-end.social/tags/APCA" class="mention hashtag" rel="nofollow noopener" target="_blank">#APCA</a> is designed to more accurately measure perceived contrast by assessing contrast in terms of lightness contrast, taking into account aspects such as polarity and contextual information like font size and weight. APCA's more human-centred assessment of contrast gives companies like Stack Overflow more confidence that they are designing interfaces that are both aesthetically pleasing and readable by as many people as possible.More on APCA: <a href="https://git.apcacontrast.com" rel="nofollow noopener" translate="no" target="_blank">https://git.apcacontrast.com</a>

Daniela KubeschIs orange the forbidden colour in accessibility? 🔶🙅Stack Overflow made an exception during its accessibility-focused redesign and chose to measure <a href="https://front-end.social/tags/colour" class="mention hashtag" rel="nofollow noopener" target="_blank">#colour</a> <a href="https://front-end.social/tags/contrast" class="mention hashtag" rel="nofollow noopener" target="_blank">#contrast</a> using the Accessible Perceptual Contrast Algorithm (<a href="https://front-end.social/tags/APCA" class="mention hashtag" rel="nofollow noopener" target="_blank">#APCA</a>). Although they initially considered the <a href="https://front-end.social/tags/WCAG" class="mention hashtag" rel="nofollow noopener" target="_blank">#WCAG</a> colour contrast algorithm, they decided against it because it struggles to accurately assess colour contrast when using orange, which is a significant issue when orange is a brands primary colour. <a href="https://stackoverflow.blog/2024/08/07/accessibility-by-design-building-interfaces-for-everyone-at-stack-overflow" rel="nofollow noopener" translate="no" target="_blank">https://stackoverflow.blog/2024/08/07/accessibility-by-design-building-interfaces-for-everyone-at-stack-overflow</a>

Myndex 🔵The following info graphic is intended to demonstrate the nature of human contrast sensitivity, using text samples to connect the abstract science to practical reality.It's based on infographics I originally created several years ago, but it recently got a bit of attention on Twitter, and I'm reminded that there's still a need to distribute this knowledge.More info and description in the ALT<a href="https://techhub.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://techhub.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#accessibility</a> <a href="https://techhub.social/tags/color" class="mention hashtag" rel="nofollow noopener" target="_blank">#color</a> <a href="https://techhub.social/tags/contrast" class="mention hashtag" rel="nofollow noopener" target="_blank">#contrast</a> <a href="https://techhub.social/tags/apca" class="mention hashtag" rel="nofollow noopener" target="_blank">#apca</a> <a href="https://techhub.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdesign</a> <a href="https://techhub.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#typography</a>

Frühere Suchanfragen

Suchoptionen

Verwaltet von:

Serverstatistik:

#APCA