Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 70fe1a50bf5af47e75e73943e95489c7d94c69c5
https://github.com/WebKit/WebKit/commit/70fe1a50bf5af47e75e73943e95489c7d94c69c5
Author: Anuj Panta <[email protected]>
Date: 2026-02-26 (Thu, 26 Feb 2026)
Changed paths:
M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
M Source/WebInspectorUI/UserInterface/Models/Color.js
M Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
M Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
M Source/WebInspectorUI/UserInterface/Views/ColorSquare.css
M Source/WebInspectorUI/UserInterface/Views/ColorSquare.js
M Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
M Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
Log Message:
-----------
Web Inspector: Adding color contrast information within Color Picker
https://bugs.webkit.org/show_bug.cgi?id=260101
rdar://113887185
Reviewed by Devin Rousso (OOPS\!).
Add contrast ratio threshold lines to the color picker overlay when editing
text color
properties. Two lines indicate AA and AAA WCAG compliance thresholds, helping
developers
pick accessible colors without leaving the picker.
All contrast calculations happen in the frontend using the WCAG 2.0 relative
luminance
formula (https://www.w3.org/TR/WCAG20/#relativeluminancedef) and contrast ratio
formula
(https://www.w3.org/TR/WCAG20/#contrast-ratiodef). This avoids backend
round-trips and
provides instant feedback as users drag within the color square. The
implementation uses
binary search to find brightness values that achieve target luminance at each
saturation
level, rendering results as SVG polylines.
Semi-transparent foreground colors are blended over the background before
calculating
contrast, ensuring accurate ratios for colors with alpha < 1.
WCAG defines relaxed thresholds for "large text" (≥18pt or ≥14pt bold). Normal
text requires
4.5:1 for AA and 7:1 for AAA. Large text only requires 3:1 for AA and 4.5:1 for
AAA. The
implementation reads computed font-size and font-weight to detect large text
and adjusts
the threshold lines accordingly.
A contrast info section below the picker displays the current ratio and
compliance badge (AAA/AA/Fail) alongside the background color swatch.
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Models/Color.js:
(WI.Color.prototype.contrastComplianceForRatio):
(WI.Color.prototype.relativeLuminance):
(WI.Color.prototype.contrastRatio):
(WI.Color.prototype.contrastCompliance):
(WI.Color.prototype.blendOverBackground):
(WI.Color):
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.css:
(.color-picker > .contrast-info + .variable-color-swatches):
(.color-picker > .variable-color-swatches > h2):
(.color-picker > .contrast-info):
(.color-picker > .contrast-info > .contrast-label):
(.color-picker > .contrast-info > .contrast-ratio):
(.color-picker > .contrast-info > .compliance-badge):
(.color-picker > .contrast-info > .compliance-badge.contrast-aaa):
(@media (prefers-color-scheme: dark) .color-picker > .contrast-info >
.compliance-badge.contrast-aaa):
(.color-picker > .contrast-info > .compliance-badge.contrast-aa):
(@media (prefers-color-scheme: dark) .color-picker > .contrast-info >
.compliance-badge.contrast-aa):
(.color-picker > .contrast-info > .compliance-badge.contrast-fail):
(@media (prefers-color-scheme: dark) .color-picker > .contrast-info >
.compliance-badge.contrast-fail):
(.color-picker > .contrast-info > .contrast-separator):
(.color-picker > .contrast-info > .inline-swatch):
* Source/WebInspectorUI/UserInterface/Views/ColorPicker.js:
(WI.ColorPicker.prototype.async colorInputsWrapperElement):
(WI.ColorPicker.prototype.set opacity):
(WI.ColorPicker.prototype.set color):
(WI.ColorPicker.prototype._updateColor):
(WI.ColorPicker.prototype._createContrastInfoSection):
(WI.ColorPicker.prototype._updateContrastInfo):
(WI.ColorPicker):
* Source/WebInspectorUI/UserInterface/Views/ColorSquare.css:
(.color-square > .contrast-lines-svg):
(.color-square > .contrast-lines-svg > .contrast-line):
(.color-square > .contrast-lines-svg > .contrast-line.contrast-aa-threshold):
(.color-square > .contrast-lines-svg > .contrast-line.contrast-aaa-threshold):
(.color-square > .contrast-label):
(.color-square > .contrast-label.contrast-aa-label):
(.color-square > .contrast-label.contrast-aaa-label):
(@media (prefers-color-scheme: dark) .color-square > .contrast-label):
* Source/WebInspectorUI/UserInterface/Views/ColorSquare.js:
(WI.ColorSquare):
(WI.ColorSquare.prototype.get contrastBackgroundColor):
(WI.ColorSquare.prototype.set contrastBackgroundColor):
(WI.ColorSquare.prototype.get opacity):
(WI.ColorSquare.prototype.set opacity):
(WI.ColorSquare.prototype.get isLargeText):
(WI.ColorSquare.prototype.set isLargeText):
(WI.ColorSquare.prototype._updateBaseColor):
(WI.ColorSquare.prototype._drawSRGBOutline):
(WI.ColorSquare.prototype._drawContrastLines):
(WI.ColorSquare.prototype._calculateContrastLinePoints):
(WI.ColorSquare.prototype._findBrightnessForLuminance):
(WI.ColorSquare.prototype._updatePolylinePoints):
(WI.ColorSquare.prototype._updateContrastLabel):
* Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js:
* Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.inlineSwatchGetContrastInfo):
Canonical link: https://commits.webkit.org/308318@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
