A11y issue: Small type color is too light

[machikoyasuda]

There's an error on both Partners and Stories pages and some current pages on production:

Results for URL: http://localhost:4000/customer-stories

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation:  change text colour to #73777D.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > section > div > div > article > section:nth-child(2) > figure:nth-child(1) > figcaption
   └── <figcaption class="small text-end text-secondary pt-2"> Courtesy of Vent...</figcaption>
 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation:  change text colour to #73777D.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > section > div > div > article > section:nth-child(3) > figure:nth-child(1) > figcaption
   └── <figcaption class="small text-end text-secondary pt-2">Courtesy of TBD</figcaption>
 • Error: Heading tag found with no content. Text that is not intended as a heading should not be marked up with heading tags.
   ├── WCAG2AA.Principle1.Guideline1_3.1_3_1.H42.2
   ├── #stories-contactless-payments-GCTD
   └── <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-2" id="stories-contactless-payments-GCTD"></h3>
 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation:  change text colour to #73777D.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > section > div > div > article > section:nth-child(5) > figure:nth-child(8) > figcaption
   └── <figcaption class="small text-end text-secondary pt-2">Courtesy of Monterey-Salinas Tr...</figcaption>
4 Errors

Results for URL: http://localhost:4000/partners

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.02:1. Recommendation:  change text colour to #feffff.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #fnref:1 > a
   └── <a class="text-decoration-nonte" href="#fn:1" rel="footnote">1</a>

1 Errors

Both of these colors

  --bs-tertiary-color: rgb(96, 101, 107); /* calitp-scales-gray-4 */
  --bs-secondary-rgb: 143, 147, 153; /* calitp-gray-3 */

are not contrasted enough at small sizes.

Before we code this, we need to make sure that the replacement color is also high-contrast enough.

The caption and the footnotes:

Production:
https://www.calitp.org/press and resources page's dateline uses the same color as the Customer Stories page and it's also too light - so this is an existing bug in our Design system/color scheme.

[machikoyasuda]

Just checked the project's color palette:

For type that is under size 18, the following colors in our color palette are NOT allowed:

• gray-3 #8F9399
• gray-2 #C8C8C9
• gray-1 #EEEEEE
• slate-3 #7790A3
• slate-2 #98AAB9
• slate-1 #E4E9ED

If we are to choose colors from this list, slate-4, slate-5 or gray-4 are our only gray color options.

Here's the rule itself for reference: The level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text.
I've been using this site to check and document: https://coolors.co/contrast-checker/8f9399-ffffff

[machikoyasuda]

Resolved by removing the text