Improve color contrast

[carrythebanner]

Good color contrast is important for legibility under a wide range of circumstances. It could be someone who has permanently low vision, or someone temporarily looking at a mobile device in direct sunlight.

The standards for text contrast are 4.5:1 for most text, or 3:1 for large text (see https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html for the definition of "large text"). There is also a standard of 3:1 for some meaingful non-text elements (see https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html for how that's defined; but as one example, the little triangle under "Events" or "Venues" would apply).

There are a lot of ways to approach this — the intention isn't to disallow certain colors, but to ensure that they are used in a way that doesn't keep people from being able to access content.

A lot of the site already uses good contrast for the main body text and many of the headings, which is a strong start. Some links are below the standard, however, as well as parts of the main header navigation. I'd recommend using a tool like aXe or WAVE to get an idea of what meets the target and what doesn't, then start thinking about possible color updates.