add a11y information for contrast ratio in background-images and fix issue in the example #33190
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Content:CSS
|
Preview URLs External URLs (3)URL:
(comment last updated: 2024-05-22 09:12:42) |
chrisdavidmills
requested changes
Apr 21, 2024
There was a problem hiding this comment.
Thank you for a super-useful update, @glmvc!
I have left a few suggestions for you to consider, but this is mostly looking good.
| @@ -83,8 +91,10 @@ Note that the star image is partially transparent and is layered over the cat im | |||
|
|
|||
| ```css | |||
| p { | |||
| font-weight: bold; | |||
There was a problem hiding this comment.
This is still difficult to read. I think white text with a black text shadow (I used text-shadow: 0.07em 0.07em 0.05em black;) is more legible
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
chrisdavidmills
approved these changes
May 22, 2024
There was a problem hiding this comment.
LGTM, thanks again @glmvc, and apologies for taking so long to respond to this.
Note: I made a couple of changes to the example text color and shadow as I felt it was still pretty hard to read.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
On the reference page for the
background-imageCSS property, there is an example "Layering background images" where the text is hard to read because of the background images.On other pages, such as
background-color, there is information about contrast ratio (Accessibility concerns).I've added that information for
background-imageas well, and fixed the contrast ratio issue in the example below.Motivation
Such aspects should be stated and applied consistently.
Additional details
/
Related issues and pull requests