This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines (Visual contrast of text)
Method: Font characteristics contrast
Introduction
Platform
- All desktop and mobile platforms including Windows, iOS, Android, MacOS, and Linux.
- Documents such as PDF, word processing documents, ePub, and slideware.
Technology
- HTML, CSS, Javascript, and content authoring applications where visually readable content specifies the font size and weight and the text and background colors.
Summary
Visual readability of text requires good visual contrast. Visual contrast is a product of the text characteristics, such as font weight (thickness) and font size, the lightness/darkness difference of the colors used for the text and the background, and other factors.
Using objective guidelines and tools, evaluate font stroke width (weight), font size, background color, font color, and nearby colors and adjust the properties of those elements to achieve good visual contrast and readability.
How it solves user need
All sighted users need adequate text size and weight, coupled with ample luminance contrast (lightness/darkness difference) between background and text colors, in order to read the text easily.
Description
Outcome
This method supports the outcome Luminance contrast between background and text.
Detailed description
The visual contrast needed for easy reading of text is substantially higher than the contrast needed to simply "make out" words. At least ten times more contrast is needed for good readability than the bare minimum contrast needed for legibility.
Perception of contrast is affected not only by the lightness and darkness of the colors used for the text and background, but also by the weight (thickness) of the font, the font's size, and the relative spacing of lines and letters.
A person's contrast sensitivity shifts throughout their lifetime, and visual impairments can cause a substantial reduction in contrast perception, requiring higher contrast text for the same readability. Some impairments can make it difficult to see certain hues, so it is important to ensure enough luminance contrast (lightness/darkness), and not to rely on color contrasts of hue and saturation.
Because a person's contrast perception is so variable, it is difficult for any one individual to judge what makes a good readable contrast for all. The solution is to use objective guidelines and tools to evaluate font stroke width (weight), font size, background and font colors to ensure good visual contrast and readability.
Dependencies
None
Examples
- See examples in the How To
<
Tests
Atomic Tests
Calculated Luminance Contrast
Test Procedure
- Obtain representative sRGB values for the foreground text and the background color.
- This can be done via the calculated values as determined by a browser or user agent, by sampling the rendered page using a color meter or eye-dropper tool, or by auditing the CSS styles in use.
- If an “eye dropper” type tool is used it must report values relative to the sRGB colorspace.
- The eye dropper sample should be a pixel in the middle of a major stroke of the font at the smallest size to be tested, with the content size set to default with no user scaling.
- For small and thin fonts, sample at least three different letters and average the result.
- If auditing the CSS styles, it is important to confirm that a particular style property is active. For complex style sheets, it is recommended to use the values as calculated by the browser.
- With a contrast calculator that uses the APCA contrast method, calculate the predicted contrast between foreground text and background colors.
- Important: do not swap the background or text colors in the tool entry fields.
- The contrast evaluation is based in part on polarity, so it is important that the text color value be entered into the text color field, and likewise for the background.
- For calculators that provide only a contrast result: Compare the calculated contrast value against the lookup table
Accessible Contrast by Font Size and Weight
below. - Check that the absolute value of the predicted contrast percentage meets or exceeds the required value for the font weight and size in the content.
- For calculators that provide minimum size and weight with the results: Compare the smallest font size and weight as used in the content for the tested color pair, and check that it meets or exceeds the calculated minimum font size and weight.
Expected Results
Check either #5 or #6 is true.
The following table cross indexes APCA contrast values to the reference font's CSS font-size and CSS font-weight. Reference fonts for comparison include Helvetica Neue, Helvetica, Fira Sans, Kanit, and Arial. Contrast percentage must meet or exceed the value listed, using the absolute value for negative values. A ⊘ indicates that a larger font size (or heavier font weight) must be used.
| Reference Font Weight | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Font Size |
100 | 200 | 300 | 400 Normal |
500 | 600 | 700 Bold |
800 | 900 |
| 12px | ⊘ | ⊘ | ⊘ | ⊘ | 125 | 120 | 100 | 100 | ⊘ |
| 14px | ⊘ | ⊘ | ⊘ | 125 | 120 | 100 | 80 | 80 | ⊘ |
| 16px | ⊘ | ⊘ | 125 | 120 | 100 | 80 | 75 | 70 | 70 |
| 18px | ⊘ | ⊘ | 120 | 100 | 80 | 75 | 70 | 60 | 60 |
| 24px | ⊘ | 120 | 100 | 80 | 75 | 70 | 60 | 58 | 55 |
| 30px | ⊘ | 110 | 90 | 75 | 70 | 60 | 58 | 55 | 50 |
| 36px | ⊘ | 100 | 80 | 70 | 60 | 58 | 55 | 50 | 45 |
| 48px | 120 | 90 | 75 | 60 | 58 | 55 | 50 | 45 | 40 |
| 60px | 110 | 80 | 70 | 58 | 55 | 50 | 45 | 40 | 40 |
| 72px | 100 | 75 | 60 | 55 | 50 | 45 | 40 | 40 | 40 |
| 96px | 90 | 70 | 55 | 50 | 45 | 40 | 40 | 40 | 40 |
| 120px | 80 | 60 | 50 | 45 | 40 | 40 | 40 | 40 | 40 |
- Values shown are for common sans-serif fonts (e.g., Helvetica, Arial, Verdana, Calibri, Trebuchet).
- Some fonts such as Times have a smaller than usual x-height. Such fonts should be compared to the reference and adjust the needed contrast accordingly.
- Similarly, some fonts such as
Courier New
have an unusually thin weight, and thus need much higher contrast. - Decorative, unusual, and very thin fonts should be avoided for columns of body text.
- Due to the vast variety of font designs, designers should visually compare an unusual font to a standard font such as Helvetica, using the size and weight of Helvetica that most closely matches the appearance of the tested font as a guide.
- Designers are cautioned that bypassing default font smoothing can drastically reduce contrast for small or thin fonts. For instance, the use of
webkit-font-smoothing: antialiasing
is strongly discouraged.
Holistic Tests
- Still to be developed. We will include this in a future working draft.
Resources
W3C Resources
- None.
Non-W3C Resources
- Advanced Perceptual Contrast Algorithm (APCA) Visual Contrast Calculator. Takes a pair of CSS sRGB colors and predicts the perceived contrast, to be used with the APCA lookup table.
- APCA GitHub Repository. Source code for the APCA calculator.
- Color Vision Deficiency Simulator. Allows designers to preview how their designs may look like to individuals with color blindness. Includes an sRGB grayscale example, useful for visually assessing luminance contrast.
Status
Draft
Change Log
- 2020-09-27: Ported and trimmed content.
- 2020-02-25: Addl. First Working Draft Updates (updated lookup table, minor spelling errors, added paragraph in Description, fixed formatting for code samples). (AMS)
- 2020-02-24: First Working Draft Updates (corrected math, moved math and gloassary to Resources tab, added description, added clarification to Tests tab). (AMS)
- 2020-01-20: Draft