Some Fonts Are Bold by Default and Only Need to Meet 3 to 1 Color Contrast when large

[goodwitch]

Axe is reporting 3 color contrast fails on this page: https://citiqa.mindsmack.com/supportfemalemusic (this URL content may change quickly so I'm also including code snippets).

font-family: "Interstate-Bold"; font-size: 20px;

Axe reports: Element has insufficient color contrast of 3.16 (foreground color: #ffffff, background color: #ff40b4, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1

WCAG 2.x glossary definition: large scale (text) with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts

Expectation: Interstate-Bold at 15.0 pt(20px) only needs to meet 3 to 1 because the FONT is bold itself.

Actual: Axe is inaccurately reporting a WCAG 2.x failure of 1.4.3

Motivation: Please account for fonts that are bold by default..and do not fail this.

axe-core version: 3.4.0 axe-browser extension: 4.2.1

Browser Firefox 74 on Mac 10.15.3

(This issue was brought to me by Todd Liebsch).

[straker]

Took a look at the stylesheets while we still had the site and they are correctly declaring font-weight and font-style inside the @font-face declaration for the font:

@font-face {
    font-family: 'Interstate-Bold';
    src: url('Interstate-Bold.eot');
    src: local('Interstate-Bold'),
        url('Interstate-Bold.eot?#iefix') format('embedded-opentype'),
        url('Interstate-Bold.woff2') format('woff2'),
        url('Interstate-Bold.woff') format('woff'),
        url('Interstate-Bold.ttf') format('truetype'),
        url('Interstate-Bold.svg#Interstate-Regular') format('svg');
    font-weight: bold;
    font-style: bold;
}

They also correctly don't set the font-style and font-weight on the element itself, so they remain as normal for both (which is where the problem occurs in our code).

This means that to get true font-style and font-weights for custom fonts, we're going to need to look at the CSS and find the @font-face declaration for the custom font and grab the styles from there.

[goodwitch]

Dear Axe-Core Devs,

First of all...I love y'all! All of y'all!

Second...I wanted to give you another sample to work with (that may be a little more long-lasting):

I think something similar is happening on https://www.hilton.com/en/

Code: <span class="sc-bxivhb bEfzZu">Join for Free</span>

font-family: "Proxima N W01 Bold", Arial, sans-serif; font-size: 20px;

Axe is reporting: "Element has insufficient color contrast of 3.08 (foreground color: #ffffff, background color: #009cde, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"

But I think it should be passing (because it is 15.0pt Bold and 3.08 to 1)

Thanks for all you do to make the web a more accessible place :)

[mattwoodage]

I think this is a similar problem:

I am using some fonts which are getting read as fontWeight: normal and failing, even though their css has fontWeight: 600 and they are displayed as bold. If i edit their css to fontWeight:bold and rerun the test it passes. Could this be dealt with too?

Thinking about it, if you're using a custom font which is really really skinny, then it's bold version might not be very readable and still passes the tests because it's labelled as 'bold' ? so is this subjective?

[WilcoFiers]

I am not convinced this actually is a false positive. The issue is that because the font weight is not set in CSS, if a user swaps out the font for a custom one, that custom font will not be bold, and this false positive turns in to an actual accessibility issue of a non-bold font with a contrast below 4.5:1.

This needs to be looked at more closely. This may not be a failure of WCAG, but it is an accessibility problem to not have your font weight set in CSS if you are relying on font weight to satisfy 1.4.3 contrast

[goodwitch]

@WilcoFiers would it be possible to move this type of situation from a "hard fail" in axe...to a "needs review"?

[WilcoFiers]

Deque a11y experts reviewed this and have concluded this should be a failure, for the reason I explained above. We should create a custom failure message to clarify why this is failing though.