Improve contrast of interactive example

[schalkneethling]

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]

![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]

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:

• [x] all #2460
• [x] backdrop-filter #2460
• [x] backface-visibility #2460
• [x] background-attachment #2460
• [x] background-clip #2460
• [x] background-origin #2460
• [x] bottom #2419
• [x] box-decoration-break #2460
• [x] box-sizing #2460
• [x] clear #2460
• [x] 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
• [x] list-style-type #2469
• [x] margin-block-end #2469
• [x] margin-block-start #2469
• [x] margin-block #2469
• [x] margin-bottom #2469
• [x] margin-inline-end #2469
• [x] margin-inline-start #2469
• [x] margin-inline #2469
• [x] opacity #2489
• [x] pointer-events #2469
• [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.