search

SSAgov / ANDI

A tool to test web content for accessibility and 508 compliance.
https://www.ssa.gov/accessibility/andi/help/howtouse.html
Other
301 stars 76 forks source link

Incorrect font-size in color contrast module #225

Closed carlganz closed 8 months ago

carlganz commented 8 months ago
Font-Size Bug

Hello, I am seeing in ANDI an error for font-size 11px, but when I view the CSS metadata in the browser I see font-size 15px overriding a value of 10px, no 11px in site. Please advise

JohnCotterSSA commented 8 months ago

From your screenshot, it looks like ANDI is reporting a font size of 11pt on the <p> tag. However, you circled 15px from the <body> tag's styles. These are two different elements.

If you want to double check the font size that ANDI is calculating, select the correct element in he DOM (in this case, the <p> element, then select the "Computed" tab. image Scroll down to find the font-size property and it should show the true, computed font size, which is what ANDI is using.

carlganz commented 8 months ago
Font-Size Bug2

I'm sorry I'm not following. I'm looking at computed now and have the same li element selected across the board. Still seeing different font-sizes

JohnCotterSSA commented 8 months ago

Ah, I see. ANDI is reporting on the font pt (point) size, while dev tools displays the px pixel size. That's the reason for the discrepancy you are noticing. Under-the-hood, ANDI uses the computed pixel value for the check since pt sizes are not a good measure of comparison. Font point sizes differ depending on font family. WCAG 1.4.3 define large scale text in points. It's very confusing! So ANDI does the calculation in pixel and then displays pt size to comply with the WCAG large text threshold.

If you google "pt to px conversion", it roughly relates 1 pt to 1.33 px. So 11pt x 1.33 = 14.63px and rounded up that is 15px. SO ANDI says 11 pt, while dev tools displays 15 px.

fstrr commented 8 months ago

ANDI is showing 11pt, not 11px. If you look at WCAG's Contrast (Minimum) criterion, it states that pt and px are not equal, and you have to multiply the pt value by 1.333 to get the px value. Therefore: 11pt * 1.333 = 14.663px, which looks to be rounded to 15px in dev tools.

carlganz commented 8 months ago

Thank you