User interface improvement idea

[caztcha]

As for the new version of CCA, I found some user interface problems that could be improved.

• "Contrast Ratio" is unexpectedly unnoticeable since it is displayed far from "WCAG 2.1 results".
• The color swatch display (background fill) in the "Foreground colour/Background colour" area may have too much visual impact for some values, making the "Sample preview" less visible.
• In the "Sample preview", an example of the non-text is a teacup icon. Maybe it's better to use icons and graphics that are common in web content as examples. And if possible, it would be nicer to be able to insert arbitrary SVG or icon font as preference.
• The success/failure decision for "WCAG 2.1 results" is a bit confusing. Especially in the case of conditional OK (when both a green check mark and a red x mark are displayed), we have to read carefully the description adjacent to the green check mark/red x mark. It is a bit troublesome for non-native English speaker.

I just made an improved user interface sketch. I will be glad if it helps. :)

[ferllings]

Thanks, we are always looking for new ideas to improve the general layout and reduce the window height.

• The color swatch display (background fill) in the "Foreground colour/Background colour" area may have too much visual impact for some values, making the "Sample preview" less visible.

Unfortunately, combining the "preview" and the wcag results make the result text result not readable if the color contrast fails. That's why we created the Sample preview section.

• "Contrast Ratio" is unexpectedly unnoticeable since it is displayed far from "WCAG 2.1 results".

I believe it wouldn't hurt to move this section here as it still make sense in the read order.

• In the "Sample preview", an example of the non-text is a teacup icon. Maybe it's better to use icons and graphics that are common in web content as examples. And if possible, it would be nicer to be able to insert arbitrary SVG or icon font as preference.

That's something in our todo list (#1)

• The success/failure decision for "WCAG 2.1 results" is a bit confusing. Especially in the case of conditional OK (when both a green check mark and a red x mark are displayed), we have to read carefully the description adjacent to the green check mark/red x mark. It is a bit troublesome for non-native English speaker.

Yes, i18n is also in our todo list. (#79)

[caztcha]

Thank you so much for your consideration.

Unfortunately, combining the "preview" and the wcag results make the result text result not readable if the color contrast fails. That's why we created the Sample preview section.

I understand this, and even if it is so, just my opinion, I think there is little problem. When the result (preview) is not readable due to the low contrast, then the web content designer has to improve the contrast so that she/he can read the result (preview) on this tool.
And I am not pessimistic because, with the adjacent green check mark or red X mark, she/he can recognize the result (passed of failed) even though the contrast is too low.

// That's what the classic CCA behaved before. I didn't feel frustrated, but did some low vision users find it difficult to use?

[patrickhlauke]

When the result (preview) is not readable due to the low contrast, then the web content designer has to improve the contrast so that she/he can read the result (preview) on this tool.

but keep in mind this tool isn't there just for designers to check and, if they can't even read the result properly, change the values. it's also a tool to, well, actually get the result so you can stick it in an audit or report that explains where things are not correct. so this would make the life of a tester much harder if they couldn't even get the actual value...

[caztcha]

Thank you Patrick, I see your point.

For it is difficult to combine the "preview" and the WCAG 2.1 results, instead, could I propose you to minimize the color swatch display in the "Foreground colour/Background colour" area, to reduce the visual impact of these areas and make the "Sample preview" more visible?

In addition, could I propose you to display the "WCAG 2.1 results" area as shown in the attached screenshot? For SC 1.4.3 and 1.4.6, two results (for "regular text" and "large text") are always presented to keep consistency.
In the current live version of CCA, the number of results for those SC are changing depending on the contrast ratio, which is inconsistent and troublesome to read.

• Pass for large and regular text (when OK : 1 result)
• Pass for large text only / Fail for regular text (when conditionally OK : 2 results)
• Fail for large and regular text (when not OK : 1 result)

My screenshot also shows that the "Fail" should be presented before "Pass", because the former information is more important than the latter to make CCA users conscious to improve the colour contrast.

[A11yEvangel]

I like caztcha's suggestions overall. I like a chart as the graphical object sample. It's a good reminder that charts and graphs need to be checked. I also prefer it to be thicker for ease of viewing. I also like moving the contrast value to just above the WCAG results too. I like the general idea of the sdample colors filling their respective areas, but would also prefer a window those area heights more, as below. I used the HSL data to simulate widest space needed for that area.

[ferllings]

Yes, I'm trying to find a way to reduce the app height.
Thanks for all your good suggestions

I'm testing few things, like moving the Ratio inside the results section

I'm also considering hiding the labels, for the two color sections... and maybe replace it whit smaller icons...

[caztcha]

@A11yEvangel @ferllings Thank you so much for your consideration! :)