1

I am developing a web application, starting from an approved design, I have the task of evaluating if it is readable.

The question is: the light body, modifies the consideration over the contrast? because it is clearly less readable.

Thanks for the time.

Improve this question

5 Answers 5

Reset to default
1

If I understand your question correctly you are talking about super thin fonts and their contrast requirements.

There are no requirements if a font is super thin in terms of WCAG, 508 etc. that are any different than normal weight fonts.

That being said, it isn't about requirements (and too much focus is put on requirements and not enough on the end user).

If you are using an especially thin font I would recommend adding 50% to your colour contrast requirements.

So for standard text at 16px up your requirements to 6.75:1.

The reason for this is anti-aliasing causes colours to 'bleed' into each other to round corners and edges, by upping the contrast these pixels have a higher contrast (think of it as 3 pixels next to each other -> grey, light-grey, white. If you have higher contrast set then these pixels become dark-grey, grey, white so the contrast between each 'step' is higher and therefore the letters are more pronounced.)

Ultimately you should ask the question 'can we use a thicker font here' and adjust your design to use normal weight fonts as that would be preferable.

Improve this answer
0

You have to provide a minimum contrast ratio of 4.5:1 for all text content that is below 18.66 PX Bold or 24 PX Regular. (Bold & Regular are font weights) any text that is above these sizes should have at least 3:1 contrast ratio to pass the AA conformance level of WCAG 2.0

You can read about it here: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

And to check the contrast ratio, use this tool by WebAim: https://webaim.org/resources/contrastchecker/

Improve this answer
2
  • First of all, thank you for your feedback Sooraj. I have views of the accessibility rules in regards to text contrast. In particular, I'm not finding information about the use of lightweight text (aka: font-weight: 300). Do you know of any place where you can review documentation?
    – user3763771
    Sep 18, 2019 at 21:06
  • 1
    the same rules apply for even the lightweight fonts, It has to meet the same contrast requirements.
    – Sooraj MV
    Sep 19, 2019 at 5:02
0

In addition to what Sooraj provided, you can also use the resource http://colorsafe.co/ as it will allow you to put in specific font weights (100 to 900) to check for WCAG compliance.

Improve this answer
0

The ISO 9241-210:2019 guidelines actually recommend even higher at 10:1 ratio (or actually I think it was a previous version) for color contrast.

I would aim for 8.5:1 for color contrast to ensure higher accessibility.

Here is a nice tool for font size legibility https://usecontrast.com/guide

Improve this answer
0

Unfortunately, WCAG 2 does not provide much in the way of guidance for differing font weights. It was created at a time when "core web fonts" had only two weights.

You are on to the right path here though: it is the spatial qualities as in font weight or line thickness that detainees contrast and therefore readability.

In development for future standards is the APCA which uses a new, perceptually uniform math, and also takes font weight and size into consideration.

Improve this answer
7
  • "WCAG 2 does not provide much in the way of guidance for differing font weights". While WCAG does not have any guidelines on font weights, it does mention weights with regards to contrast (1.4.3) in that a lower contrast is allowed for font sizes between 14pt and 18pt if they're bold (CSS font-weight:700 or higher). Again, that's not guidance on weights themselves but it is considered.
    – slugolicious
    Aug 22 at 0:08
  • Hi @slugolicious Yes, which is why I did not say it did not provide at all, I said it did not provide much in the way of guidance... and this took me a sec: "...between 14pt and 18pt..." was odd to me as I think of it as 14px/18.7px and larger when bold, or 18pt/23px normal... but I see what you mean. Regardless, it's somewhat meaningless as WCAG 2 math is not uniform to perception and the terms "normal" and "bold" are not defined, and that's a problem. Contrast is spatial more than color/luminance was my larger point. APCA uses reference fonts and perceptually uniform math.
    – Myndex
    Aug 22 at 0:56
  • 1
    I re-read my previous and I confused myself. Not sure why I worded it that way but I meant that lower contrast is allowed for 14pt bold or 18pt normal and larger. " the terms "normal" and "bold" are not defined". Bold and Normal are absolutely defined. Not in WCAG, because it's not needed there, but in the official CSS spec it defines what bold and normal means - w3.org/TR/css-fonts-3/#font-weight-numeric-values.
    – slugolicious
    Aug 25 at 5:26
  • Hi @slugolicious Yes, I know that CSS defines normal as 400 and bold as 700, that's not what I meant. There is no definition in terms of what 400 or 700 actually means. As an example an extremely bold display font such as Impact or Arial Black indicates 400. CSS weights 100-900 are functionally meaningless, other than higher numbers are supposed to imply thicker strokes. This is why the APCA Readability Criterion uses reference fonts, with a defined method to compare to the design's font.
    – Myndex
    Aug 25 at 7:00
  • Hi @slugolicious continuing, at the moment, there's no supported way to directly set font size by its x-height, and there's no way to programmatically determine the actual perceived contrast of a font's spatial qualities, in other words, weight. But spatial qualities—weight, size—are what drives perceived contrast of text. Without defined and consistent spatial metrics for fonts, via CSS properties, some arbitrary standard relating to color difference for a contrast spec is not particularly useful. Contrast is more related to spatial characteristics than color/luminance.
    – Myndex
    Aug 25 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.