View source for Visual Contrast of Text Subgroup

'''This subgroup is not active.  None of the material on this page has been approved by the working group to move forward into WCAG 3 at this time.'''  The work will be restarted in the future as part of the new guideline writing process.   

== External Resources (not endorsed by the Accessibility Guidelines Working Group) ==
* [https://linktr.ee/Myndex The Curated Linktree] Accessible Perceptual Contrast Intro and Overview - Myndex Research
* [https://git.myndex.com  A catalog of Myndex Research content] on color and contrast information

==Legacy Material for Archive Purposes ==
'''This should not be used as it has not been approved by the Accessibility Guidelines Working Group.'''  

This page has been broken up into subpages to help organize topics.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/Whitepaper Visual Contrast Whitepaper in progress] on  readability contrast and related design theories. This page contains selected research notes of A.Somers' vision and contrast research to be made into a whitepaper in support of Silver/WCAG 3.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/APCA_model An Advanced Contrast Prediction Model] This specifically discusses the APCA perceptual contrast prediction model, including the math and code samples.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/Conformance Visual Contrast Conformance Model] This is the former talk page relating to the multi-score conformance model for Visual Contrast for Silver/WCAG 3.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/Resources Resources: Glossary, Bibliography], and links to team member materials. Includes a lighter side section and additional designer examples and guidance.

See Also [https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Main_Page the '''Low Vision Task Force Wiki''']  

See Also [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Special:PrefixIndex/Visual_Contrast_of_Text_Subgroup/  Visual Contrast Subpage Directory ]

'''ADVISORY NOTICE:''' This Wiki contains works in progress and collections of the current research into visual readability. It is not to be considered "normative" and it is not a part of W3C standards unless specifically stated. 

== Comments on WCAG3 FPWD for Visual Contrast ==
* [https://github.com/w3c/silver/issues?q=is%3Aopen+label%3A%22action%3A+assign+to+subgroup%22+label%3A%22Guideline%3A+Visual+Contrast%22+ Github Issues assigned to Visual Contrast Subgroup] - Github issues from WCAG3 First Public Working Draft (FPWD) that are filtered for the Visual Contrast subgroup. 
* [https://drive.google.com/drive/folders/1WQ5wfAQ30cfS3VfwspmvyN-mzhhyY9l-?usp=sharing Google drive folder for storing proposals]

== Introduction ==
Visual Contrast of Text is an important subset of guidelines to meet the visual needs of sighted users, relating directly to visual perception and especially visual readability. 

=== ''Who What Why When Where How'' ===
* '''Who''' All sighted users need adequate lightness/darkness contrast (the perception of luminance difference) between background and text colors in order to read the text easily.
* '''What''' Contrast is part of our brain's filters for processing visual information to provide a perception of the world around us. There are many kinds of contrast: contrast of size, contrast of a color hue or saturation, contrast of motion, contrast of texture, and so on. For this topic, readability, we are mainly interested in contrast of luminance (light vs dark) and how contrast perception is affected by "high spatial frequencies" which means very thin or small items, such as the letters of text on this page.
* '''Why''' The needed lightness/darkness contrast for fluent reading is higher than the contrast needed to simply "make out" words — in fact at least ten times more contrast is needed for easy reading than the bare minimum contrast for legibility.
* '''When''' It is particularly important to assess contrasts during the design and planning stage, and throughout the life of  web sites with dynamic or frequently changing content.
* '''Where''' For all readable content displayed on computer screens and devices. Select font weight, font size, text color, and background colors to provide at least the critical contrast for fluent readability. contrast for readability.
* '''How''' Use tools to predict contrast and readability by evaluating font size, font weight (stroke width), background color, font color, and nearby colors and adjust the properties of those elements to achieve good visual contrast and readability.

=== Short Description ===
As used on this page, Visual Contrast means the perceived difference between two colors displayed on a computer monitor, such as the color of the text against the color of the background. Our perception of contrast and its effect on readability is an important aspect of our vision system which includes brain as well as the eye — 62% of our brain is involved in vision processing.

The ability to focus on objects and words, either near or far, relates to visual acuity. Acuity is commonly measured with an eye chart, with familiar results such as the average 20/20. Vision problems often show up as a higher score 20/40, which is the limit for a driver's license in many areas.

A different but very important visual impairment relates to contrast sensitivity, our ability to perceive the difference between a dark and a light object or text. Out sensitivity to contrast changes with age — taking the first 20 years of life to develop — but can degrade rapidly due to disease, mediations, and even head injuries that do not involve the eye directly.

For best reading, we need much more contrast than is needed just for a visual acuity score, and a larger font size than we can make out on an eye chart. Ideally, we need the text to be two to two and a half times larger than our "acuity" limit, and we need contrast to be at least ten times higher than our contrast sensitivity.

'''Our readability of text is affected by many things''', including:
* Our vision quality in terms of sharpness, glare, and contrast sensitivity

* The Font weight or stroke width, and font size we are reading.

* Small thin fonts are not only harder to read due to acuity limits, but our brain sees smaller and thinner items at a lower contrast as well.

* The lightness or darkness difference between the background and the text.

* The overall lightness or darkness of the screen and the light in the room because this affects the eye's light or dark adaptation to the environment.

* The padding and spacing around the text and the larger background if different.

* The hue or color difference between the background and text, not including the lightness difference mentioned above. Huse and saturation differences are also sensed by the brain as contrast, but much weaker than lightness/darkness, formally known as luminance contrast.

As we are concerned with readability on computer screens, we can make some assumptions about a range of brightness, and a typical viewing environment, and user needs.For instance, a user with poor "acuity" may have difficulty focusing on small text and will need to be able to zoom the text larger.

A user with poor contrast sensitivity may have good sharpness, but unable to perceive colors that are too similar in lightness and need a higher contrast. Yet another user with a glare problem may need lower contrast, or a reduction in blue, or light text on a dark background. Those with a color vision problem (sometimes called 'color blind') may have difficulty detecting contrast or lightness for certain colors, such as deep red.


== Next Steps ==
* For Next WD: Methods with updated tables and new information
* Method status??
* Method needs scoring info (Revising for Next Draft, see discussion tab here)
* How-To (Revise for Next Draft)

=== POLL: Color Vision ===

The use of the term "Color Blind" and IMO one of the important "tip toe" steps is getting terminology right. 

'''99.998% of those with CVD are not color blind'''. They only have a reduced color discrimination. Even the most profound deuteranope or protanope can still see hundreds of thousands of colors (far shy of the many millions of normal vision, but not devoid of color). Only the very rare achromatopsia is monochromatic, and that small group has other more serious vision problems that require AT.

- Instead of '''Color Blind''', we need a new term that is not so completely incorrect and ableist. The medical terms for some disabilities are changed as often as every 30 years or so, It should not be too difficult to change colorblind. Some ideas here to float (work in progress):

:* '''Hue affected''', short for hue affect disorder
:* '''Color Impaired''', short for impaired color vision
:* '''Chroma deficient''', short for chroma deficient perception
:* '''Hue limited''', short for hue limited vision disorder
:* '''Color dark''', short for diminished color vision
:* '''Chroma reduced''', short for reduced chroma perception

Some things to think about that I hope add to the dialog [[User:Myndex|Andrew Somers]] ([[User talk:Myndex|talk]]) 09:35, 14 December 2020 (UTC)

== Drafts and Migration ==
=== Links to Project Drafts ===
* [https://github.com/w3c/silver/projects/3 Project in Github]
* [https://w3c.github.io/silver/guidelines/#visual-contrast-of-text CWD Guideline]
* [https://www.myndex.com/APCA/ APCA tool] - stable version for reference
* [https://www.myndex.com/SAPC/ SAPC public beta tool] - non-stable version with interactive research, experiments, and bleeding-edge evaluations.
* [https://www.myndex.com/DRAFT/ Visual Contrast Draft (Explainer/Methods)] - Andy's live draft of the explainer and methods using his own development environment (not GitHub), These drafts are not using the W3C CSS styles intentionally to be clear these are non-normative working drafts. They are more up to date than the above linked GitHub drafts.
* [https://bugs.chromium.org/p/chromium/issues/detail?id=1121900 Chrome Bug Thread on implementing the algorithm] - because we need a logical place to store the link to this thread.  Please don't delete it.  
* [https://bugs.chromium.org/p/chromium/issues/detail?id=1170879&q=APCA&can=2 New Chrome thread on the d12e Upgrade] As the above Chrome thread is marked closed, this new issue is the current on chromium for APCA.

==== Related:====
* [https://gist.github.com/Myndex/1dadb6dcac596f1cd7a5686a076f697f Gist: Orange You Wondering About Contrast?] A brief coverage of contrast and the infamous ORANGE example and APCA.
* [https://gist.github.com/Myndex/c30dba273aa5eca426ad9f5200917c9d Gist: The Lighter Side of Dark Backgrounds] A a followup to the above article, further comparing APCA and WCAG2.


=== <big>Draft Conformance Model</big> ===
SEE ALSO: [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/Conformance the '''Visual Contrast Conformance Subpage''']

How the conformance model is working right now for Visual Contrast, in response to a GitHub question that suggested placing footer or header out of scope. 

Having once put forth a similar suggestion, I (Andy) shortly thereafter dismissed it as it fails to address the real issues. The present conformance model for Visual Contrast is based on "use caae" heavily weighted toward ensuring readability of content intended to be read.

====All visible text is in scope==== 
:Except purely decorative (i.e. dingbats of flowers in a line). However, the ''purpose'' of a given text element sets different limits and requirements, with further variations per level of conformance.


==== <big>Brief Overview of Contrasts</big> ====
In terms of lightness/darkness contrast (ignoring size, spatial, hue, and other contrasts) there are four broad categories:

# Fluent Readability Contrast
# Contrast for Spot Reading
# Contrast for non-text objects, images, elements, states (focus), etc.
# Purely aesthetic Contrasts.

:Number 4 has no requirement other than to not interfere with numbers 1 thru 3. Number 1, readability, has by far the highest contrast requirement as needed to enable whole word recognition in the VWFA (Visual Word Form Area) of the brain. Number 2 is a relaxed contrast requirement as spot reading assumes that letter-by-letter lexical processing is acceptable. Number three is a bit more complicated but typically as relaxed as number 2, but in some cases can be more relaxed, yet in other use cases have a higher contrast requirement.


==== <big>Use Cases Defined</big> ====

=====''(A) Fluent Readability''=====
:* Columns of body text (body text has elevated requirements for best score)
:* Headlines, Subheads, Asides
:* Primary navigation, Primary menus
:* Descriptive captions that convey meaning beyond the image.
:* Font weight and size are interdependent with luminance contrast.
:
=====''(B) Spot Reading Level''=====
:* Copyright, ByLine, and Legal Notices and links thereto (secondary navigation).
:* Captions that only restate the captioned item or provide only credits, byline, rights, etc.
:* Ancillary text that is not a part of, nor critical to the understanding of, the primary content.
:
=====''(C) Non-Text Elements''=====
:* This means buttons, controls, form fields, clickable objects but does NOT apply to any text within these items.
:* This also includes temporal/spatial state changes (including state changes to text, which is necessarily separated from the text's readability contrast).
:* Contrasts within an image or drawing that is part of content.
:* Contrasts in size, shape, temporal, and spatial relationships are often interdependent with luminance contrast.
:
=====''(UX) Aesthetic Contrast''=====
:* Simply anything that is purely decorative, non-readable, not needed for understanding content.
:* It can include contrasts that may be helpful for organizing content but are not strictly necessary.
:* These have no standard other than to not distract nor interfere with use cases A, B, and C



==== <big>Conformance Scoring Levels</big> ====

====='' Preferred ''=====
:* This is a non-normative "suggested best practices" level. Achieving this achieves Level 4, but does not gain any "bonus" points. It is intended as guidance for more ideal design goals that exceed what is reasonable as a scorable level.
:* Includes more restrictive font-size minimums and more restrictive use of low-contrast elements. 
:
====='' Score 4 — "Ideal Minimum"''=====
:* The normative minimum for a Score of 4 for the view. 
:* Case A elements are very similar to the "Preferred" level, but Case B and C elements have more relaxed requirements.
:
=====''Score 3 — "Acceptable Minimum"''=====
:* The normative minimum for a Score of 3 for the view. 
:* Case A, B, and C elements are only slightly relaxed relative to level 4.
:* Intended as a "catch" level for a well designed and well conforming site that "just misses" in one or two areas of visual contrast performance.
:* Also, this level is intended to pass sites that are presently passing 1.4.6 contrast enhanced (WCAG 2.x AAA) provided that the background colors are no darker than #CCC and no Case A content uses a font smaller than 16px.
:
=====''Score 2 — "Marginal"''=====
:* The normative minimum for a Score of 2 for the view. 
:* Case A, B, and C elements are relaxed relative to level 3. In particular the high-contrast Case A is relaxed, and certain minimum sizes of fonts are relaxed.
:* Intended as a way for sites that are presently passing 1.4.3 contrast (WCAG 2.x AA) provided that the background colors are no darker than #BBB and no Case A content uses a font smaller than 14px.
:
=====''Score 1 — "Poor"''=====
:* The normative minimum for a Score of 1 for the view. 
:* Case A, B, and C elements are relaxed relative to level 2, with few restrictions on minimum sizes for Case B text.
:* Intended as a catch-all for sites that are presently passing 1.4.3 contrast (WCAG 2.x AA) despite significant design deficiencies and/or false passes of dark color pairs.
:* Score 1 means "deficient" but passing, so that sites can still operate and not be penalized (in places where they are by law to comply) to give them time to address and correct their issues.


==== <big>How This Answers the Scope Question</big> ====

The <code><header></code> or <code><footer></code> does not denote use cases as defined herein. Nor does the <code><main></code> or <code><article></code> or... you name it. 

It is definitely possible (in fact more than likely) that the header will contain text of the page title, and that is definitely a "Case A use case" and the footer could easily have navigational elements that fall under Case A. Meanwhile, <code><main></code> or <code><section></code> could easily have Case B and Case C elements.

The point is, that at least for Visual Contrast, use cases do not align with the broader semantic markup of sections and other elements. And definitely NOT header! The closest might be footer, but even then, in the conformance model for Visual Contrast, ALL text is in scope, but there are sub-scope requirements that differ based on use case and score level.

'''It is the USE CASE that is important, not the semantic markup.'''

--[[User:Myndex|Andrew Somers]] ([[User talk:Myndex|talk]]) 00:53, 23 November 2020 (UTC)

<hr>

<hr>

=== <big>Draft Lookup Table</big> ===

'''NOTE: Much of this lookup table is now part of the automated APCA tool's font reporting.
'''
'''See the discussion tab for the latest lookup table and scoring model drafts.
'''

This lookup table is designed for the contrast values as calculated by the ACPA tool:

'''Stable W3 Version:''' https://www.myndex.com/APCA/

'''Beta and Continuing Research Versions:''' https://www.myndex.com/SAPC/

* Reference fonts for comparison include Helvetica Neue, Helvetica, K2D, Fira Sans, Kanit, and Arial.
* Values based on the standard reference font HELVETICA NEUE. Other fonts may not fit well with these values.
* For light text on a dark background the APCA tool will show a negative percentage. Simply use the absolute (positive) value. For example, if the APCA value is -58%, use 58%.
* For comparing to the old WCAG 2.x:
:* APCA '''L<sup>c</sup> 75''' is similar to WGAG 7:1 with a light #E8 background.
:* APCA '''L<sup>c</sup> 60''' is similar to WGAG 4.5:1 with a light #DB background.
:* APCA '''L<sup>c</sup> 45''' is similar to WGAG 3:1 with a light #CC background.
* Other comparisons: 
:* APCA '''L<sup>c</sup> 90''' is similar to 10:1, widely considered to be an ideal contrast for columns of body text with a normal weight font.
:* APCA '''L<sup>c</sup> 30''' is similar to 2:1, considered to be a "hard limit" text minimum by some standards.
:* APCA '''L<sup>c</sup> 15''' is similar to 1.5:1, and is close to the visibility threshold for some impairment types. Designers should consider any contrast lower than this to be invisible.


<!--
[[File:APCAtable98d12c.png|600px|frameless]]

<br>
[[File:APCAtable98d12clegend.png|400px|frameless]]
<br><br>
-->
====Table with Selectable Text====
Here's a table (came values as "Master Table" in the discussion area) as selectable text that can be pasted into a spreadsheet. (HTML in the edit box with inline styles).

<div style="overflow: scroll;">
<table class="TFtable visReadTable APCAtable">
        <tr>
            <th colspan="11" class="tableTitle" style="height: 2em; font-size: 1.5em;">APCA CONTRAST LOOKUP TABLE</th>
        </tr>
        <tr>
            <th colspan="2" class="tableTitle" style="font-size: 1em;"></th>
            <th colspan="9" class="tableTitle" style="font-size: 1.2em; letter-spacing: 0.15em;">Reference Font Weight</th>
        </tr>
        <tr>
            <th colspan="2" class="tableTitle" style="font-size: 1em;">Font Size</th>
            <th class="weight weight1">100</th>
            <th class="weight weight2">200</th>
            <th class="weight weight3">300</th>
            <th class="weight weight4">400<div class="">Normal</div></th>
            <th class="weight weight5">500</th>
            <th class="weight weight6">600</th>
            <th class="weight weight7">700<div class="">Bold</div></th>
            <th class="weight weight8">800</th>
            <th class="weight weight9">900</th>
        </tr>
        <tr style="">
            <th class="tableTitle" style="color: #8af2ff; background-color: #066; font-size: 1.1em;">pt</th>
            <th class="tableTitle" style="color: #fff; background-color: #28b; font-size: 1.1em;">px</th>           
            <th colspan="9" class="tableTitle" style="font-size: 1.1em; letter-spacing: 0.15em; color: #FFF; background-color: #629;">APCA Contrast Value (L<sup>c</sup>)</th>
        </tr>
        <tr> 
<td colspan="9">VALUES BEING REVISED OCT 2021<!--
            <td>7.5</td>
            <td>10</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
        </tr>
        <tr>
            <td>8.3</td>
            <td>11</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
        </tr>
        <tr>
            <td>9</td>
            <td>12</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="copyOnly">©§™</td>
            <td class="copyOnly">©§™</td>
            <td class="bgOrLt">&times;100</td>
            <td class="bgOrLt">&times;90</td>
            <td class="bgOrLt">&times;80</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
        </tr>
        <tr>
            <td>10.5</td>
            <td>14</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="copyOnly">©§™</td>
            <td class="keyVal100">100</td>
            <td class="">90</td>
            <td class="keyVal80">80</td>
            <td class="keyVal60">60</td>
            <td class="bgOrLt">&times;60</td>
            <td class="underWeight">⊘</td>
        </tr>
        <tr>
            <td>12</td>
            <td>16</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="keyVal100">100</td>
            <td class="">90</td>
            <td class="keyVal80">80</td>
            <td class="keyVal60">60</td>
            <td class="">55</td>
            <td class="bgOrLt">&times;50</td>
            <td class="bgOrLt">&times;50</td>
        </tr>
        <tr>
            <td>13.5</td>
            <td>18</td>
            <td class="underWeight">⊘</td>
            <td class="underWeight">⊘</td>
            <td class="">90</td>
            <td class="keyVal80">80</td>
            <td class="keyVal60">60</td>
            <td class="">55</td>
            <td class="keyVal50">50</td>
            <td class="bgOrLt">&times;40</td>
            <td class="bgOrLt">&times;40</td>
        </tr>
        <tr>
            <td>18</td>
            <td>24</td>
            <td class="underWeight">⊘</td>
            <td class="keyVal100">100</td>
            <td class="keyVal80">80</td>
            <td class="keyVal60">60</td>
            <td class="">55</td>
            <td class="keyVal50">50</td>
            <td class="keyVal40">40</td>
            <td class="">38</td>
            <td class="bgOrLt">&times;35</td>
        </tr>
        <tr>
            <td>22.5</td>
            <td>30</td>
            <td class="underWeight">⊘</td>
            <td class="">90</td>
            <td class="">70</td>
            <td class="">55</td>
            <td class="keyVal50">50</td>
            <td class="keyVal40">40</td>
            <td class="">38</td>
            <td class="">35</td>
            <td class="keyVal30">30</td>
        </tr>
        <tr>
            <td>27</td>
            <td>36</td>
            <td class="underWeight">⊘</td>
            <td class="keyVal80">80</td>
            <td class="keyVal60">60</td>
            <td class="keyVal50">50</td>
            <td class="keyVal40">40</td>
            <td class="">38</td>
            <td class="">35</td>
            <td class="keyVal30">30</td>
            <td class="">25</td>
        </tr>
        <tr>
            <td>36</td>
            <td>48</td>
            <td class="weight100">100</td>
            <td class="">70</td>
            <td class="">55</td>
            <td class="keyVal40">40</td>
            <td class="">38</td>
            <td class="">35</td>
            <td class="keyVal30">30</td>
            <td class="">25</td>
            <td class="keyVal20">&gt;20</td>
        </tr>
        <tr>
            <td>45</td>
            <td>60</td>
            <td class="weight100">90</td>
            <td class="keyVal60">60</td>
            <td class="keyVal50">50</td>
            <td class="">38</td>
            <td class="">35</td>
            <td class="keyVal30">30</td>
            <td class="">25</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
        </tr>
        <tr>
            <td>54</td>
            <td>72</td>
            <td class="weight100">80</td>
            <td class="">55</td>
            <td class="keyVal40">40</td>
            <td class="">35</td>
            <td class="keyVal30">30</td>
            <td class="">25</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
        </tr>
        <tr>
            <td>72</td>
            <td>96</td>
            <td class="weight100">70</td>
            <td class="keyVal50">50</td>
            <td class="">35</td>
            <td class="keyVal30">30</td>
            <td class="">25</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
        </tr>
        <tr>
            <td>90</td>
            <td>120</td>
            <td class="weight100">60</td>
            <td class="keyVal40">40</td>
            <td class="keyVal30">30</td>
            <td class="">25</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>
            <td class="keyVal20">&gt;20</td>

 -->    </td>    </tr>  
    </table>  
<hr>





	<table class="centeredTable" style="" >
		<tr style="color: #FFF; background-color: #309;border: 1px solid #94B;">
			<th colspan="1" class="tableTitle" style="text-align: center; height: 2em; font-size: 1.5em;border: 1px solid #94B;">APCA CONTRAST COLOR CODES</th>
		</tr>
		<tr>
			<td class="colorCodes code01"><span style="font-size:1.8em; line-height:0.2;">⊘</span> — PROHIBITED Except for Decorative Purposes</td>
		</tr>
		<tr>
			<td class="colorCodes code02"><span style="font-size:1.4em; font-weight:700;">©§™</span> — May be used for Copyright/ByLine ONLY</td>
		</tr>
		<tr>
			<td class="colorCodes code03"><span style="font-size:1.8em; line-height:0.7;">&times;</span> — Do Not Use for Body Text (Blocks or Columns)</td>
		</tr>
		<tr>
			<td class="colorCodes code04">Weight 100 Fonts Should be Avoided</td>
		</tr>       
		<tr>
			<td class="colorCodes code05"><span style="font-size:1.4em; font-weight:700;">&gt;</span> — Minimum Contrast for Text</td>
		</tr>
		<tr>
			<td class="colorCodes code06">APCA 75 — Similar to WCAG 7∶1 <span>for BG #999 and lighter</span></td>
		</tr>
		<tr>
			<td class="colorCodes code07">APCA 60 — Similar to WCAG 4.5∶1 <span>for BG #9e9e9e and lighter</span></td>
		</tr>               
		<tr>
			<td class="colorCodes code08">APCA 45 — Similar to WCAG 3∶1 <span>for BG #9e9e9e and lighter</span></td>
		</tr>
	</table>
</div>

<hr>

=== WCAG 2.x to Silver/APCA Comparison Table ===
When you have a very light background and dark text, and the perceptual middle is around #999 to #AAA, then APCA L<sup>c</sup> 60 is roughly equivalent to WCAG 4.5:1.  Similarly, APCA L<sup>c</sup> 45 is about WCAG 3:1 and APCA L<sup>c</sup> 75 is about at WCAG 7:1.

This similarity only holds true in a very narrow range near the color #9e9e9e (per the G-4g scaling) or luminance 32Y to 40 Y.  This narrow band  is the only point where WCAG 2 and APCA “represent” the same contrast.  It applies to colors where the foreground and the background are each equidistant from the mid color. Outside of this very narrow range only APCA remains perceptually accurate, the old method does not. The following table demonstrates these relationships.

<big>'''This Table is Revised for G Series Constants (G-4g)</big>
{| class="wikitable" style="text-align: center;  border: 5px solid #308; border-radius: 1em;"
! colspan="9" style="font-size: 1.45em; color: #E4F0FF; background-color: #308"| WCAG 2.x to APCA (0.98G) Comparison Table
|- style="color: #250; background-color: #E4F0FF; "
!  rowspan="2" style="color: #800;"| WCAG<br />2.x<br />RATIO !! rowspan="2" style="color: #208;"|SAPC<br />APCA<br />L<sup>c</sup> !!colspan="2" style="font-size: 0.87em;"| sRGB HEX<br />COLORS !!rowspan="2" style="font-size: 0.74em;"|CENTER<br />PIVOT<br />COLOR<br />in HEX !!colspan="2" style="font-size: 0.87em;"|sRGB INT<br />COLORS  !!rowspan="2" style="font-size: 0.74em;"|CENTER<br />PIVOT<br />COLOR<br />as INT!! rowspan="2" style="font-size: 0.7em;" |OFFSET<br />TO THE<br />CENTER<br />COLOR
|- style="font-size: 0.8em; color: #250; background-color: #E4F0FF; "
! TXT !! BG !!TXT !! BG 
|-style="background-color: #FFFFF4; border: 2px solid #308; border-style: solid none none none;"
|style="font-weight: bold; color: #900;" | 10.2:1 || style="font-weight: bold; color: #208;" | L<sup>c</sup> 90 ||#3B ||#F5 || #98 || 59 || 245 || 152 || 93
|-style="background-color: #E2FFF2;"
|style="font-weight: bold; color: #A00;" | 7:1 || style="font-weight: bold; color: #208;" | L<sup>c</sup> 75 ||#4C ||#E8 || #9A || 76 || 232 || 154 || 78
|- style="background-color: #E2F4FF;"
|style="font-weight: bold; color: #A00;" | 4.5:1 || style="font-weight: bold; color: #208;" | L<sup>c</sup> 60 ||#60 ||#DB || #9D || 96 || 219 || 157 || 62.5
|-style="background-color: #F8F0D6;"
|style="font-weight: bold; color: #A00;" | 3:1 || style="font-weight: bold; color: #208;" | L<sup>c</sup> 45 ||#70 ||#CC || #9E || 112 || 204 || 158 || 46
|-style="background-color: #F0E4CD;"
|style="font-weight: bold; color: #900;" | 2:1 || style="font-weight: bold; color: #208;" | L<sup>c</sup> 30 ||#7E ||#BD || #9E || 126 || 189 || 158 || 32
|-style="background-color: #E2DAC8;"
|style="font-weight: bold; color: #900;" | 1.5:1 || style="font-weight: bold; color: #208;" | L<sup>c</sup> 15 ||#8C ||#AE || #9D || 140 || 174 || 157 || 17
|}

====''"Engineered on Purpose"'' 😁====
The SAPC math is engineered to put the key values at easy to remember levels: L<sup>c</sup> 30 45 60 75 90. And I specifically wanted '''L<sup>c</sup> 45, L<sup>c</sup> 60, L<sup>c</sup> 75''' to line up at some point with WCAG 2.x's '''3:1, 4.5:1,''' and '''7:1''', if for no other reason than to be able to say that ''"L<sup>c</sup> 60 is about like the old 4.5:1"'' to help in moving to this new guideline. 

Because APCA is perceptually uniform (within reasonable tolerances), a change by a certain L<sup>c</sup>  amount has a similar effect regardless of the present value or luminance. In the current scaling, increasing contrast by adding L<sup>c</sup> 15 is approximately equivalent to the contrast change of going from a 400 weight font to a 700 weight font, for fonts smaller than about 32px.

As it happens, the old 2.x math method really starts to breakdown when both colors are below #aaa or if the text is above #999 among other things. This became a convenient color to have as a line up point so that there would be a point where SAPC and WCAG values matched and results were "similar". 

'''EDIT: The new G Series exponents demonstrate that the old WCAG2 spec is completely out of line with perception. Darker color pairs that WCAG2 incorrectly pass will fail under APCA, and light text on dark backgrounds that WCAG incorrectly fail will now pass under APCA. Ultimately, APCA will provide as much as 50% more colors, and do so correctly.'''


<hr>

== Whitepaper Materials ==
White paper development materials have been moved to their own subpage.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/Whitepaper '''On readability contrast''' and related design theories.] Includes guidance for designers and developers.
== Modern Contrast Model ==
The theory and code samples for APCA have been moved to their own subpage.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/APCA_model '''On APCA'''—The Advanced Perceptual Contrast Algorithm] and the SAPC/APCA contrast prediction model. Includes code examples.
== Resources ==
Additional resources have been moved to their own subpage.
* [https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup/Resources '''Resources: Glossary, Bibliography'''], and links to team member materials. Includes a lighter side section and additional designer examples and guidance.

<hr>
== Participants ==
* Chris 
* Bruce
* Andy
* Todd L.

=== Former Participants ===
* Cybelle
* Chuck