Brand colours under white theme failing accessability tests #3

New Issue

spongycake · 2022-02-16T01:07:34+01:00

spongycake commented

2022-02-16 01:07:34 +01:00

Orange (#FF8F23) and Blue (#4FBAD5) are the current brand colours.

Under a dark backdrop text under these settings were passing WCAG 2.0.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

When switching to a white background all passing grades are failing. Likely if we ignore the colour contrast then it should alter the site's search placement such Google. More importantly, accessability is key.

Possible solutions?

Change the colours per theme (no-one-szie-fits-all)
Be a dark-first only theme
Change all colours

Orange (#FF8F23) and Blue (#4FBAD5) are the current brand colours. Under a dark backdrop text under these settings were passing WCAG 2.0. https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html When switching to a white background all passing grades are failing. Likely if we ignore the colour contrast then it should alter the site's search placement such Google. More importantly, accessability is key. ## Possible solutions? 1. Change the colours per theme (no-one-szie-fits-all) 2. Be a dark-first only theme 3. Change all colours

spongycake changed title from ~~Colours under white theme failing accessability tests~~ to Text colours under white theme failing accessability tests

2022-02-16 01:08:17 +01:00

spongycake changed title from ~~Text colours under white theme failing accessability tests~~ to Brand colours under white theme failing accessability tests

2022-02-16 01:08:29 +01:00

emorrp1 commented

2022-02-16 11:30:51 +01:00

To be fair, the colours were specifically chosen manually to look cool in icons with transparency on Element desktop's light/dark modes, hence the dark orange and pale blue. As the page notes, icons are exempt.

If it fails accessibility, then we don't actually need to use the same colorscheme on text - especially if it's the blue that's failing for links, just omit it and use system hyperlink blue. Similarly, if they can be tweaked slightly, now we have the svgs committed to git it's simple to re-generate them.

IIRC, they may also benefit from adjusting to actually match the split-complementary pair they approximate - that would give us a third color for free.

To be fair, the colours were specifically chosen manually to look cool in icons with transparency on Element desktop's light/dark modes, hence the dark orange and pale blue. As the page notes, icons are exempt. If it fails accessibility, then we don't actually *need* to use the same colorscheme on text - especially if it's the blue that's failing for links, just omit it and use system hyperlink blue. Similarly, if they can be tweaked slightly, now we have the svgs committed to git it's simple to re-generate them. IIRC, they may also benefit from adjusting to actually match the [split-complementary](https://uxplanet.org/how-to-use-a-split-complementary-color-scheme-in-design-a6c3f1e22644) pair they approximate - that would give us a third color for free.

Rampoina commented

2022-02-22 12:54:03 +01:00

It's basically impossible to have good color contrast for both dark and light backgrounds while choosing the same colors. I tried my best for the logo but that was already a compromise.

A possible solution is to just darken both colors enough for the light theme.
"Orange" (#B15500) and Blue (#04768F)

The orange looks a bit too much brown for my opinion but it's not that bad.

It's basically impossible to have good color contrast for both dark and light backgrounds while choosing the same colors. I tried my best for the logo but that was already a compromise. A possible solution is to just darken both colors enough for the light theme. "Orange" (#B15500) and Blue (#04768F) The orange looks a bit too much brown for my opinion but it's not that bad.

Rampoina commented

2022-02-22 12:59:47 +01:00

No description provided.

2022-02-22-125800_1257x532_scrot.png

84 KiB

spongycake commented

2022-02-27 02:40:20 +01:00

Check build v0.1.4. Links are blue and satisfying contrast tests.

This repo is archived. You cannot comment on issues.

No Label

No Milestone

No project

No Assignees

3 Participants

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: LibreGaming/frontend-styles#3