fix(css): Fix 10 contrast issues (#2460)

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

live-examples/css-examples/backgrounds-and-borders/background-attachment.css

@@ -11,7 +11,7 @@
     height: 100%;
     background: url('/media/examples/lizard.png') right 3rem top 1rem / 15rem no-repeat,
         url('/media/examples/moon.jpg') center / 10rem;
-    color: #fff;
+    color: #ff5454;
     font-size: 1.5em;
     font-weight: bold;
     overflow: auto;

live-examples/css-examples/backgrounds-and-borders/background-clip.css

@@ -1,6 +1,7 @@
 #example-element {
-    background-image: url('/media/examples/hand.jpg');
-    color: #fff;
+    background-image: url('/media/examples/leopard.jpg');
+    color: #d73611;
+    text-shadow: 2px 2px black;
     padding: 20px;
     border: 10px dashed #333;
     font-size: 2em;

live-examples/css-examples/basic-box-model/clear.css

@@ -7,14 +7,14 @@
 
 .floated-left {
     border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    background-color: rgba(81, 81, 81, 0.6);
     padding: 1em;
     float: left;
 }
 
 .floated-right {
     border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    background-color: rgba(81, 81, 81, 0.6);
     padding: 1em;
     float: right;
     height: 150px;

live-examples/css-examples/basic-user-interface/box-sizing.css

@@ -8,7 +8,7 @@
 #example-element {
     height: 60px;
     margin: 2em auto;
-    background-color: rgba(229, 232, 252, 0.6);
+    background-color: rgba(81, 81, 81, 0.6);
 }
 
 #example-element > p {

live-examples/css-examples/cascading-and-inheritance/all.css

@@ -1,11 +1,16 @@
 #example-element {
-    color: red;
+    color: gold;
     padding: 10px;
     font-size: 1.5rem;
     text-align: left;
     width: 100%;
 }
 
 .example-container {
-    border: 2px dashed #999;
+    border: 2px dashed #2d5ae1;
+}
+
+.example-container-bg {
+    background-color: #77767b;
+    padding: 20px;
 }

live-examples/css-examples/cascading-and-inheritance/all.html

@@ -37,8 +37,10 @@
 
 <div id="output" class="output hidden">
   <section id="default-example">
-      <div class="example-container">
-        <p id="example-element">This paragraph has a font size of 1.5rem and a color of red. It also has 1rem of vertical margin set by the user-agent. The parent of the paragraph is a &lt;div&gt; with a dashed gray border.</p>
+      <div class="example-container-bg">
+          <div class="example-container">
+            <p id="example-element">This paragraph has a font size of 1.5rem and a color of gold. It also has 1rem of vertical margin set by the user-agent. The parent of the paragraph is a &lt;div&gt; with a dashed blue border.</p>
+          </div>
       </div>
   </section>
 </div>

live-examples/css-examples/color/color.css

@@ -1,4 +1,8 @@
 #example-element {
-    padding: 1em;
     font-size: 1.5em;
 }
+
+.example-container {
+    background-color: white;
+    padding: 10px;
+}

live-examples/css-examples/color/color.html

@@ -7,7 +7,7 @@
 </div>
 
 <div class="example-choice">
-<pre><code class="language-css">color: #00ff00;</code></pre>
+<pre><code class="language-css">color: #00a400;</code></pre>
 <button type="button" class="copy hidden" aria-hidden="true">
     <span class="visually-hidden">Copy to Clipboard</span>
 </button>
@@ -21,21 +21,21 @@
 </div>
 
 <div class="example-choice">
-<pre><code class="language-css">color: hsl(30, 100%, 50%);</code></pre>
+<pre><code class="language-css">color: hsl(30deg 82% 43%);</code></pre>
 <button type="button" class="copy hidden" aria-hidden="true">
     <span class="visually-hidden">Copy to Clipboard</span>
 </button>
 </div>
 
 <div class="example-choice">
-<pre><code class="language-css">color: hsla(30, 100%, 50%, .3);</code></pre>
+<pre><code class="language-css">color: hsla(237deg 74% 33% / 61%);</code></pre>
 <button type="button" class="copy hidden" aria-hidden="true">
     <span class="visually-hidden">Copy to Clipboard</span>
 </button>
 </div>
 
 <div class="example-choice">
-<pre><code class="language-css">color: hwb(1.5708rad 20% 10% / 0.7);</code></pre>
+<pre><code class="language-css">color: hwb(152deg 0% 58% / 70%);</code></pre>
 <button type="button" class="copy hidden" aria-hidden="true">
     <span class="visually-hidden">Copy to Clipboard</span>
 </button>
@@ -44,6 +44,8 @@
 
 <div id="output" class="output large hidden">
     <section id="default-example">
-        <p id="example-element">London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+        <div class="example-container">
+            <p id="example-element">London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather.</p>
+        </div>
     </section>
 </div>

live-examples/css-examples/filter-effects/backdrop-filter.css

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    color: black;
 }
 
 #example-element {

live-examples/css-examples/fragmentation/box-decoration-break.css

@@ -3,7 +3,8 @@
 }
 
 #example-element {
-    background: linear-gradient(to bottom right, #fffd55, #387d22);
+    background: linear-gradient(to bottom right, #6f6f6f, #000);
+    color: white;
     box-shadow: 8px 8px 10px 0 #ff1492, -5px -5px 5px 0 #00f, 5px 5px 15px 0 #ff0;
     padding: 0 1em;
     border-radius: 16px;

live-examples/css-examples/transforms/backface-visibility.css

@@ -29,7 +29,7 @@
 
 .back {
     background: rgb(230, 0, 0);
-    color: black;
+    color: white;
     transform: rotateY(180deg) translateZ(50px);
 }