Use accessible colors

Created on 29 April 2025, 18 days ago

Problem/Motivation

Although they look good, really good, the three colors used by default right now do not pass accessibility (contrast) tests against the white text that the toolbar uses.

Against white:
DodgerBlue (#1E90FF) has a contrast of 3.23:1 (https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=1E90FF)
GolderRod (#DAA520) goes even lower, to 2.23:1 (https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=DAA520)
Firebrick (#B22222) does better than the rest, but is still low at 6.67:1 (https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=B22222)

WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Steps to reproduce

Check colors in a contrast checker (https://webaim.org/resources/contrastchecker)

Proposed resolution

Use colors that pass the checks.
After quite some checks and tests, and because we also wanted to make sure people with color deficiencies can properly use the indicator, me and my team concluded in the following set (we have 4 distinct environments):

- Local #4A0080 (contrast 13:1)
- Dev #005B94 (7:1)
- Stage #59590D (7:1)
- Live/Production #8B0000 (10:1)

✨ Feature request
Status

Active

Version

3.0

Component

Code

Created by

πŸ‡¬πŸ‡·Greece bserem

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024