Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parse font-weight values as number in color-contrast check #2031

Closed
takenspc opened this issue Feb 10, 2020 · 3 comments
Closed

Parse font-weight values as number in color-contrast check #2031

takenspc opened this issue Feb 10, 2020 · 3 comments
Labels
color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule

Comments

@takenspc
Copy link
Contributor

Expectation: variable fonts offer the ability to use any weight such 750 or 850 which should be considered as bold. I expected that any weight greater than or equal to 700 are considered as bold in color-contrast check.

Actual: axe-core reports following error when font-weight is 750.

<p style="color: gray; background: white; font-size: 14pt; font-weight: 750">Hello</p>

Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 14.0pt (18.6667px), font weight: normal). Expected contrast ratio of 4.5:1

While it doesn't report any errors if font-weight is 700.

<p style="color: gray; background: white; font-size: 14pt; font-weight: 700">Hello</p>

Motivation: we would like to change

  1. Parse font-weight values as number in color-contrast check
  2. Make color-contrast check consider any weight greater than or equal to 700 are bold (current threshold is 600)

As far as I know, "semi" of semi-bold (600) means “partially" so that it is not considered as bold ("partially passed test" is not considered as "passed test"). If we need more discussions, I can split 2 as another issue.


axe-core version: 3.4.2
custom auditing script using puppeteer 2.1.1

- Node version: v12.15.0
- Platform:  Windows 10 version 1903
@straker
Copy link
Contributor

straker commented Feb 11, 2020

Thanks for letting us know. We just released 3.5 so this probably won't get into a release for a month or two.

@straker straker added color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule labels Feb 11, 2020
@takenspc
Copy link
Contributor Author

Thank you for your triaging.

We just released 3.5 so this probably won't get into a release for a month or two.

It is OK for me. I have a workaround for this.

takenspc pushed a commit to takenspc/axe-core that referenced this issue Feb 12, 2020
The computed values of `font-weight` are numeric string so that we don't need to check keywords such as `bold`.

The `font-weight` values are continuous. They can be `123` or `123.4` so that we should parse them as number.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
WilcoFiers pushed a commit that referenced this issue Feb 12, 2020
The computed values of `font-weight` are numeric string so that we don't need to check keywords such as `bold`.

The `font-weight` values are continuous. They can be `123` or `123.4` so that we should parse them as number.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Co-authored-by: Takeshi Kurosawa <[email protected]>
straker pushed a commit that referenced this issue Feb 12, 2020
The computed values of `font-weight` are numeric string so that we don't need to check keywords such as `bold`.

The `font-weight` values are continuous. They can be `123` or `123.4` so that we should parse them as number.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Co-authored-by: Takeshi Kurosawa <[email protected]>
@padmavemulapati
Copy link

Verified on latest axe-coconut(
with test file -
<div style="background-color: #1c1f21; color: #ffffff; opacity: 0.2 "> <div style="color: gray; background-color: white; font-size: 14pt; font-weight: 600" id="target"> +
Not seeing any color-contrast issues - replaced font-wright: bold with font-weight:'numbervalue'...
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule
Projects
None yet
Development

No branches or pull requests

3 participants