Mark out page areas without hard-coding colors
C25 is C23's other half. Show where one area of the page ends and the next begins using borders and layout rather than tinted backgrounds, and leave text and background colors unset so a reader can choose them. W3C attaches it to 1.4.8 Visual Presentation, which is Level AAA, and lists it as sufficient there. It is honest about why the technique is needed. When a reader overrides colors, browsers can strip the author's layout along with them, so a page collapses into one column, pop-ups lose their backgrounds and menus turn transparent. Specifying border colors and layout while leaving text colors alone is what keeps the structure while handing the palette over, and W3C qualifies the outcome to most popular browsers rather than promising it everywhere.
How we find it in an audit
We check this by overriding colors in the browser and reloading, then looking at whether the regions still read as regions. A card that was only ever a pale tint disappears completely. A card with a border survives. The finding is any boundary that existed only as a background color.
How affected users experience it
This serves readers with cognitive disabilities and low vision, who need both the structure and the palette. Take the tints away and a page of tinted cards becomes an undivided run of text where a sidebar note and the article read as one thing. A visible border, or real space between blocks, keeps the shape of the page whatever colors the reader has chosen.
Passes vs. fails
Passes
.card { border: 1px solid #1a2b44; padding: 1em; }
/* the boundary survives a color override */Fails
.card { background: #f4f4f4; }
/* the region exists only as a tint */Other ways to satisfy this rule
21 guides on this site are filed under 1.4.8 Visual Presentation. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C12sufficientSize text in percent so it scales
- C13sufficientUse named font sizes that respect user defaults
- C14sufficientSize text in em units, not pixels
- C19sufficientAlign text left or right, never justified
- C20sufficientCap line length with relative column widths
- C21sufficientGive paragraphs breathing room with line spacing
This guide is our interpretation of W3C technique C25: Specifying borders and layout in CSS to delineate areas of a web page while not specifying text and text-background colors. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.