Skip to content

Fix Connectors and Fonts pages background and color contrast #82826

Closed

Description

@afercia

Description

With the latest updates to the packages into Core, the Appearance > Fonts page and the Settings > Connectors page have now a different background color.

Connectors page background is now --wpds-color-background-surface-neutral which is a light gray #fcfcfc. Previously, it was white.

Fonts page backgrouns is #fcfcfc but the inner container .font-library-page__content does have a background color set to --wpds-color-background-surface-neutral-strong) which is white.

As such, the actual background color of the two pages is different. It should be consistent.

More importantly, this change mede the fix for the color contrast of the Help paragraoh in the Connectors page useless. #82329 / #82378 changed that text color to $gray-700 > #757575 and that was OK with a white background. But now that the backgrouns is a light gray, the contrast is not sufficient.

I'd like to propose:

  • Make the backtround of the two pages consistent (#fcfcfc).
  • Remove any usage of the color #757575 and use #707070 instead, In the design system, --wpds-color-foreground-content-neutral-weak: #707070 is specifically documented as Foreground color for content like text with weak emphasis. so that it appears the most appropriate color to use for text that needs to be less prominent but still provide a sufficient contrast ratio.

Important:
Note that this issue is a blocker for Core-66015 / WordPress/wordpress-develop#13348 and should be fixed and ported to WordPress soon, please.

Step-by-step reproduction instructions

  • Go to the Connectors page.
  • Observe the paragraph at the bottom of the page, the one that starts with text If the connector you need is not listed...
  • Observe the text color of the paragraph is #757575 which, against the #fcfcfc background, provides an insufficient contrast ratio of 4.49:1.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions