• 
      

    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:
    Completed
    Change Summary:
    Pushed to master (074efd0)