Do any colors need to be explicitly defined for a webpage to comply with WCAG?

Question

I went on checkmycolours.com to test my website for WCAG (accessibility) compliance. The tool does work, but I'm wondering if the tool is 100% perfect.

It seems the tool requires me to have A,EM,IMG{color:#000} in my stylesheet in order for my site to comply (meaning I need to specify a default color). If I don't then the tool assumes white background and white foreground for anchor, emphasis and image tags.

I also did a ridiculously simple HTML test with the same tool by using just this HTML (and no stylesheet):

<em>Test</em>
<p>Test</p>
<a href="test">Test</a>
<img src="broken" alt="test">

The tool reports failure on the anchor tag an image tag. It believes the foreground and background color on both those elements are white. It believe for the emphasis and paragraph tag that the color is black and background is white.

I'm just not sure if that checkmycolours tool is the most accurate. I also find that google doesn't pay me for ads on sites where people can't see content due to bad color scheme (such as black on black).

What I really want to know is Must some HTML elements require a colour definition in CSS or can we assume all HTML elements have a certain default colour attached to them?

What elements require a colour definition (if any)?

Answer 1

What the tool seems to intend is to make sure that the contrast is high enough, but it’s beyond me why it assumes (for some elements) white as default for the foreground and the background. The contrast check should only be done for elements for which the author specifies colors, and assume some sensible default colors (e.g., those used by browsers and other user agents) in case the author doesn’t specify any colors. If the author only specifies the color for the foreground (or only for the background), it should¹ give a warning.

I cannot imagine a user agent for which it would make sense to present content white on white by default, and I think it’s safe to assume that there doesn’t exist one (which wants to be taken seriously). It would render a very big number of documents unreadable.

WCAG 2.0

As WCAG 2.0 guidelines are not technology-specific, there isn’t one that would say something about setting colors explicitly (because it would only apply to technologies that can have style sheets, e.g., HTML).

However, looking at Techniques for WCAG 2.0 (but note: those Techniques are informative, not normative!), you can see that it can even be considered accessible not to specify colors in your style sheet:

• G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults

  With this technique the author avoids having to do any contrast measures by simply not specifying the text color and not specifying the background. As a result the colors of both are completely determined by the user agent.

• C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content

  With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets his needs and provides the best reading experience.

If we would assume one of your visitors uses a mainstream user agent that renders content and background in the same color, your document would certainly be inaccessible (violating, for example, the contrast requirements in Guideline 1.4 Distinguishable). However, this would also affect all visitors without disabilities, so WCAG 2.0 wouldn’t have to be consulted in the first place. If, however, the visitor is using assistive technology that renders the document like that, WCAG 2.0 becomes relevant, and you would have to make sure that the content is distinguishable (e.g., by specifying the colors explicitly). But, as I said, I’m sure (or better: I hope) there is no such user agent (or assistive technology) out there.

Default style sheets

HTML5 defines some default CSS rules. For phrasing content (which includes a, em, and img) it says:

The initial value for the 'color' property is expected to be black.

CSS 2.1 suggests a default style sheet for HTML 4, but doesn’t set any color/background-color. I guess it’s up to the system/OS. In 6.4 The cascade it says:

Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language […]

[…]

Note that the user may modify system settings (e.g., system colors) that affect the default style sheet.

The same color for foreground and background certainly doesn’t "satisfy general presentation expectations".

---

¹ If the author specifies only one of color and background-color, and relies on the default user agent style sheet for the other color, the document can become inaccessible because the user might have changed the default colors. There’s a WCAG 2.0 failure for that: F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa. This problem can often be observed when img elements are displayed on a black background: if authors forget to specify a contrasting color value for that img, the alt content (should it be displayed instead of the image) can’t be perceived (because text is typically black by default).