Sign in/Sign up text box has low contrast with new theme

[anoadragon453]

Navigate to something like https://app.element.io/#/room/#matrix:matrix.org without being signed in and you'll be prompted to either sign in or sign up. However, the text is a bit hard to read against the light background.

Description

Logs being sent: no

Version information

• Platform: web
• Browser: Firefox Nightly
• OS: Linux
• URL: develop.element.io

[nadonomy]

Hmm, definitely something that messed up with when we switched between themes. We'd want these to use the same styling as the right panel.

[nadonomy]

@t3chguy we can make a comp if needed, but my sense is it'd be simpler just to swap where we're inheriting these colour vars from, wdyt?

[niquewoodhouse]

@t3chguy there's two issues here, one we can solve pretty easily and the other is a something that has to go back to the branding work to be able to amend these buttons to be accessible.

1 is the colour of the type outside of the buttons.
I'm using RGB 46 47 50 as it's is used for timeline copy on the light theme. Would be nice if they could use the same var.

2 is the contrast of the buttons themselves
I'm just reporting what I've learned from a little investigation: During the branding work there was exploration of various accents with a11y testing applied. The final selected primary accent wasn't one that passed those tests and at that time there was a discussion around accessibility and it was decided to stick with the selected accent colour.

I don't want to block fixing the text colour on these buttons. There was a decision for the buttons to be that specific colour, in the knowledge of a non-ideal contrast ratio, so that needs to be fed back through the appropriate people who worked and decided on that and I could see that taking a bit of time, compared to just fixing the text.

Hope that makes sense