feat(curriculum): Add interactive examples to accessible backgrounds lesson (#62818)

curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-some-accessibility-considerations-for-backgrounds
 ---
 
-# --description--
+# --interactive--
 
 In web design, backgrounds play a vital role in defining the overall look and feel of a webpage.
 
@@ -21,7 +21,9 @@ The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast rat
 
 For example, placing white text on a light-gray background would result in poor contrast, making the text difficult to read. However, white text on a dark-blue background would provide good contrast, enhancing readability for all users.
 
-Here’s an example of poor contrast:
+Here's an example of poor contrast:
+
+:::interactive_editor
 
 ```html
 <p style="color: lightgray; background-color: whitesmoke;">
@@ -29,7 +31,11 @@ Here’s an example of poor contrast:
 </p>
 ```
 
-Now, here’s an example of good contrast:
+:::
+
+Now, here's an example of good contrast:
+
+:::interactive_editor
 
 ```html
 <p style="color: white; background-color: darkslategray;">
@@ -37,21 +43,10 @@ Now, here’s an example of good contrast:
 </p>
 ```
 
+:::
+
 Another consideration is avoiding placing text over busy or complex backgrounds, such as images or gradients with multiple colors. Busy backgrounds can make it hard to distinguish the text from the background, regardless of the contrast.
 
-If you must use a background image, it’s a good idea to apply a semi-transparent overlay or a solid color behind the text to make it more readable. Here's an example of how you can do this:
-
-```css
-.background-image-text {
-  background-image: url('fcc-logo.svg');
-  color: white;
-  padding: 20px;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-```
-
-This code places a semi-transparent black overlay behind the text, improving its readability against the background image.
-
 When designing backgrounds, avoid using color as the sole means of conveying information. For example, using just color to indicate an error or success message (such as red for error or green for success) can be problematic for users with color blindness.
 
 In addition to color, you should use symbols or text to convey information. For example, alongside a red error message, you could use an icon or bold text to make it clear that there’s an error.