Improve contrast of interactive example

[schalkneethling]

trafficstars

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 https://github.com/mdn/yari/issues/5387#issuecomment-1055782535

[vedant-z]

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

[bsmth]

Has this already been fixed in the following PR?

• [x] https://github.com/mdn/css-examples/pull/75

[NiedziolkaMichal]

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

[vedant-z]

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

[NiedziolkaMichal]

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

• [ ] all #2460
• [ ] backdrop-filter #2460
• [ ] backface-visibility #2460
• [ ] background-attachment #2460
• [ ] background-clip #2460
• [ ] background-origin #2460
• [x] bottom #2419
• [ ] box-decoration-break #2460
• [ ] box-sizing #2460
• [ ] clear #2460
• [ ] color #2460
• [x] counter-set #2473
• [x] float #2473
• [x] inset-block-end #2473
• [x] inset-block-start #2473
• [x] inset-block #2473
• [x] inset-inline-end #2473
• [x] inset-inline-start #2473
• [x] inset-inline #2473
• [x] inset #2473
• [x] left #2419
• [ ] list-style-type
• [ ] margin-block-end
• [ ] margin-block-start
• [ ] margin-block
• [ ] margin-bottom
• [ ] margin-inline-end
• [ ] margin-inline-start
• [ ] margin-inline
• [x] opacity #2489
• [ ] pointer-events
• [x] right #2419
• [x] scroll-behavior #2475
• [x] text-emphasis-position #2452
• [x] text-emphasis #2475
• [x] top #2419
• [x] transform-origin #2419
• [x] transform-style #2452
• [x] angle #2437

[wbamberg]

This has again been reported at https://github.com/mdn/interactive-examples/issues/2368. It's sad that such a bad usability issue has been open for so long :(

See also https://github.com/mdn/bob/issues/859.