User:Myndex/Conformance
DEPRECATED Early Conformance Draft
Please See Current Use Case and Conformance
This thread at the APCA GitHub repo has the most recent discussions on conformance and use cases.
LEGACY MATERIALS BELOW, FOR REFERENCE
Please See Current Use Case and Conformance
This thread at the APCA GitHub repo has the most recent discussions on conformance and use cases
NOTICE: Deprecated
This is a subsidiary page of the Visual Contrast of Text Subgroup The content below was formerly on the talk page for Visual Contrast, but moved here in the interest of improving the organization of the visual contrast materials and research.
Some of the lookup tables and APCA values listed below were based on an early version of APCA which was scaled differently. While the exact values are different, the general concepts are the same.
Early Visual Contrast Conformance Discussions:
- Multiple lookup tables defining the minimums for each score level.
- OPINON (Andy): We also need at least one "non-normative best practices" to futher illustrate what "should" be done versus what "must" be done.
- Selection of text to be scored. A sample of the lowest contrast? Percentage of characters? Total on page? Weighted by???
- OPINON (Andy): We can't just take the text with the "lowest" contrast as a low contrast with a big, bold font could pass while a higher contrast with too thin/small of a font could fail. It therefore needs to be the "lowest relative contrast considering the font ssize and weight". I am not done developing the means to do that programmatically....
- "Ideal" contrast vs minimums, and the context of how and where the contrast is used.
- OPINON (Andy): it not the percentage of text that must meed certain standards, but the purpose and context of the text that is most important.
- Guidance for authors for how to set an HTML tag to skip testing as decorative or ancillary.
4.5 Visual Contrast of Text Conformance
Integrating Lookup Tables into a Scoring Model
Most of my work the last two weeks has been related finding a reasonable approach to fitting the SAPC/APCA concepts and math into the multi-level scoring model.
A few realizations or discoveries:
- We can't just subtract an arbitrary amount to define the lower levels. Subtracting 10% from APCA 120 is meaningless, while subtracting 10% out of APCA 40 is much more than shold be allowed.
- If we are going to degrade the contrast values as a way to setup multiple conformance levels, then it needs to be a percentage or a sliding scale.
- If we are going to reduce the contrast by using a percentage, and the contrast was being displayed a a percentage, we could have a lot of misunderstanding amongst users. As such, I've removed the "%" from values and am now just calling for instance 80% as APCA 80, just 80Lc.
- Even so, the math to determine levels is sufficiently complicated that it should only be done in the app, or via a pre-computed lookup table.
- I'm working on adding this as a module to the APCA app, but have created the degrade model on a spreadsheet to prototype and evaluate it, and have something to look at for discussion purposes.
- All lookup tables were generated programmatically from a master table (also below). The master table was created over this week through studying various common sans serif font families, notably Helvetica Neue, Montserrat, Barlow, and the worst case scenario, "Jost:.
- Working with lookup tables has led to a few ideas in terms of where and how to split the levels, for instance not just contrast, but also use case or if they are even using a particular size. For instance, Score Level 4 drops to 3 if they use a 12px font.
- A Bonus level: All the tables are based on a minimum value for that level, and there is a table for each level 4-0 with reasonable normative values for each level. But then also a "Preferred Design" table that is not intended to be normative, but is a guide with more ideal contrast values.
- Levels 4 thru 0 were scaled down from the master table using math that adjussted the amount of degrade based on how high or low the contrast value is, degrading the high contrast much more than the low.
- The preferred level (5) was enhanced by removing edge case entries in the table, and boosting the contrast for the lower contrast values.
Lookup Table Explainer
Here's a quick look at the table. For explanatory purposes I've used a lot of color coding for the disposition of certain levels or fonts. In the app, these will display with warning or other dialogs that explain a limitation or a reason a page was dropped from 4 to 3 for instance. Adopting this scoring model is complicated enough that I need to get the app working with this sooner rather than later.
Clinical Contrasts vs APCA outputs
The APCA math is not designed to handle very low contrasts, and it is not scaled the same way as a clinical test. I am at present changing the APCA output to a non-percentage related number, in part to avoid such comparisons, but also because the degrade we are doing for the multi level scores involves a percentage reduction, and reducing a percentage by a percentage has the unfortunate consequence of creating significant misunderstanding. All that said, an APCA 100 is intended to to provide someone with a 3% contrast sensitivity about 20:1 in contrast reserve. 80% is intended to provide 16.6 times, and APCA 60 about 12.5 times. I.e. APCA 60 is intended to hit the Lovie-Kitchin "10 times minimum contrast reserve" level for a Peli Robson 1.5, which is about 3% clinical sensitivity (A PR score of 2 is normal 1% sensitivy, and PR score of 1 is a profound impairment of 10% sensitivity).
Lookup Table Multi-Level Scoring
All tables programmatically created from the Master Table which was created and evaluated against several common and standard fonts. If you visited this page on Monday or before, the charts are now further revised. This is as few rows as makes practical sense.
You may notice the key values like 80 and 60 may seem to "curve" downwards — this is mirroring the contrast sensitivity curve.
Suggeted Max Contrast
Also notice the "Suggested Maximum Contrast" table. This "Max Contrast" should never be normative, but it is useful to show that for very large fonts, it is helpful for some users to limit contrast at Lc 120 90 with APCA G-4g . the reason it should not be normative is we do not want designers worried about too much contrast then using too little. The reality is sthe real problems with high contrast are more associated with excess luminance in the stimuli, and that and the ssscreen contrast is under user control for limiting both luminance and therefore contrast, and it is much easier for a user to LIMIT contrast than to ENHANCE it.
The Preferred Target
The values on this table are both boosted from the master table (mainly the low contrast areas) and also, certain fonts have been removed, such as all the thinnest weight 100 fonts, which are often nothing more than a stoke line.
Also removed is 12px and smaller fonts, and you'll notice on the right of the table 14px to 18px weight 900 is removed, due to the phenomena of ultra bold 900 being harder to read than 700 weight on small fonts.
Non Text and Minimum Contrasts
The maroon colored "40" cells that cross the bottom of the chart indicate the minimum contrast levels for text. Note though that in theory, non-text could drop a low as 25 for stimuli that are at least 8px by 8px. As this relates to human contrast sensitivities: Normal sensitivity is 1%. Common impairments bring it to 3%, a profound impairment is 10%. Best fluent reading is 10 times the sensitivity or more. But spot reading is about 3 times the sensitivity. Object detection is at a minimal level but object recognition requires more that detection, but less than spot reading, though this area gets a bit murky.
Score Level 4
This table is essentially the same as the master table (last in this list). As far as the contrast values, they are the same other than there is some wiggle room for values within 1%. The bigger change from the master is that like the preferred, certain font sizes and weights are depreciated or removed, such as 12px.
Score Level 3
Designed as the safe fallback from level four, this holds nearly the same high standard, but is relaxed in some of the areas likely to fail out of Level 4.
Score Level 2
This table is intended to pass most existing sites that now pass WCAG 2.x, provided the site predominately uses a very light or white background and dark text.
Score Level 1
Slumming it with Level 1: This table is possibly more permissive than it should be? Up for discussion. It is intended to pass sites that pas WCAG but have design problems, such as the use of very dark color pairs, or very small fonts.
Score Level FAILURE
(Not Shown) This is the same as the table for Level 1, except it's red, and indicates that you fail if you are less than a value on this table. Also known as the "completion backward principle".
MASTER TABLE
These values were derived from multiple font families rendered on Chrome and/or Safari (also some Opera and Firefox) under various different ambient lighting. These values are the foundation, and all the other tables are derived from this one. As fas as Sans fonts, this Master Table is getting close to a "final never change", meaning that it represents well designed fonts well and any changes here on for the contrast spec will probably be best done with adjusting the app's constants (which is what I put the constants there for, actually).
Over the last few weeks of adjustments, there is some slight shifting of values in the table from earlier versions. I had originally tried to fit the 80% level to 16px normal. But the more I worked with it, the more that was just not well behaved. For a little while it waa 18px 400 at the 80 APCA Contrast Level, but here it is 24px 400, and this seems more stable. It also helps in aligning to existing sites a bit.
Side Note on Font-Weight: 100
While evaluating fonts, I looked more into the problem some fonts have at weight 100. Some are llittle mor than a single unfilled stroke. So thin that regardless what vertical size they are, they always render at the same spacial frequency of "way toooo thin." ...
We need to add to the draft "Ultra thin weight 100 fonts that conisist of a single unfilled stroke are too thin for web content use".
The other critical thing is how inconsistent the rendering is with the 100 and 200 fonts. Chrome mangles them, and considering that like 50% of the browser share, it needs consideration. In the table information above, I deleted all weight 100 from the table, and for the level 4 table, I set it to indicate that weight 100 is prohibited for body text. But the more I think about it, the more I think that level 4 should prohibit weight 100 and limit weight 200.
More for discussion.
--Andrew Somers (talk) 01:55, 20 October 2020 (UTC)
Guideline / Outcome / Methods
Guideline: Provide sufficient visual contrast of text for good readability in a variety of common user environments and conditions.
Outcomes for Visual Contrast of Text:
Outcome: Provide adequate luminance contrast (lightness/darkness difference) between background and text colors, for a given font weight and size, in order to read the text easily.
Outcome: Color choices do not significantly impact contrast perception and readability by users with common forms of Color Vision Deficiency, particularly Protan types.
Outcome: Allow the user to zoom text larger (within the defined ranges) without breaking content or requiring horizontal scrolling.
Outcome: Do not prevent the user from adjusting contrast and colors to suit their individual needs (avoid using the '!important' CSS class).
Alternate Outcome: For any element or group of elements that occupy the same space in content, if the CSS properties color or background-color have not been assigned a value including by inheritance, then none of the following CSS properties are assigned a value other than 'initial': color, background-color, background, opacity, text-shadow, text-outline.
Additional Outcome Discussion
Do we consider the following additional outcomes?
- Additional Alternate Outcome: For any element or group of elements that occupy the same space in content, if the CSS properties color or background-color have not been assigned a value, then the following CSS properties are also unassigned: font-family (other than default serif/sans-serif/monospaced), font-weight (other than normal/bold), font-size (html tags not included), line-height, letter-spacing.
- Outcome: Allow the user to use "reader mode" to access body text such as an article. Does not apply to paywall or content protection related lockouts.
Methods for Visual Contrast of Text
- Select font characteristics and background colors to provide enough contrast for readability
- Content author does not specify font characteristics
Select font characteristics and background colors to provide enough contrast for readability
Outcome: Selects both the background and text colors or uses the default color of both background and text. Selecting only one causes problems for people with low vision when they adapt the colors. (Note: @@ this needs work)
Techniques for Select font characteristics and background colors to provide enough contrast for readability
- Sample text and background colors and calculate SAPC value.
- Compare SAPC value against "Minimum Size Type Examples for Testing Various Levels"
4.5.1 Critical Failures
- Any text without sufficient contrast (against its background) that stops people from completing a task.
4.5.2 Rating
Calculating the rating:
- The lowest APCA rating for any text in the path; or
- The mean average APCA value for all text in the path. Mean average value may be calculated by any consistent method. An automated tool might do so character-by-character.
Rating Scale
| Rating | Criteria |
|---|---|
| Rating 4 | 95% or more1 of all reading text2 has no less than the APCA values for the font size and weight used, body text is not less than 16px, the font matches the reference font in terms of x-height and visual contrast, and there are no critical failures on the path. |
| Rating 3 | At least 90% of all reading text has APCA values no less than 3% under the lookup table values for the font size and weight used, the font matches the reference font in terms of x-height and visual contrast, and there are no critical failures on the path. |
| Rating 2 | At least 85% of all reading text has APCA values no less than 6% under the lookup table values for the font size and weight used and there are no critical failures on the path. |
| Rating 1 | At least 75% of all reading text has APCA values no less than 12% under the lookup table values for the font size and weight used and there are no critical failures on the path. |
| Rating 0 | More than 25% of the reading text has APCA values more than 12% under those listed or there is a critical failure on the path |
NOTE: 1Percentage calculated by number of characters of reading text displayed on the page of content. 2Reading Text refers to text intended to be read such as articles, headlines, and navigation elements. It does not apply to ancillary text such as a copyright notice or purely decorative text. But those should be indicated in a manner such as role='none'
___
Edits comment: Re-arranged the order, to "best" on top. Not sure about anyone else, but the more I saw the "worst fail" on top, the more it bothered me. Also, changed SAPC to APCA per Jeanne, added "reading text" and definition and adjusted the criteria to weigh more on contrast levels in the chart, i.e. level one being no less than 12% under the lookup chart values, intended to help existing WCAG sites pass. --Andrew Somers (talk) 10:53, 5 October 2020 (UTC)
Alt 4.5.1 Critical Failures
Hard or critical visual contrast failures that get an automatic 0:
- A font color is specified, but not a background color or vice versa.
- Lockout the user’s ability to zoom readable text content larger.
- Lockout the user’s ability to use “reader mode” for long-form readable content (articles)
- Does not apply to lock outs related to paywalls or content protection.
- An image of text intended to be read at a resolution too low to be upscaled for reading.
- Content that is intended to be read is using a font-size smaller than 12px.
- Content that is intended to be read is using a color against the background of less than APCA 40%.
- Text that is intended to be read overlays other text or content such as an image with substantial interfering content (i.e. text over a “busy" image).
Alt 4.5.2 Rating or Scoring
Rating Level 0:
- The primary readable content does not meet the level 1 the specifications of the APCA algorithm and lookup table. This includes text content for navigation, headlines, and columns of body text.
Or there are any one of the 4.5.1 critical failures.
Rating Level 1:
- The primary readable content is close to the specifications of the APCA algorithm and lookup table. This includes text content for navigation, headlines, and columns of body text. Captions for images and including copyright-type information are excluded completely from the level 1 consideration.
- All color pairs as rendered for sRGB calculate to an APCA contrast that is no less than 10% under the contrast level specified in the lookup chart for the given font SIZE and WEIGHT.
- Ornate or swash fonts are used for headlines with no accessible fallback option.
- Ultra thin fonts at weight 100 and 200 are used for readable content.
- no consideration is given for three-way contrasts (text/button/background) and only the font and the immediate background are calculated.
- Columns of body text meet the following additional guidelines.
- Columns are composed of lines that on average are between 30 and 100 characters.
- Some text might be full justified or flowed around irregular objects.
- Padding around a column of text, and next to other columns of text is no less than the cap height.
Rating Level 2:
- The majority of readable content meets the bulk of the specifications of the APCA algorithm and lookup table. This includes text content for navigation, headlines, and columns of body text. Captions for images and including copyright-type information are excluded completely from the level 2 consideration.
- All color pairs as rendered for sRGB calculate to an APCA contrast that is no less than 5% under the contrast level specified in the lookup chart for the given font SIZE and WEIGHT.
- Fonts less than 16px are being used for readable content.
- No font has a weight less than 200.
- No font faux smoothing modes that reduce contrast are enabled.
- Columns of body text meet the following additional guidelines.
- Columns are composed of lines that on average are between 40 and 80 characters, with the design goal of 50 to 70 characters.
- Tracking (letter spacing) and Leading (line spacing) are no less than defaults for the given font.
- Spacing after a paragraph in a column of text is never less than 1.5 times the line leading, with 2 times the line leading preferred.
- No full justified text. For left to right reading languages, columns of text shall be left justified.
- Padding around a column of text, and next to other columns of text is no less than the cap height, and ideally at least 1.5 times the cap height.
- Columns of body text use a font similar to the reference standard (no ornate fonts for body text), with an equivalent weight not less than 300 at 16px, and an APCA contrast that is no less than the figure shown in the lookup table.
Rating Level 3:
- All readable content meets the bulk of the specifications of the APCA algorithm and lookup table. This includes text content for navigation, headlines, columns of body text, and captions for images (but not including copyright-type information):
- All color pairs as rendered for sRGB calculate to an APCA contrast that is no less than 3% under the contrast level specified in the lookup chart for the given font SIZE and WEIGHT.
- Fonts less than 16px are only used on non-critical items such as copyright.
- No font has a weight less than 200.
- No font faux smoothing modes that reduce contrast are enabled.
- Columns of body text meet the following additional guidelines.
- Columns are composed of lines that on average are between 40 and 80 characters, with the design goal of 50 to 70 characters.
- Tracking (letter spacing) and Leading (line spacing) are no less than defaults for the given font.
- Spacing after a paragraph in a column of text is never less than 1.5 times the line leading, with 2 times the line leading preferred.
- No full justified text. For left to right reading languages, columns of text shall be left justified.
- Padding around a column of text, and next to other columns of text is no less than the cap height, and ideally at least 1.5 times the cap height.
- Columns of body text use a font similar to the reference standard (no ornate fonts for body text), with an equivalent weight not less than 300 at 16px, and an APCA contrast that meets the figure shown in the lookup table.
Rating Level 4:
- All readable content exceeds the specifications of the APCA algorithm and lookup table in the following ways. This includes text content for navigation, headlines, columns of body text, and captions for images (but not including copyright-type information):
- All color pairs as rendered for sRGB calculate to an APCA contrast higher than that shown in the lookup chart for the given font SIZE and WEIGHT.
- The font SIZE is measured matched to the equivalent x height for the reference font.
- The font WEIGHT is compared to the reference font, and determined to be a visual match, or a visual match with a required offset, and said offset being used.
- Fonts chosen for content are close to the standard references for readability and any ornate or script type fonts have an accessible fallback.
- If the text is on a button or in a container with a background that is at a higher contrast that the larger surrounding background, then the text is surrounded with padding at least equal to the cap height of the font.
- No font is less than 16px, with an x height no less than 8px.
- No font has a weight less than 300, and fonts as small as 16px have no less than 400 weight.
- No font faux smoothing modes that reduce contrast are enabled.
- No transparencies are used that affect fonts and their background, or if transparencies or CSS features such as shadow are used, they are evaluated as rendered in sRGB space, with tests conducted on a minimum of five different recent user agent/devices.
- For example, a potential list might be:
- Mobile Safari on an iPhone
- Desktop Chrome on a Mac
- Mobile Chrome on an Android Tablet
- Firefox on Windows
- Opera on Linux
- Tests to be conducted using default settings and no added extensions.
- The requirement for multi-device testing only applies if features or techniques are used that are known to vary significantly between user agents.
- Columns of body text meet the following additional guidelines.
- Columns are composed of lines that on average are between 40 and 80 characters, with the design goal of 50 to 70 characters.
- Tracking (letter spacing) and Leading (line spacing) are no less than defaults for the given font.
- Spacing after a paragraph in a column of text is never less than 1.5 times the line leading, with 2 times the line leading preferred.
- No full justified text. For left to right reading languages, columns of text shall be left justified.
- Padding around a column of text, and next to other columns of text is no less than the cap height, and ideally at least 1.5 times the cap height.
- Columns of body text use a font similar to the reference standard (no ornate fonts for body text), with an equivalent weight not less than 300 at 18px, and an APCA contrast that is at least 15% higher than shown in the lookup table.
- Non-critical text has relaxed guidelines.
- Text not implicitly intended to be read, that does not add or confer meaning can pass at a level 15% lower on the APCA lookup table.
- Such text includes copyright, photo by-lines, and non-commuicative textural content.
- Purely decorative text with no implicit meaning has no guidelines for readability.
--Andrew Somers (talk) 16:35, 26 September 2020 (UTC)