Issue #3020418 by antoineh, ckrina, bnjmnm, fhaeberle, saschaeggi, andregp, ravi.shankar, priyanka.sahni, rkoller, huzooka, balsama, cindytwilliams, modulist, lauriii, antonellasevero: Update Placeholder styles so that contrast ratio passes guidelines

core/themes/claro/css/base/variables.css

@@ -100,7 +100,7 @@
   --input-fg-color: var(--color-fg);
   --input-bg-color: var(--color-bg);
   --input-fg-color--description: var(--color-gray-800);
-  --input-fg-color--placeholder: var(--color-gray-500);
+  --input-fg-color--placeholder: var(--color-gray-700);
   --input-border-color: var(--color-gray-500);
   --input--hover-border-color: var(--color-text);
   --input--focus-border-color: var(--color-absolutezero);

core/themes/claro/css/base/variables.pcss.css

@@ -94,7 +94,7 @@
   --input-fg-color: var(--color-fg);
   --input-bg-color: var(--color-bg);
   --input-fg-color--description: var(--color-gray-800);
-  --input-fg-color--placeholder: var(--color-gray-500);
+  --input-fg-color--placeholder: var(--color-gray-700);
   --input-border-color: var(--color-gray-500);
   --input--hover-border-color: var(--color-text);
   --input--focus-border-color: var(--color-absolutezero);

core/themes/claro/css/components/form.css

@@ -11,6 +11,7 @@
  */
 
 ::placeholder {
+  opacity: 1;
   color: var(--input-fg-color--placeholder);
 }
 

core/themes/claro/css/components/form.pcss.css

@@ -4,6 +4,7 @@
  */
 
 ::placeholder {
+  opacity: 1;
   color: var(--input-fg-color--placeholder);
 }
 /* IE 10 and 11 needs this set as important. */