Wp-calypso: My Plan: Feature card headings need higher contrast

Created on 2 Aug 2019  路  3Comments  路  Source: Automattic/wp-calypso

screen-shot-2019-07-08-at-12 53 28-pm-1

Steps to reproduce

  1. Starting at URL: http://wordpress.com/my-plan/
  2. The headings on each of the feature cards (as seen above) need more contrast to pass AA WCAG standards
  3. We can probably use the CSS var --color-text-subtle instead.
Accessibility Color Schemes

Most helpful comment

@drw158 Large is 18pt, but that's usually computed to 24px. I was saying (this screenshot came from me) that this text is 21px, so it's not "large".

The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

from note 1 here

All 3 comments

I agree the text could be darker to be safe (the text might shrink on small viewports), but just noting here that "Large" is anything 18 or above, not 21. Or at least that's what I thought.

https://developer.paciellogroup.com/blog/2012/05/whats-large-text-in-wcag-2-0-parlance/

@drw158 Large is 18pt, but that's usually computed to 24px. I was saying (this screenshot came from me) that this text is 21px, so it's not "large".

The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

from note 1 here

@ryelle Wow, I never noticed that! Thank you for clarifying. I'll keep that in mind in the future.

Was this page helpful?
0 / 5 - 0 ratings