The impossibility of Web Content Accessibility Guidelines - text contrast
Though this blog is my first formal foray into web design and CSS and such, I am coming in with a small amount of prior knowledge. I have mild deuteranopia, so color palettes are of importance to me. I have submitted specific complaints with notes and seen the changes to the CapitalOne app and my library website to make them better for visually impaired peoples.
Here on bearblog, I want to make my blog accessibility the first priority. For WCAG text contrast, this seems easy enough to achieve their AAA standard of 7:1 text to background contrast ratio, in both light and dark themes. The real impossibility comes from the additional guideline regarding link colors from guideline 1.4.1 technique G183, stipulating there should be a 3:1 ratio for the link to text contrast. I used WebAIM's contrast checker and link contrast checker to help with my testing. It is easy enough to accomplish in light mode, though the range of colors is small. This site provides examples. In dark mode, #8788FF seems to be the only link color capable of meeting these requirements with #000 background and #FFF text. Without using the pure white text and pure black background, these two ratios of 7:1 and 3:1 are not able to be met by any color combination.
In themes I've seen on bearblog, it seems most people reach one of the following solutions:
- entirely forgo the link to text color contrast and simply use underlines
- utilize underlines plus a mild color contrast
- adhere to the lower AA standard of 4.5:1 contrast for text to background
The majority of Robert Birming's color palettes as well as the default themes on bearblog implement these solutions. For example, Birming's Polarnatt high contrast theme for low vision readers possesses a link to text ratio of only 1.88:1, but with underlined links, this presents little or no issue. My current site theme represents my closest attempts to reach these ratios while maintaining green links. I have highlighting for hover and focus as well, and try to write descriptive caption for images uploaded. Maybe that's supposed to be in the alt text. Not sure. I will certainly learn more about this topic in the future.
I may be trying too stringently attempting to apply these standards, but if I've ever had trouble navigating or focusing on a page, then there are definitely others experiencing much more difficultly. Astigmatism, light sensitivity, migraines, blindness. I want to minimize their struggle and improve ease of use for everyone. My main introduction to this was while searching static site generator themes before I ultimately decided on using bearblog. I discovered only 2 out of 127 themes on Zola were tagged as accessible, and that tag didn't even exist on Hugo. But that led to discovering the themes by Harry Min Khant, a 19 year old technology enthusiast from Myanmar who has been blind since birth, proving they are out there and deserve equal opportunity, respect, and accessibility in the online spaces we may take for granted. This goes without mentioning ANY accessibility nightmares that occur in the real world.
I am hoping my time spent on CSS and theming is short and infrequent, so that I may focus on living and writing more instead of tweaking and customizing. Maybe it's over, and my site is theme is now complete. Who knows.
Until next time.