Adjust Color Contrast Checker to account for base font size.

[HundredVisionsGuy]

When determining whether an element meets the color contrast goals as defined in the WebAim Contrast Checker, we need to only measure a goal based on whether the element in the context of the browser (having styles applied or not) as well as whether we wish to meet it at a AA or AAA level.

According to the WebAim Contrast Checker website,

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

By default, the base font-size is 16px. In order for a p or anything other than an h1-h3 tag to be considered large, it would have to be enlarged by 150%. There are some different ways it could be applied.

Since all h tags are by default bold, without any size adjustment, only h1, h2, and h3 tags are bold and large enough to qualify as large in size (NOTE: the h3 tag by default is 18.72px in size).

My suggestion is to add to the cascade_tools' CSSAppliedTree a search for any changes to file size as well as what the computed size should be (this would be fun considering the cascade and inheritance). Here are my initial thoughts:

• Add a base font-size to 16px (name it root_font_size for all elements except the header.
• Add a base font-size for each header.
• When checking for adjusted font-sizes, only consider the following values: px, %, em, rem (for now at least as the others are more difficult to compute)

NOTES about em v rem values:

• An em is relative to its parent's computed size
• A rem is always relative to the base font-size of a document (16px)

[HundredVisionsGuy]

Issues remaining:

• [ ] Apply is_bold to any heading or element with a font-weight set to bold or 700 or greater
• [ ] Make sure any element with is_bold set to True also has descendents set to True unless directly targetted.
• [ ] Check for bold font through inheritance
  • Example: a span in a heading
• [ ] Adjust the color contrast results for each element based on size and boldness
• [ ] Implement tests for all

[HundredVisionsGuy]

All color tools related to alpha blending and gradients are in place. We just need to integrate them into the cascade tool..

On the bold front (see first check box above), it turns out that most browsers will compute the font-weight to 700. According to the WebAIM: Contrast Checker,

In CSS, bold text typically has font-weight:bold, or font-weight:700 or greater.

Next steps: Add a check for bold or not and apply to inheritance using these steps:

• If element is a heading h1-h6 or a b or strong tag, set is_bold to True
• If element is nested inside a heading or b or strong element, set is_bold to True
• If CSS targets the element and applies a font-weight of bold or a number that is greater than or equal to 700, set is_bold to True and apply to descendants
• If CSS targets font-weight of normal or less than 700, set is_bold to False and apply same to descendants