Fix contrast issues with accent colors.

Review Request #13744 — Created April 17, 2024 and submitted

Information

Ink
master

Reviewers

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.

Summary ID
Fix contrast issues with accent colors.
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.
c55c8681b863fa1494891c4756b77f3749771612

david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to master (074efd0)
Loading...