Visual Contrast of Text Subgroup

From Silver

Important note: This Wiki page is edited by participants of the AGWG. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.


Links to W3C/WCAG3 Repo Issues & New Wiki

This group of links below all lead to w3c/wcag3 at github.com, as that is where these materials are migrating in an effort to consolidate.

WCAG 3 Issues at GitHub

The materials that were linked in these related Wiki pages has moved to the W3C/WCAG3 GitHub issues related to Visual Contrast Research.

WCAG 3 Wiki at GitHub

For reference, these are WCAG 3 Wiki entries that relate to user needs which are at least tangentially connected to Visual Contrast and Presentation.

External Resources (works in progress, not endorsed by W3C / AGWG)

⇩ Legacy Material for Archival Purposes ⇩

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

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 Andrew Somers (talk) 09:35, 14 December 2020 (UTC)

Drafts and Migration

Links to Project Drafts

Related:


Draft Conformance Model

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/darkness contrast (ignoring size, spatial, hue, and other contrasts) there are four broad categories:

  1. Fluent Readability Contrast
  2. Contrast for Spot Reading
  3. Contrast for non-text objects, images, elements, states (focus), etc.
  4. 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

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.


How This Answers the Scope Question

The <header> or <footer> does not denote use cases as defined herein. Nor does the <main> or <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, <main> or <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.

--Andrew Somers (talk) 00:53, 23 November 2020 (UTC)


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/

  • Reference fonts for comparison include Helvetica Neue, Helvetica, 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
Font Size 100 200 300 400
Normal
 500 600 700
Bold
 800 900
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
WCAG
2.x
RATIO		 SAPC
APCA
Lc		 sRGB HEX
COLORS		 CENTER
PIVOT
COLOR
in HEX		 sRGB INT
COLORS		 CENTER
PIVOT
COLOR
as INT		 OFFSET
TO THE
CENTER
COLOR
TXT BG TXT BG
10.2:1 Lc 90 #3B #F5 #98 59 245 152 93
7:1 Lc 75 #4C #E8 #9A 76 232 154 78
4.5:1 Lc 60 #60 #DB #9D 96 219 157 62.5
3:1 Lc 45 #70 #CC #9E 112 204 158 46
2:1 Lc 30 #7E #BD #9E 126 189 158 32
1.5:1 Lc 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: 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.


Resources

Resources have been moved to WCAG3 GitHub Issues.


Participants

  • Chris
  • Bruce
  • Andy
  • Todd L.

Former Participants

  • Cybele
  • Chuck

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.
  • Cybele: Wrote much of the early draft material, plus additional scope explorations, several of the linked files above as noted.
Retrieved from "https://www.w3.org/WAI/GL/task-forces/silver/wiki/index.php?title=Visual_Contrast_of_Text_Subgroup&oldid=3424"