Insufficient color contrast for the post list title badge and the post card title badge

[afercia]

Description

Some special Pages (and potentially other objects edited in the editor) show a 'badge' with an additional label to clarify the special nature fo the edited object. For example: The page set as home page and the page set as posts page.

These badges belong to different components but they use the same design pattern. The color contrast is insufficient gor both:
Text color: #757575
Background color: #f0f0f0

That gives a color contrast of only 4.04:1. It should be at least 4.6:1

To help search through the c odebase, the CSS selectors for these are:
edit-site-post-list__title-badge
editor-post-card-panel__title-badge

Cc @WordPress/gutenberg-design

Step-by-step reproduction instructions

• Go to the wp-admin Reading Settings.
• Set your homepage to display a static page.
• Set a Posts page.
• Go to the Site editor > Pages.
• In the list of pages, search for the pages used for the homepage and posts page.
• Observe they both show a 'badge' with an additional label.
• Observe the color contrast of the badge is insufficient.
• Select one of these special pages.
• In the Settings panel, observe the color contrast of the badge in the post card panel is insufficient.

Screenshots, screen recording, code snippet

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