Bug report: fix color contrast for alpha text in heading and about menu item

[dmundra]

Describe the bug

Running an updated version pa11y-ci and axe on the home page and other pages we are now getting errors regarding the color contrast of specifically the alpha text and about menu item. Here is the report

dmundra in ~/workspace/accessibility/accessibility on branch pa11y-ci-update > npm run pa11y-ci:home   

> pa11y-ci:home
> pa11y-ci http://127.0.0.1:4000

Running Pa11y on 1 URLs:
 > http://127.0.0.1:4000/ - 2 errors

Errors in http://127.0.0.1:4000/:

 • Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/4.3/color-contrast?application=axeAPI)

   (#extended-logo > em > a > sup)

   <sup>ALPHA</sup>

 • Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/4.3/color-contrast?application=axeAPI)

   (html > body > header > nav > div > ul > li:nth-child(1) > button > span)

   <span>About</span>

For now I am going to disable color-contrast checks in the .pa11yci file in https://github.com/CivicActions/accessibility/pull/580 till we can fix this.

To Reproduce Steps to reproduce the behavior:

1. Check out code.
2. Remove "color-contrast" from the ignore section in the .pa11yci file.
3. Run npm run pa11y-ci:home
4. See error

Expected behavior Adjust the styling to pass Axe checks

[dmundra]

The error is caused by axe not being able to calculate the color ratio. The browser extension returns this error message: Unable to determine contrast ratio. So there might not be a solution to this other than ignoring.