Diagrams Colors Accessibility Problems

[tajmone]

• Create a better color palette for the diagrams, ensuring that all its tints and shades meet the WCAG AAA standards when used as BG colors against black normal text.
• Fix all diagrams colors accordingly.

---

The original color diagrams use a common palette which contains various shades of same basic colors.

Some of these colors, in their darker shades, fail to pass some of the Contrast and Color Accessibility test. For example, git-objects.svg (Fig.4 of the book):

Some of these background colors don't fair too well on the WebAIM on-line contrast checker when tested against a black foreground text:

BG Color	Contrast Ratio
#8086AC	5.92:1
#699768	6.22:1
#C5919B	7.89:1

(click on color values to view their WebAIM on-line tests)

WCAG AA/AAA Results for Normal Text

Only one of the above BG/FG colors meets the triple AAA standard of the WCAG (Web Content Accessibility Guidelines) when tested for normal text sizes:

BG Color	WCAG AA	WCAG AAA
#8086AC	Pass	Fail
#699768	Pass	Fail
#C5919B	Pass	Pass

WCAG AA/AAA Results for Large Text and UI Components

All colors meet the WCAG AA and AAA for large text and for Graphical Objects and User Interface Components:

BG Color	WCAG AA	WCAG AAA
#8086AC	Pass	Pass
#699768	Pass	Pass
#C5919B	Pass	Pass

---

Overall, I find these shades are too dark and hard to read, especially in diagrams containing small text, or which are packed with lots of text.

We might also just keep using the lighter shades, and replace the darker ones.

But I think that we could come up with a better color palette altogether (less dull, possibly with light pastel colors which are slightly more vibrant).

[tajmone]

@SicroAtGit, how do you like the new color scheme?

I personally like it, even though the pinkish color is a bit louder than others, but the readability is now greatly improved (before, I could hardly read some of the diagrams with dark BG colors, especially the purple).

Anyhow, the colors' contrast accessibility values were tested one by one, and they passed all criteria. Since the whole scheme was generated via color harmonies (using perceptual algorithms, not mere digital color manipulations), the palette is well balanced.

Also, I like the newly adopted fonts better....

[SicroAtGit]

I like the new colors too. Much better readable and looks fresher. Very good work!

[SicroAtGit]

Diagram svn-dcommit.svg

With this diagram I noticed the small thing that the rightmost D' is still badly readable in the new version and also does not pass the WebAIM test (test result).

I tried all the colors in the palette as an alternative font color and unfortunately found that no color passes the test.

What do you think about writing this D' in black color as well, but in bold?

Previous version

---

Version after the new colors were added

[tajmone]

With this diagram I noticed the small thing that the rightmost D' is still badly readable...

Yes, I've noticed that too, I was kind of postponing its fix.

Neither the grey from the original palette nor the one from the newer one seem to work well there. I've tried lighter and darker greys, but non of them really work, unless they are so near to black that they don't look grey at all. White didn't work either (it's easier to read but fails WebAIM).

The original diagram is poorly readable too.

and also does not pass the WebAIM test

Hadn't checked that, but I had no doubt it would fail since it looks awful to read.

What do you think about writing this D' in black color as well, but in bold?

I haven't tried that, I'll give it a go. Probably using italics might be better, because I believe the original intention was to make it sort of "fade away", to indicate it's "before" state. Bold would give it stronger emphasis, so it might be misleading in this context. On the other hand, in the original diagram italics are used to indicate abstract concepts, like some sort of comments to the picture.

I wonder why they didn't also paint the box background in lighter colour (as they did in other diagrams).

I wasn't sure how to handle this problem. In general, I get the feeling that there's a consistent method to how the colours and text styles were chosen in the original diagrams. So I was surprised they didn't use the faded colours for the whole D' box here, but just its text label.

Probably, after reading the whole book again, for the final proofreading, I'll get a better picture of how the original authors intended to use colours, text styles, etc. to indicate different aspects of the various steps of Git/SVN, which should then enable me to make a better choice in this respect.

I've create a dedicated Issue (#17) for this diagram needing to be fixed. I think this was the only one showing this problem, but I'm not sure (was working under pressure, due to limited free time).

[SicroAtGit]

I believe the original intention was to make it sort of "fade away", to indicate it's "before" state. Bold would give it stronger emphasis, so it might be misleading in this context.

Oh, yes, that's right, then I see this as better as well:

I wonder why they didn't also paint the box background in lighter colour (as they did in other diagrams).

I think this was the only one showing this problem, but I'm not sure (was working under pressure, due to limited free time).

Yes, only this diagram.