#Web #usability and #accessibility ...
This is from crimethinc.com, but I'm not trying to pick particularly on them. There are many, many, many sites just as bad or worse.
This is a screenshot from an article on their site today, rendered in Firefox (Linux).
See the hair-thin font? See the fact that it's light grey on a white background? There's virtually no contrast between the text and the background.
This is an accessibility nightmare for those with any sort of vision problem. Picking the colour out of the screenshot (I didn't look at the CSS), it appears the text is basically 45% grey. This is ludicrous.
If the font face had some heft, it might be still be half-assed readable with contrast this low.
But as is... If I were to take my contacts out, I wouldn't even be able to tell that this screenshot *had* any of the normal-sized text in it, much less be able to read any of it.
Web designers, I beg you: please consider more than the appearance of what you're creating when you're making design choices.
Remember that not everyone is a 20- or 30-something with near-perfect vision.
Remember that people have cataracts or other types of eye cloudiness which necessitate high-contrast text to be able to read, even if they scale the fonts up by a huge amount.
Remember that vision degrades naturally in people in many ways other than "just wear glasses" can fix.
️
![Screenshot of a browser window showing the page at address https://localhost/patron/cs_test_a1ghlmjTxqnNUUHo41PvYu1lYx1sjA1igwYk2Um2TnyEmAlXaBMUooKy3m/:
500
TypeError: Cannot read properties of undefined (reading 'items')
Stack trace
From your app (lines 241-247)
@param { { subscription: import('stripe').Stripe.Subscription } } data
*/
html ({ subscription }) {
const subscriptionItem = subscription.items.data[0]
const patronageAmount = subscriptionItem.price.unit_amount * subscriptionItem.quantity /100
const subscriptionId = subscription.id
const subscriptionItemId = subscription.items.data[0].id
While running UpdatePatronageForm.html
in /patron/index_[id].page.js (line 244, column 43)
From Kitten (heading)…](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/268/843/666/014/035/original/ec68bc25e4f07f68.png "Screenshot of a browser window showing the page at address https://localhost/patron/cs_test_a1ghlmjTxqnNUUHo41PvYu1lYx1sjA1igwYk2Um2TnyEmAlXaBMUooKy3m/:
500
TypeError: Cannot read properties of undefined (reading 'items')
Stack trace
From your app (lines 241-247)
@param { { subscription: import('stripe').Stripe.Subscription } } data
*/
html ({ subscription }) {
const subscriptionItem = subscription.items.data[0]
const patronageAmount = subscriptionItem.price.unit_amount * subscriptionItem.quantity /100
const subscriptionId = subscription.id
const subscriptionItemId = subscription.items.data[0].id
While running UpdatePatronageForm.html
in /patron/index_[id].page.js (line 244, column 43)
From Kitten (heading)…")
Angemessene / dynamische Schriftgröße
