WCAG levels easy to misunderstand

[yatil]

Thanks for the app, it is very useful.

The app uses the following symbols to signal if WCAG 2 is met:

• AA = 4.5 contrast ratio, meets WCAG AA for normal text
• AA+ = 3 contrast ratio, meets WCAG AA for large or bold text
• AAA = 7 contrast ratio, meets WCAG AAA for normal text
• AAA+ = 4.5 contrast ratio, meets WCAG AAA for large or bold text

I think this is easy to misunderstand as AA+ meaning to exceed WCAG 2 AA when in fact it is not.

I suggest the following instead:

• AA = 4.5 contrast ratio, meets WCAG AA for normal text
• 18.6+/24+ = 3 contrast ratio, meets WCAG AA for large or bold text
• AA = 4.5 contrast ratio, meets WCAG AA for normal text
• 18.6+/24+ = 3 contrast ratio, meets WCAG AA for large or bold text

(Because it is not very pronounced on Github, 18.6+ above is bold to signal at least 14 point/18.6px font size.)

[superhighfives]

Thanks for flagging, @yatil. I wonder if there's a better way to show large and bold with a symbol? 🤔 Could be a good exercise, for me to try and create something that says AA, AA (large or bold) / AAA, AAA (large or bold), rather than the +, which, as you say, could be misinterpreted. Will have a think about it! Appreciate the feedback.

[evanwarner]

I think one subtle improvement here regardless of the labels is to order them from least to most stringent, so you're always "filling the meter". At the moment the strictest contrast ratio is in the middle of the group.

[superhighfives]

Interesting point, @evanwarner. Initially I was thinking in terms of the type scale, rather than the contrast ratio. The order by contrast ratio would be:

• AA+
• AA
• AAA+
• AAA

And in that case, "+ for large" feels out of place. Looking at this instead as a scale of contrast from not accessible to very accessible, I think revisiting the iconography there could help tell the whole story better, so I'd like to do that at the same time.

Super open to any suggestions on that front, too.

[bjuppa]

First, thanks for a super neat tool! On my first try I also misinterpreted the AA+ indicator, I didn't notice that the AA indicator wasn't checked for my color combination. Now that I know what to look for it's not a big problem for me, but there is potential for making this clearer for other users on their first run!

I like the reorder of the indicators suggested by @superhighfives , and I agree that the +-notation for bold and large may be a little unclear.

Visually this might not look as neat, but one could use the actual font sizes in the icons:

• An 18pt A followed by a bold 14pt A indicating large/bold
• 14pt A indicating standard text

I can't get this GitHub text editor to put a larger font-size on a single character, but I hope you get the idea here:

• AA (imagine the initial character in 18pt)
• AA
• AAA (imagine the two initial characters in 18pt)
• AAA

[yakimvanzuijlen]

Thanks for the awesome app Charlie! The labelling and order also tripped me up at the beginning.

I was thinking about other possible solutions. There may be better options, but what about showing an info icon in front of the lower ratings and giving extra context inside a tooltip? This would allow the app to give more detailed guidance while also hiding the text when you don't need it.

This might not be the best solution since I've designed it as a hover state, which isn't really something you see often in macOS I think.

As far as labelling goes, I prefer "Large", or "Lg" in reference to the Large Text exception. What do you think?

By the way, I noticed that the UI in the app does lack in contrast in places. Even if I have Increase Contrast enabled.

[superhighfives]

Hey @bjuppa, @yakimvanzuijlen—thanks for the feedback and mockups. I'm working on some as well, looking at how to treat the icons / text, so this is great timing. This is definitely the most consistent piece of feedback I've gotten, too, so I'm keen to address it.

Seeing the mock up you made, @yakimvanzuijlen, maybe I'm overthinking the iconography. AA Large seems much easier to grok at a glance, than something like the top left option below. But keen to get your thoughts:

And on the contrast, that's a really good point @yakimvanzuijlen. I'm planning a sprint specifically looking at improving the accessibility of the app itself (#28) and ensuring increase contrast is a great one to add to that.

[bjuppa]

I agree @superhighfives, the bottom row of suggestions is a lot clearer, my suggestion of mixing in large and bold letters looks very untidy now that you've made it real! 😄

I think the bottom left one is easiest to understand and looks good too, as long as space is not too scarce.

[superhighfives]

Shipped with https://github.com/superhighfives/pika/releases/tag/0.0.9 🎉 Thanks for all the feedback, everyone!

[bjuppa]

It looks great in the new release, thanks!