Accessibility bug: Contrast of new post, new chat, reply is too low

[SleeplessByte]

Steps to Reproduce

1. Go to https://bsky.app/ or https://bsky.app/messages
2. In mobile mode you will find a button in the bottom-right corner, in desktop mode it will be either in the left most sidebar (new post) or in the center at the top-right (new chat)
3. Inspect the background and foreground colour, the font weight and size, and determine that it's not passing the contrast test

• Body text MUST pass at least a 4.5:1 contrast ratio (AA)
• Body text SHOULD pass the not-yet-standardised-and-accepted WCAG 3 APCA contrast check

I understand white on blue looks like it's super legible, but imagine you cannot see blue, or in general you don't see much contrast? How distance are these colours? The calculations say that at 14px (small) or 15px (normal) (or even 16px (large)) they are not distant enough.

The method we use to determine if something has enough contrast is a bit outdated, and for example doesn't work well for combinations with orange and sometimes blue. It also doesn't differentiate between a dark background with light foreground and the reverse, but our perception does. Therefore a new method has been researched which likely will come in effect with WCAG 3 that fixes both these issues. However, for now, we are stuck with the old method.

Note

Body text is generally text that is < 24px at regular weight (400). The larger the text, the bolder the font, the easier it will be to separate from its background and thus less contrast is required.

• The AA conformance ratio is 4.5:1 for body text and 3:1 for large text.
• The AAA conformance ratio is 7:1 for body text and 4.5:1 for large text.

It is generally accepted to work with AA unless you have a special user group.
Any high contrast mode MUST conform with AAA.

How do these colours do?

Background	Foreground	Text size	Contrast
#2195fe	#ffffff	15px	3.3

That does not pass the WCAG 2 test. The WCAG 3 / APCA calulcation yields Lc -62.6, which translates to ok at 23px at 400 weight, or higher. The weight of the buttons is 600, which has a bit more leverage. At 17px this would be fine (but still not pass the current calculation of >= 3.5:1).

To solve this I recommend the following two things:

• Change the colour to #0380fe, which looks almost the same but is 3.7:1
• Increase the fontsize of the new post button to 16px, so that it passes APCA as well.

If you want to ignore the upcoming WCAG 3 (and have this same conversation in the future), you could opt to change to #0f86fe which barely passes at 3.5:1, but technically should not be displayed at that weight and size. If you do that, increase the font size to at least 16.5px.

• Apply the change to New post (floater and sidebar button)
• Apply the change to New chat (floater and sidebar button)
• Apply the change to the "submit post" (reply) button

About the new chat button

It has all the same issues as above, but it's too small. 12.5px when font settings are small and 13.125px when on normal? There is no official minimum size of text because all content must be magnifiable/zoomable/scale to at least to 200% of its original size, but the general accepted baseline is 16px for body text, with occasional elements being smaller. This button being 12.5px stands out.

My recommendation? Increase the size! At least to 14px, but 16px works as well. Here is an example at 16px:

Attachments

This is what it currently looks like with a simulation of reduced contrast turned on.

Warning

The low contrast simulation in Chrome's devtools is not meant to be an all-encompassing "this is what it will look like for all people who have this deficiency". It does help you quickly spot potential issues, such as the problem above.

The suggested change will look like this (I increased the icon to 20x20 to match the style):

Here is the comparison again with the image above:

Suggested	Current

Sighted people should be able to see the small, but important difference. Yes, it wasn't bad, but this makes it conforming to the research.

What platform(s) does this occur on?

iOS, Android, Web (Desktop), Web (Mobile)

Device Info

Not Relevant

What version of the app are you using?

Web, but I assume the apps have this issue too

Additional Information

If you are interested in this stuff, you may want to read up on this research: Myndex/SAPC-APCA#39 (comment)