Skip to content

Include font weight for color contrast tests #665

@alastc

Description

@alastc

An issue raised externally by Kevin Marks, reporting here for tracking and so I'm not relying on my replies stream.

A potential gap in the colour contrast measure is that a "thin" font can pass the contrast measure but be very difficult/impossible to read.

Fonts can be set as thin, e.g. Arial thin, or by the nature of the font being very thin.

Varying by set weight

Taking the setting to start with, Kevin suggested varying the contrast requirement value by how thick the font was set at, for example:

Table of font values thin to extra bold, with AA and AAA values that vary up for thinner, and down for thicker font weights.

Apologies for the image as a table, it came via twitter. It shows the same values for normal and bold as defined in WCAG 2.x AA and AAA. The values then increase for thinner variants and decrease for thicker variants.

Measuring fonts that are thin by nature

Some fonts are simply thin, such as "Wire one" displayed below, or even 'dotted' variants such as Codystar, both displayed at 40pt and 'normal' weight below:

Two words saying regular, one very thin, the other bigger in size but dotted so even harder to discern

Adriannegger suggested taking an average grey value, but wasn't sure it would be of value.

I could see a method where you take a standard word, take the box around that, and take an average of the color. E.g. thick black text on a white background would give you a moderate grey. Then compare that luminance value to the background (white) to come up with a contrast including thickness of font. That would be good if it equates to readability.

Criticisms

I asked a general question about this to font/typography experts and got some interesting responses including:

Mark Bolton:

Contrast in type design is more complex than stroke weight (thickness). Kerning, hinting, relative stroke weight within glyphs, for example, all have a bearing on perceived density.
I see the intent. But stroke weight probably isn’t the right measure unfortunately. Too simplistic given the variables.

Adrain:

The assumption here is that more weight == more legible, which is not true. And there is no standard for what “bold” is. There’s a lot of variables outside the math here.
Not to be discouraging, but are we attempting to fix an educational problem with clever engineering?

Overall, there's a lot to the legibility of text and we have a basic measure that (in my experience in usability testing) does corelate fairly well to whether people with low-vision will be able to read it.

There can be some odd gaps, such as not accounting for particularly thin fonts (or weights of fonts), it would be useful to close the gap if there's a reasonable way of measuring and testing it.

We could certainly provide advice on this, perhaps in the WAI tutorials. Whether we can update WCAG would depend on how accurately we could come up with a measure/test procedure that would work reasonably well across sites & scenarios.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions