Tips: Unclear icon and icon insufficient color contrast ratio

[afercia]

Description

The Tip component is used mainly in the Main inserter, to show some 'tips' to users.

By default, it uses a decorative 'tip' icon with a yellow/orangish color.

• As a user, I'm not sure what this icon means. I could understand a light bulb icon or something along those lines, but this doesn't really look like a bulb. The shape of the current icon doesn't mean anything to me. While it's only a decorative, non-functional, icon, I'd tend to think it should represent a concept that can be easily understood by users.
• I'm not sure what is the reasoning behind using a yellow/orangish color. as far as I can tell, this color is not used elsewhere in the UI. As far as I can tell, this color is unprecedented in WordPress. I'm not sure it contributes to consistency of the UI and seems to me it doesn't help in creating some good affordance.
• The yellow/orangish color is barely visible against a light background. It may be OK for icons that are only decorative. It is not OK for icons that are functional, as in: icons that provide important information to users. Turns out some tips can contain links that open in a new tab. In this case, they also use the external link icon, which inherits the yellow/orangish color. as such the visual information that the link opens in a new tab is barely visible. This icon color should meet the minimum color contrast ratio requirement.

Screenshots:

In other places in the UI, the external link icon inherits color from the surrounding text by the means of the CSS property fill: currentColor;:

Instead, the Tip external link icon color is overridden by a CSS rule with a higher specificity:

.components-tip svg {
    fill: #f0b849;
    align-self: center;
    flex-shrink: 0;
    margin-right: 16px;
}

Step-by-step reproduction instructions

• Go to the Post editor.
• Open the main inserter.
• Enter a dummy search term, to get the 'No results' Ui.
• Wait a second.
• Observe a tip appears, with text 'Interested in creating your own block? Get started here.'
• Observe the external link icon of the 'Get started here' link is yellow/orangish.
• Observe the Tip icon doesn't make much sense.

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

[afercia]

To see more Tips occurrences, just scroll the main inserter and observe its bottom part. Some 'global tips' are shown there, randomly. As an aside: I wonder how much these tips are discoverable: