Bug 219991 - REGRESSION (r262729): Poor contrast for specific color/background combinations on disabled input fields
Summary: REGRESSION (r262729): Poor contrast for specific color/background combination...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified All
: P2 Normal
Assignee: Aditya Keerthi
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-12-17 12:26 PST by Aditya Keerthi
Modified: 2020-12-21 08:11 PST (History)
11 users (show)

See Also:


Attachments
Patch (14.80 KB, patch)
2020-12-17 12:30 PST, Aditya Keerthi
no flags Details | Formatted Diff | Diff
Before (using contrastRatio) (5.30 KB, image/png)
2020-12-17 12:50 PST, Aditya Keerthi
no flags Details
After (using differenceSquared) (5.53 KB, image/png)
2020-12-17 12:50 PST, Aditya Keerthi
no flags Details
Testcase (153 bytes, text/html)
2020-12-17 12:51 PST, Aditya Keerthi
no flags Details
Before (minConstrastRatio = 1.1) (93.05 KB, image/png)
2020-12-17 13:43 PST, Aditya Keerthi
no flags Details
Alternate Solution (minContrastRatio = 1.195) (89.51 KB, image/png)
2020-12-17 13:44 PST, Aditya Keerthi
no flags Details
Patch (16.73 KB, patch)
2020-12-19 13:22 PST, Aditya Keerthi
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Aditya Keerthi 2020-12-17 12:26:29 PST
<input type="text" style="color: #acacac; background-color: #f2f2f2;" disabled>
Comment 1 Aditya Keerthi 2020-12-17 12:26:46 PST
<rdar://problem/70522921>
Comment 2 Aditya Keerthi 2020-12-17 12:30:00 PST
Created attachment 416449 [details]
Patch
Comment 3 Tim Horton 2020-12-17 12:33:28 PST
Comment on attachment 416449 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=416449&action=review

> Source/WebCore/rendering/RenderTheme.cpp:1425
> -    if (contrastRatio(disabledColor.toSRGBALossy<float>(), backgroundColor.toSRGBALossy<float>()) < minColorContrastValue)
> +    if (differenceSquared(disabledColor.toSRGBALossy<uint8_t>(), backgroundColor.toSRGBALossy<uint8_t>()) < minColorContrastValue)

I wonder if it's preferable to use textColorIsLegibleAgainstBackgroundColor, to share the definition of legibility with the rest of WebKit? Or maybe that is too strict.
Comment 4 Sam Weinig 2020-12-17 12:37:14 PST
Hi Aditya,

I'm a bit confused by this bug report since the description doesn't actually say what is wrong. Can you provide before and after screenshots so we can see how it changed?
Comment 5 Sam Weinig 2020-12-17 12:43:51 PST
I'd like to avoid re-introducing difference squared here, as its pretty much non-sense, color-metrically, and won't scale to different color spaces, so if we could clarify what the issue is, that would be great.

You say in the title, "specific color/background combinations" but I am not clear what you mean by that. Are these specific color/background combinations that exist in the wild?
Comment 6 Aditya Keerthi 2020-12-17 12:50:25 PST
Created attachment 416454 [details]
Before (using contrastRatio)
Comment 7 Aditya Keerthi 2020-12-17 12:50:43 PST
Created attachment 416455 [details]
After (using differenceSquared)
Comment 8 Aditya Keerthi 2020-12-17 12:51:00 PST
Created attachment 416456 [details]
Testcase
Comment 9 Aditya Keerthi 2020-12-17 12:53:17 PST
(In reply to Sam Weinig from comment #5)
> I'd like to avoid re-introducing difference squared here, as its pretty much
> non-sense, color-metrically, and won't scale to different color spaces, so
> if we could clarify what the issue is, that would be great.
> 
> You say in the title, "specific color/background combinations" but I am not
> clear what you mean by that. Are these specific color/background
> combinations that exist in the wild?

Attached before/after screenshots and the test case.

The specific combination was reported by a developer through Feedback Assistant.
Comment 10 Sam Weinig 2020-12-17 12:58:05 PST
(In reply to Aditya Keerthi from comment #9)
> (In reply to Sam Weinig from comment #5)
> > I'd like to avoid re-introducing difference squared here, as its pretty much
> > non-sense, color-metrically, and won't scale to different color spaces, so
> > if we could clarify what the issue is, that would be great.
> > 
> > You say in the title, "specific color/background combinations" but I am not
> > clear what you mean by that. Are these specific color/background
> > combinations that exist in the wild?
> 
> Attached before/after screenshots and the test case.
> 
> The specific combination was reported by a developer through Feedback
> Assistant.

Thanks.

Can you also clarify which tests failed when you upped the minimum color contrast?

Another idea here is to improve the lighten and darken functions to be meaningful. I think they currently operate in same non-linear space. Would probably make more sense for them to also be a luminance transform, though I am not sure exactly on the math to do that.

If it's really important to revert this change now, that's ok, but if there is a little time to find a solution that maintains some of the nice aspects of the change I think that would be good.
Comment 11 Sam Weinig 2020-12-17 13:06:07 PST
(In reply to Sam Weinig from comment #10)
> (In reply to Aditya Keerthi from comment #9)
> > (In reply to Sam Weinig from comment #5)
> > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > if we could clarify what the issue is, that would be great.
> > > 
> > > You say in the title, "specific color/background combinations" but I am not
> > > clear what you mean by that. Are these specific color/background
> > > combinations that exist in the wild?
> > 
> > Attached before/after screenshots and the test case.
> > 
> > The specific combination was reported by a developer through Feedback
> > Assistant.
> 
> Thanks.
> 
> Can you also clarify which tests failed when you upped the minimum color
> contrast?
> 
> Another idea here is to improve the lighten and darken functions to be
> meaningful. I think they currently operate in same non-linear space. Would
> probably make more sense for them to also be a luminance transform, though I
> am not sure exactly on the math to do that.
> 
> If it's really important to revert this change now, that's ok, but if there
> is a little time to find a solution that maintains some of the nice aspects
> of the change I think that would be good.

Thinking about making a better lightened/darkened, I think it would probably be something like:

auto xyz = toXYZ(toLinearSRGB(color));
xyz.y *= someMultiplied;
return toSRGBA(toLinearSRGBA(xyz));

Where someMultiplied would have to be tweaked like the current lightened/darkened "v - 0.33f" is.
Comment 12 Aditya Keerthi 2020-12-17 13:43:46 PST
Created attachment 416462 [details]
Before (minConstrastRatio = 1.1)
Comment 13 Aditya Keerthi 2020-12-17 13:44:38 PST
Created attachment 416464 [details]
Alternate Solution (minContrastRatio = 1.195)
Comment 14 Aditya Keerthi 2020-12-17 13:48:08 PST
(In reply to Sam Weinig from comment #10)
> (In reply to Aditya Keerthi from comment #9)
> > (In reply to Sam Weinig from comment #5)
> > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > if we could clarify what the issue is, that would be great.
> > > 
> > > You say in the title, "specific color/background combinations" but I am not
> > > clear what you mean by that. Are these specific color/background
> > > combinations that exist in the wild?
> > 
> > Attached before/after screenshots and the test case.
> > 
> > The specific combination was reported by a developer through Feedback
> > Assistant.
> 
> Thanks.
> 
> Can you also clarify which tests failed when you upped the minimum color
> contrast?

Attached screenshots of fast/form/input-disabled-color.html with the existing contrast ratio threshold (1.1) and the minimum which would fix the broken testcase (1.195).

Note the changes in the left column on rows 3 and 4.
Comment 15 Aditya Keerthi 2020-12-17 14:00:01 PST
(In reply to Sam Weinig from comment #11)
> (In reply to Sam Weinig from comment #10)
> > (In reply to Aditya Keerthi from comment #9)
> > > (In reply to Sam Weinig from comment #5)
> > > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > > if we could clarify what the issue is, that would be great.
> > > > 
> > > > You say in the title, "specific color/background combinations" but I am not
> > > > clear what you mean by that. Are these specific color/background
> > > > combinations that exist in the wild?
> > > 
> > > Attached before/after screenshots and the test case.
> > > 
> > > The specific combination was reported by a developer through Feedback
> > > Assistant.
> > 
> > Thanks.
> > 
> > Can you also clarify which tests failed when you upped the minimum color
> > contrast?
> > 
> > Another idea here is to improve the lighten and darken functions to be
> > meaningful. I think they currently operate in same non-linear space. Would
> > probably make more sense for them to also be a luminance transform, though I
> > am not sure exactly on the math to do that.
> > 
> > If it's really important to revert this change now, that's ok, but if there
> > is a little time to find a solution that maintains some of the nice aspects
> > of the change I think that would be good.
> 
> Thinking about making a better lightened/darkened, I think it would probably
> be something like:
> 
> auto xyz = toXYZ(toLinearSRGB(color));
> xyz.y *= someMultiplied;
> return toSRGBA(toLinearSRGBA(xyz));
> 
> Where someMultiplied would have to be tweaked like the current
> lightened/darkened "v - 0.33f" is.

Can you clarify how making a better lightened/darkened would solve the issue?

Wouldn't that just change the color combination for which the minConstrastRatio check fails?
Comment 16 Aditya Keerthi 2020-12-17 14:01:58 PST
(In reply to Tim Horton from comment #3)
> Comment on attachment 416449 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=416449&action=review
> 
> > Source/WebCore/rendering/RenderTheme.cpp:1425
> > -    if (contrastRatio(disabledColor.toSRGBALossy<float>(), backgroundColor.toSRGBALossy<float>()) < minColorContrastValue)
> > +    if (differenceSquared(disabledColor.toSRGBALossy<uint8_t>(), backgroundColor.toSRGBALossy<uint8_t>()) < minColorContrastValue)
> 
> I wonder if it's preferable to use textColorIsLegibleAgainstBackgroundColor,
> to share the definition of legibility with the rest of WebKit? Or maybe that
> is too strict.

The minimum contrast ratio for textColorIsLegibleAgainstBackgroundColor is 4.5, which is much more strict than the existing 1.1.
Comment 17 Sam Weinig 2020-12-18 10:13:41 PST
(In reply to Aditya Keerthi from comment #15)
> (In reply to Sam Weinig from comment #11)
> > (In reply to Sam Weinig from comment #10)
> > > (In reply to Aditya Keerthi from comment #9)
> > > > (In reply to Sam Weinig from comment #5)
> > > > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > > > if we could clarify what the issue is, that would be great.
> > > > > 
> > > > > You say in the title, "specific color/background combinations" but I am not
> > > > > clear what you mean by that. Are these specific color/background
> > > > > combinations that exist in the wild?
> > > > 
> > > > Attached before/after screenshots and the test case.
> > > > 
> > > > The specific combination was reported by a developer through Feedback
> > > > Assistant.
> > > 
> > > Thanks.
> > > 
> > > Can you also clarify which tests failed when you upped the minimum color
> > > contrast?
> > > 
> > > Another idea here is to improve the lighten and darken functions to be
> > > meaningful. I think they currently operate in same non-linear space. Would
> > > probably make more sense for them to also be a luminance transform, though I
> > > am not sure exactly on the math to do that.
> > > 
> > > If it's really important to revert this change now, that's ok, but if there
> > > is a little time to find a solution that maintains some of the nice aspects
> > > of the change I think that would be good.
> > 
> > Thinking about making a better lightened/darkened, I think it would probably
> > be something like:
> > 
> > auto xyz = toXYZ(toLinearSRGB(color));
> > xyz.y *= someMultiplied;
> > return toSRGBA(toLinearSRGBA(xyz));
> > 
> > Where someMultiplied would have to be tweaked like the current
> > lightened/darkened "v - 0.33f" is.
> 
> Can you clarify how making a better lightened/darkened would solve the issue?
> 
> Wouldn't that just change the color combination for which the
> minConstrastRatio check fails?

The goal was to change the look so that we were actually lightening / darkening things correctly such that the contrast ratio would more likely to be useful, but actually looking at the alternative solution output of fast/forms/input-disabled-color.html, I think the new results subjectively (that's really all there is here) better, as I can't really read the disabled rows 3 and 4 in the current solution. What do you think?
Comment 18 Aditya Keerthi 2020-12-18 13:08:16 PST
(In reply to Sam Weinig from comment #17)
> (In reply to Aditya Keerthi from comment #15)
> > (In reply to Sam Weinig from comment #11)
> > > (In reply to Sam Weinig from comment #10)
> > > > (In reply to Aditya Keerthi from comment #9)
> > > > > (In reply to Sam Weinig from comment #5)
> > > > > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > > > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > > > > if we could clarify what the issue is, that would be great.
> > > > > > 
> > > > > > You say in the title, "specific color/background combinations" but I am not
> > > > > > clear what you mean by that. Are these specific color/background
> > > > > > combinations that exist in the wild?
> > > > > 
> > > > > Attached before/after screenshots and the test case.
> > > > > 
> > > > > The specific combination was reported by a developer through Feedback
> > > > > Assistant.
> > > > 
> > > > Thanks.
> > > > 
> > > > Can you also clarify which tests failed when you upped the minimum color
> > > > contrast?
> > > > 
> > > > Another idea here is to improve the lighten and darken functions to be
> > > > meaningful. I think they currently operate in same non-linear space. Would
> > > > probably make more sense for them to also be a luminance transform, though I
> > > > am not sure exactly on the math to do that.
> > > > 
> > > > If it's really important to revert this change now, that's ok, but if there
> > > > is a little time to find a solution that maintains some of the nice aspects
> > > > of the change I think that would be good.
> > > 
> > > Thinking about making a better lightened/darkened, I think it would probably
> > > be something like:
> > > 
> > > auto xyz = toXYZ(toLinearSRGB(color));
> > > xyz.y *= someMultiplied;
> > > return toSRGBA(toLinearSRGBA(xyz));
> > > 
> > > Where someMultiplied would have to be tweaked like the current
> > > lightened/darkened "v - 0.33f" is.
> > 
> > Can you clarify how making a better lightened/darkened would solve the issue?
> > 
> > Wouldn't that just change the color combination for which the
> > minConstrastRatio check fails?
> 
> The goal was to change the look so that we were actually lightening /
> darkening things correctly such that the contrast ratio would more likely to
> be useful, but actually looking at the alternative solution output of
> fast/forms/input-disabled-color.html, I think the new results subjectively
> (that's really all there is here) better, as I can't really read the
> disabled rows 3 and 4 in the current solution. What do you think?

I agree that the new results are subjectively better. I'll upload a new patch with the alternate solution once I rebuild + rebaseline the tests.
Comment 19 Aditya Keerthi 2020-12-19 13:22:45 PST
Created attachment 416574 [details]
Patch
Comment 20 Sam Weinig 2020-12-20 11:17:16 PST
(In reply to Aditya Keerthi from comment #18)
> (In reply to Sam Weinig from comment #17)
> > (In reply to Aditya Keerthi from comment #15)
> > > (In reply to Sam Weinig from comment #11)
> > > > (In reply to Sam Weinig from comment #10)
> > > > > (In reply to Aditya Keerthi from comment #9)
> > > > > > (In reply to Sam Weinig from comment #5)
> > > > > > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > > > > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > > > > > if we could clarify what the issue is, that would be great.
> > > > > > > 
> > > > > > > You say in the title, "specific color/background combinations" but I am not
> > > > > > > clear what you mean by that. Are these specific color/background
> > > > > > > combinations that exist in the wild?
> > > > > > 
> > > > > > Attached before/after screenshots and the test case.
> > > > > > 
> > > > > > The specific combination was reported by a developer through Feedback
> > > > > > Assistant.
> > > > > 
> > > > > Thanks.
> > > > > 
> > > > > Can you also clarify which tests failed when you upped the minimum color
> > > > > contrast?
> > > > > 
> > > > > Another idea here is to improve the lighten and darken functions to be
> > > > > meaningful. I think they currently operate in same non-linear space. Would
> > > > > probably make more sense for them to also be a luminance transform, though I
> > > > > am not sure exactly on the math to do that.
> > > > > 
> > > > > If it's really important to revert this change now, that's ok, but if there
> > > > > is a little time to find a solution that maintains some of the nice aspects
> > > > > of the change I think that would be good.
> > > > 
> > > > Thinking about making a better lightened/darkened, I think it would probably
> > > > be something like:
> > > > 
> > > > auto xyz = toXYZ(toLinearSRGB(color));
> > > > xyz.y *= someMultiplied;
> > > > return toSRGBA(toLinearSRGBA(xyz));
> > > > 
> > > > Where someMultiplied would have to be tweaked like the current
> > > > lightened/darkened "v - 0.33f" is.
> > > 
> > > Can you clarify how making a better lightened/darkened would solve the issue?
> > > 
> > > Wouldn't that just change the color combination for which the
> > > minConstrastRatio check fails?
> > 
> > The goal was to change the look so that we were actually lightening /
> > darkening things correctly such that the contrast ratio would more likely to
> > be useful, but actually looking at the alternative solution output of
> > fast/forms/input-disabled-color.html, I think the new results subjectively
> > (that's really all there is here) better, as I can't really read the
> > disabled rows 3 and 4 in the current solution. What do you think?
> 
> I agree that the new results are subjectively better. I'll upload a new
> patch with the alternate solution once I rebuild + rebaseline the tests.

Awesome. Thanks! Patch looks good. r=me.
Comment 21 Aditya Keerthi 2020-12-21 08:00:50 PST
(In reply to Sam Weinig from comment #20)
> (In reply to Aditya Keerthi from comment #18)
> > (In reply to Sam Weinig from comment #17)
> > > (In reply to Aditya Keerthi from comment #15)
> > > > (In reply to Sam Weinig from comment #11)
> > > > > (In reply to Sam Weinig from comment #10)
> > > > > > (In reply to Aditya Keerthi from comment #9)
> > > > > > > (In reply to Sam Weinig from comment #5)
> > > > > > > > I'd like to avoid re-introducing difference squared here, as its pretty much
> > > > > > > > non-sense, color-metrically, and won't scale to different color spaces, so
> > > > > > > > if we could clarify what the issue is, that would be great.
> > > > > > > > 
> > > > > > > > You say in the title, "specific color/background combinations" but I am not
> > > > > > > > clear what you mean by that. Are these specific color/background
> > > > > > > > combinations that exist in the wild?
> > > > > > > 
> > > > > > > Attached before/after screenshots and the test case.
> > > > > > > 
> > > > > > > The specific combination was reported by a developer through Feedback
> > > > > > > Assistant.
> > > > > > 
> > > > > > Thanks.
> > > > > > 
> > > > > > Can you also clarify which tests failed when you upped the minimum color
> > > > > > contrast?
> > > > > > 
> > > > > > Another idea here is to improve the lighten and darken functions to be
> > > > > > meaningful. I think they currently operate in same non-linear space. Would
> > > > > > probably make more sense for them to also be a luminance transform, though I
> > > > > > am not sure exactly on the math to do that.
> > > > > > 
> > > > > > If it's really important to revert this change now, that's ok, but if there
> > > > > > is a little time to find a solution that maintains some of the nice aspects
> > > > > > of the change I think that would be good.
> > > > > 
> > > > > Thinking about making a better lightened/darkened, I think it would probably
> > > > > be something like:
> > > > > 
> > > > > auto xyz = toXYZ(toLinearSRGB(color));
> > > > > xyz.y *= someMultiplied;
> > > > > return toSRGBA(toLinearSRGBA(xyz));
> > > > > 
> > > > > Where someMultiplied would have to be tweaked like the current
> > > > > lightened/darkened "v - 0.33f" is.
> > > > 
> > > > Can you clarify how making a better lightened/darkened would solve the issue?
> > > > 
> > > > Wouldn't that just change the color combination for which the
> > > > minConstrastRatio check fails?
> > > 
> > > The goal was to change the look so that we were actually lightening /
> > > darkening things correctly such that the contrast ratio would more likely to
> > > be useful, but actually looking at the alternative solution output of
> > > fast/forms/input-disabled-color.html, I think the new results subjectively
> > > (that's really all there is here) better, as I can't really read the
> > > disabled rows 3 and 4 in the current solution. What do you think?
> > 
> > I agree that the new results are subjectively better. I'll upload a new
> > patch with the alternate solution once I rebuild + rebaseline the tests.
> 
> Awesome. Thanks! Patch looks good. r=me.

Thank you for the review!
Comment 22 EWS 2020-12-21 08:11:12 PST
Committed r271021: <https://trac.webkit.org/changeset/271021>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 416574 [details].