diff --git a/guidelines/terms/20/contrast-ratio.html b/guidelines/terms/20/contrast-ratio.html index 66a1d522e9..7cf456fe2e 100644 --- a/guidelines/terms/20/contrast-ratio.html +++ b/guidelines/terms/20/contrast-ratio.html @@ -15,29 +15,6 @@

Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).

-

Because authors do not have control over user settings as to how text is rendered - (for example font smoothing or anti-aliasing), the contrast ratio for text can be - evaluated with anti-aliasing turned off. -

- -

For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect - to the specified background over which the text is rendered in normal usage. If no - background color is specified, then white is assumed. -

- -

Background color is the specified color of content over which the text is to be rendered - in normal usage. It is a failure if no background color is specified when the text - color is specified, because the user's default background color is unknown and cannot - be evaluated for sufficient contrast. For the same reason, it is a failure if no text - color is specified when a background color is specified. -

- -

When there is a border around the letter, the border can add contrast and would be - used in calculating the contrast between the letter and its background. A narrow border - around the letter would be used as the letter. A wide border around the letter that - fills in the inner details of the letters acts as a halo and would be considered background. -

-

WCAG conformance should be evaluated for color pairs specified in the content that an author would expect to appear adjacent in typical presentation. Authors need not consider unusual presentations, such as color changes made by the user agent, except diff --git a/understanding/20/contrast-enhanced.html b/understanding/20/contrast-enhanced.html index 91fb27d3e7..e569cac6e0 100644 --- a/understanding/20/contrast-enhanced.html +++ b/understanding/20/contrast-enhanced.html @@ -1,13 +1,13 @@ - + Understanding Contrast (Enhanced)

Understanding Contrast (Enhanced)

- +

In brief

@@ -15,12 +15,11 @@

In brief

What to do
Strongly contrast text against its background.
Why it's important
Some people cannot read text with minimum contrast.
-
- +

Intent of Contrast (Enhanced)

- +

The intent of this success criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, @@ -30,30 +29,30 @@

Intent of Contrast (Enhanced)

that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.

- +

Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this - criterion. + criterion.

- +

Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. (See The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large - Print under + Print under Resources). "18 point" and "bold" can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there are so many different fonts, the general measures are used and a note regarding thin or unusual fonts is included in the definition for large-scale text.

- +

When evaluating this Success Criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. - Point sizes are based on the CSS pt size as defined in + Point sizes are based on the CSS pt size as defined in CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px. @@ -65,7 +64,7 @@

Intent of Contrast (Enhanced)

resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text. For example, for a 72ppi image, an author would need to use approximately 19pt and 24pt font sizes in order to successfully present images - of large-scale text to a user. + of large-scale text to a user.

The 7:1 and 4.5:1 contrast ratios referenced in this success criterion are intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion @@ -84,12 +83,12 @@

Intent of Contrast (Enhanced)

of this success criterion.

- +

The contrast requirements for text also apply to images of text (text that has been rendered into pixels and then stored in an image format) - see Success Criterion 1.4.5: Images of Text.

- +

This requirement applies to situations in which images of text were intended to be understood as text. Incidental text, such as in photographs that happen to include a street sign, are not included. Nor is text that for some reason is designed to be @@ -97,47 +96,48 @@

Intent of Contrast (Enhanced)

in terms of its function on the page, which may or may not warrant including the content in the text alternative. Corporate visual guidelines beyond logo and logotype are not included in the exception. -

- +

In this provision there is an exception that reads "that are part of a picture that contains significant other visual content,". This exception is intended to separate pictures that have text in them from images of text that are done to replace text - in order to get a particular look. + in order to get a particular look.

- +
-

Images of text do not scale as well as text because they tend to pixelate. It is also harder to change foreground and background contrast and color combinations for images of text, which is necessary for some users. See 1.4.5: Images of Text. -

-
- +

This success criterion applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast.

- + +

When there is a border around the letter, the border can add contrast and should be + used in calculating the contrast between the letter and its background. A narrow border + around the letter would be used as the letter. A wide border around the letter that + fills in the inner details of the letters acts as a halo and would be considered background. +

+

Although this success criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information, which is covered by - Success Criterion 1.4.11 Non-Text Contrast. + Success Criterion 1.4.11 Non-Text Contrast.

- +
-

Rationale for the Ratios Chosen

- +

A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision. The 4.5:1 ratio is used in Success Criterion 1.4.3 to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

- +

The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard, and b) the empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity @@ -146,7 +146,7 @@

Rationale for the Ratios Chosen

the user with 20/80 visual acuity would require contrast of about 7:1. This ratio is used in this success criterion.

- +

Hues are perceived differently by users with color vision deficiencies (both congenital and acquired) resulting in different colors and relative luminance contrasts than for normally sighted users. Because of this, effective contrast and readability are @@ -159,29 +159,27 @@

Rationale for the Ratios Chosen

regard to specific color deficiency, except for the use of predominantly long wavelength colors against darker colors (generally appearing black) for those who have protanopia. (We provide an advisory technique on avoiding red on black for that reason). For more - information see [[ARDITI-KNOBLAUCH-1994]] - [[ARDITI-KNOBLAUCH-1996]] + information see [[ARDITI-KNOBLAUCH-1994]] + [[ARDITI-KNOBLAUCH-1996]] [[ARDITI]].

- +
-

Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content. Some of the combinations that could be chosen may have contrast levels that will be lower than those specified here. This is not a violation of this Success Criterion, provided there is a mechanism that will return to the required values set out here. -

- +

- +

The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]]

- +

The contrast ratio of 7:1 was chosen for level AAA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually @@ -191,46 +189,43 @@

Rationale for the Ratios Chosen

experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well.

- +

Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast ratio is provided for text that is much larger.

-
- +
-

Notes on formula

- +

Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]].

- +

The formula (L1/L2) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.

- +

The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing Flare from [[IEC-4WD]].

- +

This success criterion and its definitions use the terms "contrast ratio" and "relative luminance" rather than "luminance" to reflect the fact that web content does not emit light itself. The contrast ratio gives a measure of the relative luminance that would result when displayed. (Because it is a ratio, it is dimensionless.)

- +

- Refer to + Refer to related resources for a list of tools that utilize the contrast ratio to analyze the contrast of web content.

-

See also +

See also 2.4.7: Focus Visible for techniques for indicating keyboard focus.

-
- +

Inactive User Interface Components

@@ -240,181 +235,136 @@

Inactive User Interface Components

An inactive button using default browser styles
-

Benefits of Contrast (Enhanced)

- - + -
- +

Examples of Contrast (Enhanced)

- -
- +

Resources for Contrast (Enhanced)

- - + -
- +

Techniques for Contrast (Enhanced)

- - +

Sufficient Techniques for Contrast (Enhanced)

- - +
-

Situation A: text is less than 18 point if not bold and less than 14 point if bold

- + -
- +
-

Situation B: text is as least 18 point if not bold and at least 14 point if bold

- + -
-
- +

Additional Techniques (Advisory) for Contrast (Enhanced)

- - + -
- +

Failures for Contrast (Enhanced)

- - + -
-
- diff --git a/understanding/20/contrast-minimum.html b/understanding/20/contrast-minimum.html index 90cfbc2b00..efbd8a1861 100644 --- a/understanding/20/contrast-minimum.html +++ b/understanding/20/contrast-minimum.html @@ -1,58 +1,57 @@ - + Understanding Contrast (Minimum)

Understanding Contrast (Minimum)

- +

In brief

Goal
Text can be seen by more people.
What to do
Provide sufficient contrast between text and its background.
-
Why it's important
Some people cannot read faint text.
+
Why it's important
Some people cannot read faint text.

Intent of Contrast (Minimum)

- -

The intent of this success criterion is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology. -

+ +

The intent of this success criterion is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology.

For all consumers of visual content, adequate light-dark contrast is needed between the relative luminance of text and its background for good readability. Many different visual impairments can substantially impact contrast sensitivity, requiring more light-dark contrast, regardless of color (hue). For people who are not able to distinguish certain shades of color (often referred to as color blindness) hue and saturation have minimal or no effect on legibility as assessed by reading performance. Further, the inability to distinguish certain shades of color does not negatively affect light-dark contrast perception. Therefore, in the recommendation, contrast is calculated in such a way that color (hue) is not a key factor.

- +

Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this - criterion. + criterion.

- +

Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. (See The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large - Print under + Print under Resources). "18 point" and "bold" can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there are so many different fonts, the general measures are used and a note regarding thin or unusual fonts is included in the definition for large-scale text.

- +

When evaluating this Success Criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. - Point sizes are based on the CSS pt size as defined in + Point sizes are based on the CSS pt size as defined in CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px. @@ -64,13 +63,13 @@

Intent of Contrast (Minimum)

resulting image is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text. For example, for a 72ppi image, an author would need to use approximately 19pt and 24pt font sizes in order to successfully present images - of large-scale text to a user. + of large-scale text to a user.

The 3:1 and 4.5:1 contrast ratios referenced in this success criterion are intended to be treated as threshold values. When comparing the computed contrast ratio to the Success Criterion ratio, the computed values should not be rounded (e.g., 4.499:1 would not meet the 4.5:1 threshold).

- +

Because authors do not have control over user settings for font smoothing/anti-aliasing, when evaluating this Success Criterion, refer to the foreground and background colors obtained from the user agent, or the underlying @@ -88,7 +87,6 @@

Intent of Contrast (Minimum)

(text that has been rendered into pixels and then stored in an image format) - see Success Criterion 1.4.5: Images of Text.

-

This requirement applies to situations in which images of text were intended to be understood as text. Incidental text, such as in photographs that happen to include a street sign, are not included. Nor is text that for some reason is designed to be @@ -96,52 +94,53 @@

Intent of Contrast (Minimum)

in terms of its function on the page, which may or may not warrant including the content in the text alternative. Corporate visual guidelines beyond logo and logotype are not included in the exception. -

- +

In this provision there is an exception that reads "that are part of a picture that contains significant other visual content,". This exception is intended to separate pictures that have text in them from images of text that are done to replace text - in order to get a particular look. + in order to get a particular look.

- +
-

Images of text do not scale as well as text because they tend to pixelate. It is also harder to change foreground and background contrast and color combinations for images of text, which is necessary for some users. Therefore, we suggest using text wherever possible, and when not, consider supplying an image of higher resolution. -

-
- +

This success criterion applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast.

- + +

When there is a border around the letter, the border can add contrast and should be + used in calculating the contrast between the letter and its background. A narrow border + around the letter would be used as the letter. A wide border around the letter that + fills in the inner details of the letters acts as a halo and would be considered background. +

+

Although this success criterion only applies to text, similar issues occur for content presented in charts, graphs, diagrams, and other non-text-based information, which is covered by - Success Criterion 1.4.11 Non-Text Contrast. + Success Criterion 1.4.11 Non-Text Contrast.

- -

See also + +

See also 1.4.6: Contrast (Enhanced).

- +
-

Rationale for the Ratios Chosen

- +

A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision. The 4.5:1 ratio is used in this success criterion to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

- +

The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard, and b) the empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity @@ -163,29 +162,27 @@

Rationale for the Ratios Chosen

regard to specific color deficiency, except for the use of predominantly long wavelength colors against darker colors (generally appearing black) for those who have protanopia. (We provide an advisory technique on avoiding red on black for that reason). For more - information see [[ARDITI-KNOBLAUCH-1994]] - [[ARDITI-KNOBLAUCH-1996]] + information see [[ARDITI-KNOBLAUCH-1994]] + [[ARDITI-KNOBLAUCH-1996]] [[ARDITI]].

- +
-

Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content. Some of the combinations that could be chosen may have contrast levels that will be lower than those those specified here. This is not a violation of this Success Criterion, provided there is a mechanism that will return to the required values set out here. -

- +

- +

The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is - commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]] + commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]]

- +

The contrast ratio of 7:1 was chosen for level AAA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually @@ -195,46 +192,44 @@

Rationale for the Ratios Chosen

experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well.

- +

Calculations in [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] are for body text. A relaxed contrast ratio is provided for text that is much larger.

-
- +
-

Notes on formula

- +

Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [[IEC-4WD]].

- +

The formula (L1/L2) for contrast is based on [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards.

- +

The ANSI/HFS 100-1988 standard calls for the contribution from ambient light to be included in the calculation of L1 and L2. The .05 value used is based on Typical Viewing Flare from [[IEC-4WD]].

- +

This success criterion and its definitions use the terms "contrast ratio" and "relative luminance" rather than "luminance" to reflect the fact that web content does not emit light itself. The contrast ratio gives a measure of the relative luminance that would result when displayed. (Because it is a ratio, it is dimensionless.)

- +

- Refer to + Refer to related resources for a list of tools that utilize the contrast ratio to analyze the contrast of web content.

-

See also +

See also 2.4.7: Focus Visible for techniques for indicating keyboard focus.

- +
- +

Inactive User Interface Components

@@ -244,82 +239,66 @@

Inactive User Interface Components

An inactive button using default browser styles
- +

Benefits of Contrast (Minimum)

- + - +
- +

Examples of Contrast (Minimum)

- -
- +

Resources for Contrast (Minimum)

- - + - +
- +

Techniques for Contrast (Minimum)

- - +

Sufficient Techniques for Contrast (Minimum)

- - +
-

Situation A: text is less than 18 point if not bold and less than 14 point if bold

- + -
- +
-

Situation B: text is at least 18 point if not bold and at least 14 point if bold

- + -
-
- +

Additional Techniques (Advisory) for Contrast (Minimum)

- - + -
- +

Failures for Contrast (Minimum)

- - + -
-
- + diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index c4276c6757..b9a8e746d0 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -30,7 +30,7 @@

Intent

-

Because authors do not have control over user settings for font smoothing and anti-aliasing, when evaluating this +

Because authors do not have control over user settings for anti-aliasing, when evaluating this Success Criterion, refer to the colors obtained from the user agent, or the underlying markup and stylesheets, rather than the non-text elements as presented on screen.

Due to anti-aliasing, particularly thin lines and shapes of non-text elements may be rendered by user agents with