Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve contrast of interactive example #2054

Open
schalkneethling opened this issue Mar 21, 2022 · 6 comments
Open

Improve contrast of interactive example #2054

schalkneethling opened this issue Mar 21, 2022 · 6 comments
Labels
a11y good first issue A good issue for newcomers to get started with. idle Issues and pull requests with no activity for three months. p1 We will address this soon and will provide capacity from our team for it in the next few releases.

Comments

@schalkneethling
Copy link

There are probably other situations where too little contrast makes things hard to see. Compare these white letters on bright yellow background atop this page,

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

I'll stop reporting these, anyone could find them easily.

Originally posted by @iDave2 in mdn/yari#5387 (comment)
@schalkneethling schalkneethling added a11y p1 We will address this soon and will provide capacity from our team for it in the next few releases. labels Mar 21, 2022
@NiedziolkaMichal NiedziolkaMichal mentioned this issue Mar 27, 2022
Merged
This was referenced May 7, 2022
Merged
Merged
Merged
@vedant-z
Copy link

Uploading r4{bfc025b} (290f7d3c-25a8-48b2-b308-0d7245079b1a id=0x7f0a0400 tag=BaseCommentFragment) …

@schalkneethling Are you referring to this part. If so I need to change the BG color for better visibility right?

@bsmth
Copy link
Member

bsmth commented Nov 29, 2022

Has this already been fixed in the following PR?

@NiedziolkaMichal
Copy link
Member

Unfortunately there are still plenty of examples with too low contrast.

@vedant-z
Copy link

@NiedziolkaMichal Can you point out me some so that I can get started contributing to this repository

@NiedziolkaMichal
Copy link
Member

NiedziolkaMichal commented Nov 29, 2022 •
edited by bsmth
Loading

Those are all CSS examples that don't meet proper contrast guidelines in dark theme according to the firefox accessibility tool:

@wbamberg wbamberg mentioned this issue Dec 17, 2022
Closed
@wbamberg
Copy link
Contributor

wbamberg commented Dec 17, 2022 •
edited
Loading

This has again been reported at #2368. It's sad that such a bad usability issue has been open for so long :(

See also mdn/bob#859.

@NiedziolkaMichal NiedziolkaMichal added the good first issue A good issue for newcomers to get started with. label Dec 21, 2022
@NiedziolkaMichal NiedziolkaMichal pinned this issue Dec 21, 2022
@bsmth bsmth mentioned this issue Dec 27, 2022
Closed
@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Jan 21, 2023
This was referenced Jan 21, 2023
Closed
Closed
@github-actions github-actions bot removed the idle Issues and pull requests with no activity for three months. label Jan 22, 2023
@rohini-ranjanR rohini-ranjanR mentioned this issue Jan 22, 2023
Closed
@rohini-ranjanR rohini-ranjanR mentioned this issue Feb 4, 2023
Merged
NiedziolkaMichal pushed a commit that referenced this issue Feb 13, 2023
@rohini-ranjanR
improve contrast of top (#2419)
754fcf2 
* CSS contrast in transform-origin example (#1)

Changing color to have good contrast in CSS examples issue #2054

* add alt attribute

Adding alt="" to transform-origin.html

* text-emphasis contrast

changing color to have a good contrast

* improve contrast top 

improve contrast in the top issue #2054

* update colors

* restore colors
@bsmth bsmth mentioned this issue Feb 14, 2023
Closed
@rohini-ranjanR rohini-ranjanR mentioned this issue Feb 15, 2023
Merged
This was referenced Feb 24, 2023
Merged
Merged
@rohini-ranjanR rohini-ranjanR mentioned this issue Mar 4, 2023
Merged
@rohini-ranjanR rohini-ranjanR mentioned this issue Mar 8, 2023
Merged
@rohini-ranjanR rohini-ranjanR mentioned this issue Mar 21, 2023
Merged
@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Apr 27, 2023
@dkdk225 dkdk225 mentioned this issue Nov 18, 2023
Merged
@onno-vdbroek onno-vdbroek mentioned this issue May 3, 2024
Merged
@mdn mdn deleted a comment from Maykon153 Jul 1, 2024
@mdn mdn deleted a comment from Maykon153 Jul 1, 2024
@github-actions github-actions bot removed the idle Issues and pull requests with no activity for three months. label Jul 1, 2024
@github-actions github-actions bot added the idle Issues and pull requests with no activity for three months. label Aug 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y good first issue A good issue for newcomers to get started with. idle Issues and pull requests with no activity for three months. p1 We will address this soon and will provide capacity from our team for it in the next few releases.
Projects
Yari Platform Engineering
Status: Backlog
Milestone
No milestone
Development

No branches or pull requests
5 participants
@wbamberg @schalkneethling @bsmth @vedant-z @NiedziolkaMichal