Fix contrast issues with accent colors.
Review Request #13744 — Created April 17, 2024 and submitted — Latest diff uploaded
A recent change to the accent colors ended up defaulting text colors to
being dark on dark primary colors.We now hard-code a light color on the dark accent colors. This will
impact existing callers that are setting a primary background but not a
primary foreground.It also changes our default primary background color to be a darker
shade of blue, by changing the definition of--ink-p-blue-700
. Our old
value (#2378DB
) failed the WCAG contrast check by just a bit. We now
use the same color code Firefox uses (#0174E8
), which passes.Notably, we also now use white instead of off-white as the primary text
color on dark backgrounds, which helps a lot with our contrast.I'm also sneaking in a change to define a selection background color for
inputs, since that was missing.
Tested these with contrast ratio checkers. We score AA, but not AAA. The
AAA rating is for people with higher degrees of vision loss (w3.org states
at this level, assistive technologies are usually in use), and for that
we'd want to place suitable colors in a High Contrast theme.Our score of 4.5:1 is equivalent to Firefox's, and higher than macOS's
(2.76:1) for menus and similar UI elements.