search

ryersondmp / sa11y

Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.
https://sa11y.netlify.app
Other
280 stars 43 forks source link

Contrast Check #55

Closed brianteeman closed 3 months ago

brianteeman commented 1 year ago

image

image

As you can see the css that highlights the text breaks the layout which no other sa11y indicator does.

adamchaboryk commented 1 year ago

I know it's a little unsightly, but decided to leave it as is for simplicity.

The inline prop changes the CSS styles applied to errors. Anything that is set to inline: true it changes the background colour. Which isn't helpful for contrast ruleset. I thought it was minor, so i didn't want to refactor it too much.

results.push({
    element: name,
    type: Constants.Global.ERROR,
   content: Lang.sprintf('CONTRAST_ERROR', cratio, sanitizedText),
   inline: false,
   position: 'beforebegin',
});

Screenshot attached when inline set to true.

Screenshot of contrast issue where the error highlighting hides the actual colour causing the contrast issue.