Update invalid rules text color for 4.5:1 WCAG 2.1 AA contrast

What does this MR do and why?

Update invalid rules text color for 4.5:1 WCAG 2.1 AA contrast. Update gl-text-gray-400 class to gl-text-gray-500.

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. View MR page e.g.
2. Satisfy criteria for invalid rule text to display or apply patch below
3. Inspect text to ensure contrast is > 4.5:1

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
index 207d1216e7d0..9fb3d6911433 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue
@@ -157,17 +157,18 @@ export default {
         : this.$options.i18n.invalidFailedRuleSingular;
     },
     pluralizedRuleText() {
-      return [
-        this.hasInvalidFailedRules
-          ? sprintf(this.pluralizedFailedRuleText, { rules: this.invalidFailedRules.length })
-          : null,
-        this.hasInvalidApprovedRules
-          ? sprintf(this.pluralizedApprovedRuleText, { rules: this.invalidApprovedRules.length })
-          : null,
-      ]
-        .filter((text) => Boolean(text))
-        .join(', ')
-        .concat('.');
+      return 'Example invlaid rule text';
+      // return [
+      //   this.hasInvalidFailedRules
+      //     ? sprintf(this.pluralizedFailedRuleText, { rules: this.invalidFailedRules.length })
+      //     : null,
+      //   this.hasInvalidApprovedRules
+      //     ? sprintf(this.pluralizedApprovedRuleText, { rules: this.invalidApprovedRules.length })
+      //     : null,
+      // ]
+      //   .filter((text) => Boolean(text))
+      //   .join(', ')
+      //   .concat('.');
     },
     requireSamlAuthToApprove() {
       return this.mr.requireSamlAuthToApprove;
@@ -293,7 +294,7 @@ export default {
               :multiple-approval-rules-available="mr.multipleApprovalRulesAvailable"
             />
           </div>
-          <div v-if="hasInvalidRules" class="gl-text-gray-500 gl-mt-2" data-testid="invalid-rules">
+          <div v-if="true" class="gl-text-gray-500 gl-mt-2" data-testid="invalid-rules">
             <gl-sprintf :message="pluralizedRuleText">
               <template #danger="{ content }">
                 <span class="gl-font-weight-bold text-danger">{{ content }}</span>

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.