External links have low contrast when using dark theme

[derat]

Steps to reproduce

1. Configure your phone to use Android's dark theme.
2. Open a conversation in Element X.
3. Send or receive a message containing an external URL.

Outcome

What did you expect?

To be able to read the URL.

What happened instead?

The URL is quite hard to read due to the link color's low contrast with the bubble color, particularly in low-contrast environments (e.g. when using my phone in direct sunlight).

---

The Web Content Accessibility Guidelines (WCAG) 2.0 say that normal-sized text should have a contrast ratio of at least 4.5:1. The Android Accessibility guidelines also recommend a contrast ratio of at least 4.5:1.

When using the dark theme, the link color is #4187eb against a #323539 (3.45:1) or #26282d (4.13:1) bubble background:

When using the light theme, the link color is #0467dd against a #e1e6ec (4.19:1) or #f0f2f5 (4.69:1) bubble background:

---

I recommend making the dark theme's link color brighter and less saturated and making the light theme's link color darker to improve accessibility.

I assume that https://github.com/element-hq/compound-design-tokens is where a change would need to be made. I'm happy to create a PR proposing new colors if that's an option, but development.md says that the folder is usually updated by designers who sync it with Figma.

Your phone model

Google Pixel 7a

Operating system version

Android 15

Application version and app store

Element X 25.03.2 (202503020) QXIFXXDNTX

Homeserver

Synapse v1.127.1

Will you send logs?

No

Are you willing to provide a PR?

Yes

[bmarty]

We are using SemanticColors.textLinkExternal for links. @amshakal can I assign this issue to you?

[amshakal]

Sure!