Visual Contrast of Text Subgroup
Welcome to the landing page for Visual Contrast of Text, a subgroup of the Silver/WCAG 3 project.
Visual Contrast Subpages:
This page has been broken up into subpages to help organize topics.
- 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.
- An Advanced Contrast Prediction Model This specifically discusses the APCA perceptual contrast prediction model, including the math and code samples.
- Visual Contrast Conformance Model This is the former talk page relating to the multi-score conformance model for Visual Contrast for Silver/WCAG 3.
- Resources: Glossary, Bibliography, and links to team member materials. Includes a lighter side section and additional designer examples and guidance.
See Also the Low Vision Task Force Wiki
See Also 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 necessarily a part of official standards unless specifically stated. It is nevertheless intended to contain the latest and most accurate knowledge in the areas of visual contrast and readability.
- 1 Comments on WCAG3 FPWD for Visual Contrast
- 2 Introduction
- 3 Next Steps
- 4 Drafts and Migration
- 4.1 Links to Project Drafts
- 4.2 Draft Conformance Model
- 4.2.1 All visible text is in scope
- 4.2.2 Brief Overview of Contrasts
- 4.2.3 Use Cases Defined
- 4.2.4 Conformance Scoring Levels
- 4.2.5 How This Answers the Scope Question
- 4.3 Draft Lookup Table
- 4.4 WCAG 2.x to Silver/APCA Comparison Table
- 5 Whitepaper Materials
- 6 Modern Contrast Model
- 7 Resources
- 8 Participants
Comments on WCAG3 FPWD for Visual Contrast
- Github Issues assigned to Visual Contrast Subgroup - Github issuesfrom WCAG3 First Public Working Draft (FPWD) that are filtered for the Visual Contrast subgroup.
- Google drive folder for storing proposals
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.
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 made 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.
- 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
Drafts and Migration
Links to Project Drafts
- Project in Github
- CWD Guideline
- APCA tool - stable version for reference
- SAPC public beta tool - non-stable version with interactive research, experiments, and bleeding-edge evaluations.
- 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.
- 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.
- 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.
- Gist: Orange You Wondering About Contrast? A brief coverage of contrast and the infamous ORANGE example and APCA.
- Gist: The Lighter Side of Dark Backgrounds A a followup to the above article, further comparing APCA and WCAG2.
Draft Conformance Model
SEE ALSO: 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.
Brief Overview of Contrasts
In terms of lightness/garkness 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.
Use Cases Defined
(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
Conformance Scoring Levels
- 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.
How This Answers the Scope Question
<footer> does not denote use cases as defined herein. Nor does the
<article> 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,
<section> 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.
Draft Lookup Table
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 Lc 75 is similar to WGAG 7:1 with a light #E8 background.
- APCA Lc 60 is similar to WGAG 4.5:1 with a light #DB background.
- APCA Lc 45 is similar to WGAG 3:1 with a light #CC background.
- Other comparisons:
- APCA Lc 90 is similar to 10:1, widely considered to be an ideal contrast for columns of body text with a normal weight font.
- APCA Lc 30 is similar to 2:1, considered to be a "hard limit" text minimum by some standards.
- APCA Lc 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.
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).
|APCA CONTRAST LOOKUP TABLE|
|Reference Font Weight|
|pt||px||APCA Contrast Value (Lc)|
|VALUES BEING REVISED OCT 2021|
|APCA CONTRAST COLOR CODES|
|⊘ — PROHIBITED Except for Decorative Purposes|
|©§™ — May be used for Copyright/ByLine ONLY|
|× — Do Not Use for Body Text (Blocks or Columns)|
|Weight 100 Fonts Should be Avoided|
|> — Minimum Contrast for Text|
|APCA 75 — Similar to WCAG 7∶1 for BG #999 and lighter|
|APCA 60 — Similar to WCAG 4.5∶1 for BG #9e9e9e and lighter|
|APCA 45 — Similar to WCAG 3∶1 for BG #9e9e9e and lighter|
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 Lc 60 is roughly equivalent to WCAG 4.5:1. Similarly, APCA Lc 45 is about WCAG 3:1 and APCA Lc 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.
This Table is Revised for G Series Constants (G-4g)
|WCAG 2.x to APCA (0.98G) Comparison Table|
| sRGB HEX
"Engineered on Purpose" 😁
The SAPC math is engineered to put the key values at easy to remember levels: Lc 30 45 60 75 90. And I specifically wanted Lc 45, Lc 60, Lc 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 "Lc 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 Lc amount has a similar effect regardless of the present value or luminance. In the current scaling, increasing contrast by adding Lc 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.
White paper development materials have been moved to their own subpage.
- 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.
- On APCA—The Advanced Perceptual Contrast Algorithm and the SAPC/APCA contrast prediction model. Includes code examples.
Additional resources have been moved to their own subpage.
- Resources: Glossary, Bibliography, and links to team member materials. Includes a lighter side section and additional designer examples and guidance.
- Todd L.
Who Wrote All This Stuff?
- Andy: The text and graphic informational material on this page is written by Andrew Somers, copyright © 2019-2021 by Andrew Somers. All Rights Reserved.
- Bruce: Instrumental in developing the lookup and scoring models, and on the discussion tab.
- Cybelle: Wrote much of the early draft material, plus additional scope explorations, several of the linked files above as noted.