CODEWITHSUNDEEP
csswcag2.0
Henry
Henry

Reputation: 1795

Trick to pass WCAG auditor re contrast issue.

I am using http://achecker.ca to validate my HTML/CSS and verify that I am WCAG 2.0 compliant. I'm quite happy with it for the most part but it is giving me an inappropriate error that is frustrating my efforts to get a clean validation. I was wondering if anyone had a suggestion for getting around that?

It's complaining about the contrast of some text I am displaying, saying that the background color and the text color are too similar. That's actually true - background-color is #f2eecf and text color is #f2f2f2 - but it isn't really relevant because I have a photograph appearing above the background color so there is actually good contrast between the photograph and the text color. Also, I've added a 1 pixel black text-shadow around the text to make it even clearer. Unfortunately, the tool doesn't seem to take the shadow or photograph into account. (It makes sense that it wouldn't know how to handle the photograph since it is not a uniform colour but I'm disappointed that the text shadow doesn't help.)

Is there something I can do to my HTML or CSS to help satisfy the tool? The website doesn't seem to have any way to contact the people operating the website or I would have asked there first.

Should I just ignore the "errors"? Or should I use a different tool? I'm just getting started with WCAG compliance checking - I realize now that I'm rather late getting into this - so maybe there are better tools to use. If so, I would appreciate any recommendation, especially for free tools.

I certainly want my pages to be WCAG compliant but I can't spare money for tools right now.

Upvotes: 0

Views: 984

Answers (2)

Myndex
Myndex

Reputation: 5384

Short Answer:

Best practices is that if you are going to composite text over an image, the image is in a container with that container having a background similar to the image.

Longer Answer:

There are a variety of reasons that an image will not load. A site doing things such as placing live text over an image needs to ensure that text remains readable regardless of the load state of the image.

Also keep in mind that a user must be able to zoom up the text in size without breaking the site, meaning keeping the text over the image or BG so it is still readable, etc.

Outlines & Shadows

As for outlines and shadows: while they may assist contrast, they should be used to enhance and not for the sole basis of contrast. In part because the rendering of these properties is far from consistent among different browsers.

Resources

WAVE Automated Checker

APCA Contrast — the new contrast method for WCAG 3

Upvotes: 0

slugolicious
slugolicious

Reputation: 17583

I have a photograph appearing above the background color

So your text has a transparent background color or it has a background-image? A code snippet would help.

I'm guessing you're getting this error: https://achecker.ca/checker/suggestion.php?id=301

If you look up "achecker.ca" on https://www.whois.net/, you get:

Administrative contact:

Name: Iris Neher

Email: [email protected]

If you're using a decent accessibility checker, then you should not try to fake out the checker. I have not used achecker so I can't comment on how accurate it is. But if you post your code example, I might be able to tell if it's really a problem.

You can also try

Upvotes: 1

Related Questions