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.


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 | |
  • 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 '19 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 '19 at 5:02

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 | |

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 | |

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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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