ContrastChecker: Add font size logic inside the component; Add additional test cases;

[jorgefilipecosta]

Contrast checker included logic to differentiate between large and small text. The logic is dependent on fontSize so it makes sense to have for normal cases logic that uses the fontSize inside ContrastChecker checker. The logic is not just dependent on fontSize (e.g: if text is bold for the same fontSize the contrast may be valid) we allow users of the component to still rely on isLargetext prop and decide by them selfs if the text they contain is considered large or not.

How has this been tested?

I created a paragraph I set the text color to "#C44B4B" and the background color to "#000000".
I checked that for font sizes medium an lower there is a contrast waring and for large font sizes, there is no contrast warning.

[noisysocks]

Works well and the code lgtm. Thanks for adding tests.

I'm wondering if we should just eliminate the isLargeText prop altogether. It looks like it's only used in one place now:

gutenberg/core-blocks/button/edit.js

Line 123 in a0724b7

isLargeText={ true }

We could replace this remaining usage with fontSize={ 18 } since we know that buttons have 18pt text per this line:

gutenberg/core-blocks/button/style.scss

Line 13 in a0724b7

font-size: $big-font-size;

Anyway, not a blocker—totally up to you 🙂

[jorgefilipecosta]

Hi @noisysocks thank you for the review. I think the property isLargeText should exist because as referred font size is not the only decision point if the text is bold for example it may be considered large with a different font size.
The isReadable function we are using, forces invokers to decide if the text is large or not. I think we should allow users of our component to do the same, but we can provide additional logic e.g: to avoid font size comparisons on the paragraph.
For the button case, I think because of the nature of the block the text there should always be considered large if not because of the font size it should be because of text being bold or something similar so in that case, I prefer to use isLargeText directly.

[afercia]

@jorgefilipecosta thanks for your work on this! I have a question though: is the font size check based on pixels or points? Please notice that the WCAG requirement refers to points, not pixels. Reference:

https://www.w3.org/TR/WCAG21/#contrast-minimum

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

"Large scale text" is defined in points, not pixels:
https://www.w3.org/TR/WCAG21/#dfn-large-scale

with at least 18 point or 14 point bold

The actual size of the character that a user sees is dependent both on the author-defined size and the user's display or user-agent settings. For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use.
etc...

So, calculating the actual point size may depend on various conditions. However, it's an (more or less) accepted practice to use 24 pixels and 18.5 pixels as values. This is explained in the WCAG "Understanding Success Criterion 1.4.3: Contrast (Minimum)":

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size as defined in CSS3 Values. 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.

Please let me know if there's the need to open a new issue, thanks!