search

dequelabs / react-axe

[DEPRECATED] Accessibility auditing for React.js applications
Other
1.16k stars 45 forks source link

[WIP]Console logs are not WCAG contrast compliant #100

Closed colinhemphill closed 4 years ago

colinhemphill commented 5 years ago

This may seem petty, but I think there's a good case for "practice what you preach".

Moderate warnings: #ffa500

Contrast ratio of 1.97 on white background — fails all compliance tests.

Suggested change: Chrome uses #5c3c00 as dark text on a #fffbe5 yellow background, which is AAA compliant.

Screen Shot 2019-07-16 at 4 27 41 PM

In other places they use a similar gold color on a white background:

Screen Shot 2019-07-16 at 4 26 49 PM

Severe warnings: #ff0000

Contrast ratio of 4.0 on white background — only AA compliant at large sizes. This one isn't as egregious as the warnings.

Suggested change: Chrome uses #c51916 for red text, which is AAA compliant. They also use #ff0000 for error logs in some places, so ¯_(ツ)_/¯

WilcoFiers commented 5 years ago

@colinhemphill It's more of a damned if you do, damned if you don't type of situation. If we up the contrast for a light theme, it's lowered for a dark theme, and the dark theme isn't dark enough that there's a color that meets the requirements in both themes.

missmatsuko commented 5 years ago

Can't the background color be set so that the text to background contrast can be controlled? Only thing is it may still clash with the browser theme. Not sure if there's a way to read the user's light/dark theme preference that makes sense for this. Maybe configuration is still a better option.

straker commented 4 years ago

QA: Test color ratios in both light and dark themes

padmavemulapati commented 4 years ago

Below are the light and dark mode theams observed, the color ratio observed 4.5:1 - for light background observing the color pallatte as serious: '#d93251', minor: '#d24700', text: 'black' And for dark background - serious: '#ffb3b3', minor: '#ffd500', text: 'white' image (8) image (9)