1738156 - meta color-scheme dark proposed system link colors adjusted to AAA

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Bill Goldstein [:aja] (UTC-6)]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Steps to reproduce:

With a build containing patches for Bug 1525107,
inspect accessibility for link system colors on a page with meta color-scheme=dark

Actual results:

LinkText and VisitedText with meta color-scheme=dark are too dark;
They fail AA vs. Canvas

Expected results:

At minimum, should pass AA vs. Canvas.

Propose using:

linktext rgb(140, 140, 255)
visitedtext rgb(255, 51, 255)
activetext rgb(255, 102, 102)

which would pass AAA vs. Canvas

Comment 1

[Emilio Cobos Álvarez (:emilio)]

(Not hcm-specific, so removing that dependency).

As mentioned on bug 1525107, I took the colors from Chromium, but I'm def. ok changing them. Morgan / Jamie, any objections?

I'll attach a test-case (you need with layout.css.color-scheme.enabled=true to see that).

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Testcase

The proposed colors look good to me.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1738156 - Tweak default dark hyperlink colors. r=Jamie,morgan

Note that this is on top of D129993.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case with the current colors hard-coded for posterity and better visibility

So I think my only objection is that the proposed visited color looks too bright (it calls more attention than the unvisited one, to me at least, when it's supposed to do the opposite).

Comment 5

[Bill Goldstein [:aja] (UTC-6)]

rgb(255, 45, 255) #FF2DFF for VisitedText would be slightly darker;
Right at 5.75 contrast ratio vs. the new .dark Canvas value, exactly midway between AA and AAA minimums:
Perfect, IMHO, for when prefers-contrast is neither 'more' nor 'less'.

Might be able to do a wee bit better for all the new dark color-scheme-aware link colors
once lch() or oklch() polar spaces are implemented (and/or with an APCA contrast algorithm or some such),
but certainly these are a vast improvement over status quo ante, either as currently defined here, or with a slightly darker visitedtext.

Comment 6

[Bill Goldstein [:aja] (UTC-6)]

Since we're talking adjustments to my original proposal, since blue is perceptually darker than other colors,
perhaps lighten it, too, to like #bbbbff • rgb(187, 187, 255)?

Comment 7

[Bill Goldstein [:aja] (UTC-6)]

Another (more radical?) suggestion...
Make CanvasText less contrasty and warmer, i.e. a little less blue;
E.g.: #e6e6e3 • rgb(230,230,227).
Stark white is a bit much on large/bold.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

(In reply to Bill Goldstein [:aja] (UTC-6) from comment #7)

Make CanvasText less contrasty and warmer, i.e. a little less blue;

I'm not touching Canvas / CanvasText because they match our in-content theme.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

So I think my only objection is that the proposed visited color looks too bright (it calls more attention than the unvisited one, to me at least, when it's supposed to do the opposite).

Morgan, just double-checking you've seen this. I'm tempted to not change the visited color given ^ but your call.

Comment 10

[Morgan Reschenberg [:morgan]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #9)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

So I think my only objection is that the proposed visited color looks too bright (it calls more attention than the unvisited one, to me at least, when it's supposed to do the opposite).

Morgan, just double-checking you've seen this. I'm tempted to not change the visited color given ^ but your call.

yeah I saw this, but was having trouble coming up with alternates -- something like rgb(255, [140-170], 255) for visited looks like a better fit for that color family IMO.

EDIT:
another option, if we wanna change unvisited instead is to do something like:
unvisited - rgb(80, 140, 255)
visited/active - as above in c0

Comment 11

[Emilio Cobos Álvarez (:emilio)]

I agree. I tweaked the visited color a bit before landing.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b7e093b6de1a
Tweak default dark hyperlink colors. r=morgan

Comment 13

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/b7e093b6de1a