search

equalizedigital / accessibility-checker

GNU General Public License v2.0
14 stars 8 forks source link

Ideas for further enhancing color contrast? #609

Closed amberhinds closed 2 months ago

amberhinds commented 5 months ago

I know we're using axe-core for color contrast. I noticed while setting up the rule testing page for this rule that It's not failing elements that I expect it to fail.

Currently, axe-core is only catching 2 of the 4 failing items on this page.

We may want to circle back to this and see how we can enhance what Axe is seeing.

SteveJonesDev commented 5 months ago

WAVE returns two color contrast issues as well.

Screenshot 2024-05-05 at 11 53 57 PM
SteveJonesDev commented 5 months ago

Unless you scale the page down and evaluate with smaller font sizes.

Screenshot 2024-05-05 at 11 58 50 PM
SteveJonesDev commented 5 months ago

@amberhinds, I think returning two issues is correct. The font has a computed value of 24px therefore it meets AA color contrast for large text.

Screenshot 2024-05-06 at 12 05 01 AM Screenshot 2024-05-06 at 12 04 22 AM

This does bring up the need to evaluate different viewport widths (Desktop, Tablet, Mobile).

amberhinds commented 5 months ago

Oh yeah, I always forget about large text because we never choose any colors that only pass for large.

I like the idea of maybe evaluating multiple viewports. Another idea might be to have a warning instead of an error for things that only pass for large to tell people they need to test other view ports. I'm not sure if that would be easier?

SteveJonesDev commented 2 months ago

Issue moved to our internal system.