Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Diagrams Colors Accessibility Problems #15

Closed
2 tasks done
tajmone opened this issue Feb 17, 2021 · 5 comments
Closed
2 tasks done

Diagrams Colors Accessibility Problems #15

tajmone opened this issue Feb 17, 2021 · 5 comments
Labels
🔨 Dia Tool: Dia Diagram Editor ⭐ accessbility Topic: Document Accessibility (colors, etc.) ⭐ diagrams Topic: diagram images
Milestone

Comments

@tajmone
Copy link
Collaborator

tajmone commented Feb 17, 2021

  • 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):

git-objects.svg

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 tajmone added 🔨 Dia Tool: Dia Diagram Editor ⭐ diagrams Topic: diagram images labels Feb 17, 2021
@tajmone tajmone added this to the Illustrations milestone Feb 17, 2021
@tajmone tajmone added the ⭐ accessbility Topic: Document Accessibility (colors, etc.) label Feb 17, 2021
tajmone added a commit that referenced this issue Mar 16, 2021
Update diagrams' README with info about the new color palette that will
be adopted for diagrams' BG colors.

The new scheme was designed to solve the color contrast accessibility
issues of the original palette (fixes #15) and reduces the number of
palette entries by eliminating redundant similar colors.

* `diagrams-palette.cifc` -- ColorImpact 4 palette project.
* `diagrams-palette.html` -- Palette color spec document.
* `diagrams-palette.png`  -- Palette swatches.
@tajmone tajmone closed this as completed Mar 16, 2021
@tajmone
Copy link
Collaborator Author

tajmone commented Apr 5, 2021

@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
Copy link
Collaborator

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

@SicroAtGit
Copy link
Collaborator

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

svn-dcommit.svg - old version


Version after the new colors were added

svn-dcommit.svg - new colors added version

@tajmone
Copy link
Collaborator Author

tajmone commented Apr 9, 2021

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
Copy link
Collaborator

SicroAtGit commented Apr 10, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 Dia Tool: Dia Diagram Editor ⭐ accessbility Topic: Document Accessibility (colors, etc.) ⭐ diagrams Topic: diagram images
Projects
None yet
Development

No branches or pull requests

2 participants