Skip to content

Theme: Warn about focus and highlight contrast - #85448

Closed
ciampo wants to merge 2 commits into
trunkfrom
codex/theme-focus-contrast-warnings
Closed

Theme: Warn about focus and highlight contrast#85448
ciampo wants to merge 2 commits into
trunkfrom
codex/theme-focus-contrast-warnings

Conversation

@ciampo

@ciampo ciampo commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Superseded by #85449, which includes all of these final-color warnings alongside automatic focus-ring correction. See #84087.

What?

Report focus-ring and strong brand fill colors below 3:1 contrast against neutral and brand surfaces through ThemeProvider.onColorWarnings.

Why?

A readable foreground on a solid highlight does not guarantee that the highlight itself is distinguishable from its surroundings. This draft explores reporting failures while preserving the generated colors.

How?

Check the final generated ring, resting fill, and active fill against all three neutral surfaces and the public brand surface after seed adjustments. Existing text checks keep their 4.5:1 target.

Testing Instructions

  1. Open Design System → Theme → Theme Provider → Color Scales → Default in Storybook. The default primary #3858e9 and background #fcfcfc should report no warnings.
  2. Set primary to #ffff00. Expect 3:1 contrast warnings for the solid fills while their text remains readable. The generated colors should stay unchanged.
  3. Set primary to #608010 and background to #4f386e. Expect a warning for the final active fill #6e8f26 against the neutral strong surface #563b79, at approximately 2.45:1.
Verification

The production build, theme typecheck, JavaScript lint, published-dependency audit, and all 184 theme tests passed, including the browser warning callback checks. Regression coverage checks the unrounded 3:1 threshold and final colors after seed adjustment.

Use of AI Tools

Codex was used to investigate the contrast checks, implement the warnings and regression coverage, run verification, and draft this description.

@github-actions github-actions Bot added the [Package] Theme /packages/theme label Oct 23, 2026
@github-actions

github-actions Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

📦 Bundle size

Size Change: +88 B (0%)

Total Size: 9.06 MB

📦 View Changed
Filename Size Change
build/scripts/theme/index.min.js 28.1 kB +88 B (+0.31%)

6cb09b0 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric fc27ca5 trunk % Change
timeToFirstByte 47.7 ms +6.5% -3.46% 47.7 ms +10.27% -3.77% 0%
largestContentfulPaint 84 ms +4.76% -4.76% 80 ms +7.5% -5% 5%
lcpMinusTtfb 33.6 ms +17.71% -7.29% 32 ms +2.34% -5% 5%
wpBeforeTemplate 24.12 ms +7.63% -2.2% 24.04 ms +7.7% -2.83% 0.33%
wpTemplate 19.56 ms +5.42% -3.63% 19.43 ms +5.66% -4.84% 0.67%
wpTotal 44.13 ms +6.87% -3.87% 43.88 ms +10% -4.01% 0.57%
wpMemoryUsage 7.67 MB +0% -0% 7.64 MB +0% -0% 0.43%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric fc27ca5 trunk % Change
timeToFirstByte 35.25 ms +4.68% -2.27% 40.15 ms +2.37% -3.61% -12.2%
largestContentfulPaint 80 ms +2.5% -0% 92 ms +0% -4.35% -13.04%
lcpMinusTtfb 44.95 ms +2.56% -4.12% 51 ms +2.25% -1.47% -11.86%
wpBeforeTemplate 20.88 ms +5.27% -1.34% 21.12 ms +1.42% -1.94% -1.14%
wpTemplate 11.18 ms +2.24% -2.06% 15.15 ms +5.48% -4.22% -26.2%
wpTotal 32.38 ms +5.03% -2.35% 37.07 ms +2.21% -4.4% -12.65%
wpMemoryUsage 6.25 MB +0% -0% 6.33 MB +0% -0% -1.23%
wpDbQueries 9 +0% -0% 13 +0% -0% -30.77%

media-processing

Metric fc27ca5 trunk % Change
mediaProcessingJpeg 385.49 ms +0.92% -0.31% 386.34 ms +0.72% -0.79% -0.22%
mediaProcessingAvif 5662.95 ms +0.2% -0.37% 5651.74 ms +0.16% -0.12% 0.2%
mediaProcessingJpegToAvif 3876.72 ms +0.36% -0.29% 3866.33 ms +0.31% -0.26% 0.27%

media-upload

Metric fc27ca5 trunk % Change
jpegUploadProcessing 1465.65 ms +31.87% -2.81% 1430.75 ms +23.72% -0.7% 2.44%
pngUploadProcessing 201.69 ms +6.29% -0.31% 201.76 ms +14.17% -1.98% -0.03%
largeJpegUploadProcessing 1409.31 ms +1.39% -0.44% 1411.93 ms +1.35% -0.38% -0.19%
multipleImageUploadProcessing 1577.26 ms +9.45% -1.14% 1580.74 ms +6.1% -0.57% -0.22%

post-editor

Metric fc27ca5 trunk % Change
serverResponse 259.78 ms +4.07% -9.55% 254.49 ms +6.91% -5.59% 2.08%
firstPaint 285.6 ms +16.77% -39.79% 327.24 ms +2.87% -14.51% -12.72%
domContentLoaded 716.17 ms +5.65% -5.4% 709.53 ms +6.18% -2.68% 0.94%
loaded 716.92 ms +5.66% -5.41% 710.26 ms +6.19% -2.69% 0.94%
firstContentfulPaint 317.54 ms +6.22% -9.37% 331.39 ms +2% -5.63% -4.18%
firstBlock 2063.95 ms +0.72% -0.94% 2078.65 ms +1.79% -0.66% -0.71%
type 13.11 ms +4.04% -5.64% 12.98 ms +1.16% -1.93% 1%
typeWithoutInspector 13.37 ms +7.03% -3.22% 13.05 ms +3.91% -2.61% 2.45%
typeWithTopToolbar 16.64 ms +6.13% -1.92% 17.31 ms +6.24% -4.74% -3.87%
typeContainer 6.45 ms +3.57% -4.81% 6.53 ms +0.92% -4.75% -1.23%
focus 78.05 ms +7.01% -8.26% 73.95 ms +21.65% -3.5% 5.54%
firstFocus 140.46 ms +0% -0% 145.43 ms +0% -0% -3.42%
selectAll 355.98 ms +2.1% -0.37% 333.9 ms +2.28% -2.75% 6.61%
listViewOpen 47.44 ms +14.8% -2.61% 48.85 ms +10.95% -12.81% -2.89%
inserterOpen 28.16 ms +6.57% -5.61% 26.64 ms +13.66% -3.27% 5.71%
inserterHover 8.82 ms +6.35% -5.22% 9.39 ms +7.35% -7.56% -6.07%
inserterSearch 6.91 ms +4.63% -6.22% 6.87 ms +1.89% -7.13% 0.58%
loadPatterns 417.68 ms +4.85% -2.96% 424.47 ms +7.42% -4.01% -1.6%
wpTotal 252.93 ms +4.18% -9.67% 247.8 ms +7.12% -5.73% 2.07%
wpMemoryUsage 14.71 MB +0% -0% 14.67 MB +0% -0% 0.24%
wpDbQueries 55 +0% -0% 55 +0% -0% 0%

site-editor

Metric fc27ca5 trunk % Change
serverResponse 506.66 ms +2.1% -3.82% 506.03 ms +5.14% -11.56% 0.12%
firstPaint 252.27 ms +26.98% -5.35% 276.06 ms +3.37% -3.53% -8.62%
domContentLoaded 1320.35 ms +1.29% -2.25% 1292.93 ms +0.97% -1.68% 2.12%
loaded 1321.77 ms +1.3% -2.27% 1294.1 ms +1% -1.68% 2.14%
firstContentfulPaint 522.66 ms +2.15% -18.94% 517.8 ms +4.18% -3.66% 0.94%
firstBlock 4829.93 ms +0.5% -2.73% 4768.28 ms +0.62% -0.35% 1.29%
type 19.08 ms +3.72% -1.78% 18.37 ms +11.27% -1.91% 3.86%
navigate 131.94 ms +17.35% -6.24% 123.61 ms +8.81% -0.34% 6.74%
loadPatterns 1256.11 ms +6.5% -5.16% 1352.6 ms +6.04% -3.97% -7.13%
loadPages 999.6 ms +0.98% -0.39% 1010.85 ms +1.73% -1.65% -1.11%
wpTotal 497.37 ms +2.05% -3.84% 496.34 ms +5.28% -11.77% 0.21%
wpMemoryUsage 12.72 MB +0% -0% 12.69 MB +0% -0% 0.27%
wpDbQueries 44 +2.27% -0% 44 +2.27% -0% 0%

6cb09b0 Run

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Regression: updating a specific option will only change its value and will not corrupt others in /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt. 
Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35

6cb09b0 Run

@ciampo ciampo mentioned this pull request Oct 23, 2026
Open
@ciampo ciampo closed this Oct 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

[Package] Theme /packages/theme

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ciampo