WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is this attempt at increasing contrast for a documentation system any good?

for

From: glen walker
Date: Feb 19, 2021 10:01AM

I was going to point out the same things as Patrick but he's in an earlier
time zone and was able to catch it before me :-)

One other question you asked, or rather, it was a statement and not really
a question:

"Since the system is used for programming language documentation, it
features "syntax highlighting", which uses a variety of colors to highlight
code text blocks. I found it quite challenging making each of
these colors contrast against both the background, and also from each
other!"

Yes, that is a bit tricky. You actually have two accessibility challenges
there. One is the contrast of the various text colors to the light gray
background and the other is that the different colors are conveying
information that a color deficient user might not see. The WCAG
requirement for the use of color might come into play. It's 1.4.1 "Color
is not used as the only visual means of conveying information..." (
https://www.w3.org/TR/WCAG21/#use-of-color).

The code block shows function names in blue, strings in green, declarative
words in purple, etc. Color is being used to convey information but there
are only so many other non-color things you can do. Some could be bold (in
addition to being blue), some could be italic (in addition to being green),
some could be underlined (in addition to being purple), etc. And you could
have combinations, such as bold and italic in addition to dark red. But
the "information" being conveyed by color in the code blocks is not that
important (in my opinion - as a developer myself). While color is nice to
make scanning the code quicker, sometimes I find all the color changes very
distracting and I go back to monochrome.

So I would recommend:
1. Try to have sufficient contrast for the various colors for the different
parts of the language (your "contrast" theme)
2. Provide another theme that has bold, italic, underline, either in
addition to the color or instead of the color (or both - two themes)
3. Provide a theme that doesn't have color (monochrome) in case colors are
distracting. And based on what you do for #2, the monochrome could have
bold, italic, underline.

I like your "contrast" theme. It's easier for me to read.

Glen