Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
pawb.fun is one of the many independent Mastodon servers you can use to participate in the fediverse.
This instance aimed at any and all within the furry fandom, though anyone is welcome! We're friendly towards members of the LGBTQ+ community and aiming to offer a safe space for our users.

Administered by:

Server stats:

297
active users

pawb.fun: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.6+glitch

#css

18 posts14 participants0 posts today
Ana Tudor 🐯
Public

Among other things, I also go into the how behind the minimum alpha for the semi-transparent black overlay so we can be sure of having enough contrast.

Some method to the madness. Alpha should be enough to ensure good contrast even if there is white in the image behind. That is, the result between that semi-transparent black overlay on top of a white backdrop should have enough contrast with white text. This we can compute easily (it's computed on a per channel basis) and it results that the alpha should be no less than 54%. I bumped that up to 60%. We have the channels of the white backdrop c0 = 1 (all RGB channels are equal for all greys between black & white), and the channels of the black overlay c1 = 0. We also have the unknown overlay alpha a. The channels of the equivalent grey we get out of this backdrop + semi-transparent overlay combo are: ``` c0 + (c1 - c0)*a = 1 + (0 - 1)*a = 1 - a ``` The maximum value we can have for the channels of the grey equivalent is 46% (.46). Above that, the contrast with white text drops below 4.5. So we have: ``` 1 - a < .46 1 - .46 < a .54 < a ``` So our overlay alpha should have a minimum value of 54%.
#CSS#a11y#code
ExploreLive feeds
About