darker h2 underline and box borders?

[shawna-slh]

background

from https://www.w3.org/WAI/EO/wiki/Redesign_-_October_Revisions#Visual_design:

Headings/Sections — make heading levels and sections more clear (Alicia, Brent, Shawn ideas - more space above h2, heavier-weight &/or darker underline, probably bold h2) [✅ Eric made h2s bold and added more spacing around headings in general]

Judy: "massive amounts of white space (gray space?) ahead of every H2"... (This was in relation to https://w3c.github.io/wai-eval-overview/evaluation/#standards . It's more prominent there than in most content, e.g., https://w3c.github.io/wai-website/tips/designing/ -- see there how we really do want that much space above h2s)

from https://www.w3.org/TR/WCAG21/#non-text-contrast:

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components Visual information used to indicate states and boundaries of user interface components, ...

fyi, the Low Vision Task Force considered making this 4.5:1

Matthew: borders around boxes need more contrast

The lightness of the h2 underline has been niggling me lately.

(Related issues https://github.com/w3c/wai-website-design/issues/109 )

suggestion

I would like to try darkening the underline under the h2 and the borders of the boxes (e.g., page contents box) to at least 3:1, and maybe 4.5:1 -- and see what we think of it.

@yatil, when you can get to it, would you please mock that up -- not high priority for right away.

Note that I think we do not have to have those borders darker, because it's not essential for understanding the content.

[yatil]

• The underline on the h2 is just visual flourish, it is not needed for essential content. In contrast, it would look like the h2 belongs to the prior section if it the line more visible. It might also look more like a link. (That’s why I usually argue against underlines for headings.)
• The box borders come from the user tested design. The borders are not essential to have the box recognized as something separate as the text is indented as well. It is an additional help. In addition, heavier boxes (and such boxes would be really, really heavy) would draw more focus to the boxes although they are usually used as “additional information”. It would likely have the opposite effect and be distracting and doing a disservice to the readability of the page

I really, really think we should not make adjustments to design principles that we developed in many hours of user testing at this stage. Ship it like it is (at least for the beta) and if it is a problem in practice, we can re-visit.

[shawna-slh]

No concerns from Low Vision Task Force (e-mail, minutes).

Closing for now.